diff --git a/challenges/01-responsive-web-design/basic-css.json b/challenges/01-responsive-web-design/basic-css.json index eb4789763f..b81457c25b 100644 --- a/challenges/01-responsive-web-design/basic-css.json +++ b/challenges/01-responsive-web-design/basic-css.json @@ -61,12 +61,41 @@ "The style that is responsible for the color of an element's text is the \"color\" style.", "Here's how you would set your h2 element's text color to blue:", "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "
", "Change your h2 element's style so that its text color is red." ], "challengeSeed": [ "

CatPhotoApp

", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your h2 element should be red.');" @@ -81,6 +110,7 @@ "Der Style, der zuständig für die Textfarbe eines Elements ist, ist der \"color\" Style.", "So könntest du die Textfarbe des h2 Elements in Blau ändern:", "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "
", "Ändere den Style des h2 Elements, damit die Textfarbe rot (\"red\") ist." ] }, @@ -92,6 +122,7 @@ "Le style responsable de la couleur de texte d'un élément est \"color\".", "Voici comment changer en bleu la couleur du texte de votre élément h2 :", "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "
", "Changez le style de votre élément h2 pour que son texte soit de couleur rouge." ] }, @@ -103,6 +134,7 @@ "A propriedade de estilo responsável pela cor do texto se chama \"color\".", "Você pode mudar a cor do texto de seu elemento h2 para azul assim:", "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "
", "Mude o estilo do elemento h2 para que seu texto fique com a cor vermelha." ] }, @@ -114,6 +146,7 @@ "Параметр стиля, отвечающий за цвет текста внутри элемента - \"color\".", "Вот как вы могли бы установить цвет текста вашего элемента h2 синим:", "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "
", "Измените стиль вашего элемента h2 таким образом, чтобы текст элемента стал красным." ] } @@ -131,12 +164,41 @@ "Inside that style element, you can create a CSS selector for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this:", "
<style>
  h2 {color: red;}
</style>
", "Note that it's important to have both opening and closing curly braces ({ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles.", + "
", "Delete your h2 element's style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue." ], "challengeSeed": [ "

CatPhotoApp

", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert(!$(\"h2\").attr(\"style\"), 'message: Remove the style attribute from your h2 element.');", @@ -158,6 +220,7 @@ "Innerhalb des Style Elements kannst du einen CSS selector für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente rot färben willst, schreibst du:", "
<style>
  h2 {color: red;}
</style>
", "Beachte, dass du öffnende und schließende geschwungene Klammern ({ und }) um jeden Style setzen musst. Außerdem musst du sichergehen, dass deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon.", + "
", "Lösche das Style Attribute deines h2 Elements und erstelle stattdessen ein CSS style Element. Füge das notwendige CSS hinzu, um alle h2 Elemente Blau zu färben." ] }, @@ -172,6 +235,7 @@ "À l'intérieur de cet élément style, vous pouvez créer des sélecteurs CSS pour tous les éléments h2. Par exemple, si vous voulez que tous les éléments h2 soient en rouge, votre élément style ressemblerait à ceci :", "
<style>
  h2 {color: red;}
</style>
", "Prenez note qu'il est important d'avoir les accolades ouvrantes et fermantes ({ and }) autour de chaque élément de style. Vous devez aussi vous assurer que vos styles se retrouvent entre une balise style ouvrante et fermante. Finalement, assurez-vous d'ajouter un point-virgule â la fin de chacun des styles d'éléments.", + "
", "Supprimez les attributs de styles de votre élément h2 et créez plutôt un élément de style CSS. Ajoutez le CSS nécessaire pour rendre tous vos éléments h2 de couleur bleu." ] }, @@ -187,6 +251,7 @@ "  h2 {color: red;}", "</style>", "Observe que é importante utilizar as chaves de abertura e de fechamento ({ e }) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.", + "
", "Apague o atributo style de seu elemento h2 e então crie um elemento style CSS. Adicione o CSS necessário para fazer com que todos os elementos h2 tenham a cor azul." ] }, @@ -201,6 +266,7 @@ "Внутри этого элемента style вы можете создать CSS-селектор для всех элементов h2 в документе. Например, если бы вы хотели, чтобы все элементы h2 были красными, ваш элемент style выглядел бы следующим образом:", "
<style>
  h2 {color: red;}
</style>
", "Обратите внимание, что важно наличие открывающих и закрывающих фигурных скобок ({ и }) вокруг стиля каждого элемента. Также вам необходимо убедиться в том, что стиль элемента присвоен внутри элемента style. В завершении, убедитесь, что строка объявления каждого элемента стиля должна заканчиваться точкой с запятой.", + "
", "Удалите атрибут стиль вашего элемента h2 и взамен создайте CSS-элемент style. Добавьте необходимый CSS, чтобы все элементы h2 стали синими." ] } @@ -217,6 +283,7 @@ "You can apply a class to an HTML element like this:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.", + "
", "Inside your style element, change the h2 selector to .red-text and update the color's value from blue to red.", "Give your h2 element the class attribute with a value of 'red-text'." ], @@ -228,8 +295,36 @@ "", "", "

CatPhotoApp

", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your h2 element should be red.');", @@ -249,6 +344,7 @@ "Du kannst eine Klasse folgendermaßen einem HTML Element beifügen:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginnen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.", + "
", "Ändere deinen h2 Selektor innerhalb deines style Elements zu .red-text und ändere den Farbwert von blue zu red.", "Gib deinem h2 Element das class Attribut mit dem Wert 'red-text'." ] @@ -263,6 +359,7 @@ "Vous pouvez appliquer une classe à un élément HTML comme ceci :", "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Prenez note que que dans votre élément CSS style, les classes doivent débuter par un point. Dans les déclarations de classes à l'intérieur des éléments HTML, on doit omettre le point du début.", + "
", "À l'intérieur de votre élément style, changez le sélecteur du h2 pour .red-text et changez la couleur, passant de blue à red.", "Donnez à votre élément h2 l'attribut de classe la valeur de red-text." ] @@ -281,6 +378,7 @@ "Você pode aplicar uma classe a um elemento HTML assim:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Note que em seu elemento style CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.", + "
", "Ao invés de criar um novo elemento style, tente eliminar a declaração de estilo de h2 dos elementos de estilo existentes, e troque ela pela declaração de classe .red-text.", "Crie uma classe CSS chamada red-text e então a aplique em seu elemento h2." ] @@ -295,6 +393,7 @@ "Вы можете применить класс к HTML-элементу следующим образом:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Обратите внимание, что в вашем CSS-элементе style названию классов следует начинаться с точки. При присваивании классов HTML-элементам названия классов не должны начинаться с точки.", + "
", "Внутри вашего элемента style, замените селектор h2 на .red-text и измените значение цвета с blue на red.", "Присвойте вашему элементу h2 атрибут class со значением 'red-text'." ] @@ -305,12 +404,7 @@ "id": "bad87fee1348bd9aefe08806", "title": "Style Multiple Elements with a CSS Class", "description": [ - "Remember that you can attach classes to HTML elements by using class=\"your-class-here\" within the relevant element's opening tag.", - "Remember that CSS class selectors require a period at the beginning like this:", - "
.blue-text {
  color: blue;
}
", - "But remember you don't need to use a period when attaching classes to an HTML element:", - "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "Apply the red-text class to your h2 and p elements." + "Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your red-text class to the first p element." ], "challengeSeed": [ "", "", "

CatPhotoApp

", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your h2 element should be red.');", "assert($(\"h2\").hasClass(\"red-text\"), 'message: Your h2 element should have the class red-text.');", - "assert($(\"p\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your p element should be red.');", - "assert($(\"p\").hasClass(\"red-text\"), 'message: Your p element should have the class red-text.');" + "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your first p element should be red.');", + "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'message: Your second and third p elements should not be red.');", + "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'message: Your first p element should have the class red-text.');" ], "type": "waypoint", "challengeType": 0, @@ -339,7 +462,8 @@ "
.blue-text {
  color: blue;
}
", "Aber Klassen-Deklarationen brauchen keinen Punkt:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "Füge die red-text Klasse deinem h2 und p Element hinzu." + "
", + "Füge die red-text Klasse dem ersten p Element hinzu." ] }, "fr": { @@ -350,7 +474,8 @@ "
.blue-text {
  color: blue;
}
", "Rappelez-vous également que les déclarations de classes n'ont pas de point, comme ceci :", "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "Appliquez la classe red-text à vos éléments h2 et p." + "
", + "Appliquez la classe red-text à votre premier élément p." ] }, "pt-br": { @@ -363,7 +488,8 @@ "}", "Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:", "<h2 class=\"blue-text\">CatPhotoApp<h2>", - "Adicione a classe red-text aos seus elementos h2 e p." + "
", + "Adicione a classe red-text ao seu primeiro elemento p." ] }, "ru": { @@ -374,7 +500,8 @@ "
.blue-text {
  color: blue;
}
", "Но также не забывайте, что присваивание классов не использует точку, например:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "Примените класс red-text к вашим элементам h2 и p." + "
", + "Примените класс red-text к вашим элемент первые p." ] } } @@ -385,9 +512,8 @@ "description": [ "Font size is controlled by the font-size CSS property, like this:", "
h1 {
  font-size: 30px;
}
", - "Create a second p element after the existing p element with the following kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px).", - "Note
Please do not add a class attribute to your new p element." + "
", + "Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px)." ], "challengeSeed": [ "", "", "

CatPhotoApp

", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ - "assert($(\"p\").length > 1, 'message: You need 2 p elements with Kitty Ipsum text.');", - "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p elements has a closing tag.');", - "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'message: Your p element should contain the first few words of the provided additional kitty ipsum text.');", - "assert($(\"p:eq(0)\").attr(\"class\") === \"red-text\", 'message: The first p element should have the class red-text.');", - "assert($(\"p:eq(1)\").attr(\"class\") === undefined, 'message: Do not add a class attribute to the second p element.');", "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'message: Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.');" ], "type": "waypoint", @@ -415,9 +564,8 @@ "description": [ "Schriftgröße wird von dem CSS Attribut font-size kontrolliert:", "

h1 {
  font-size: 30px;
}
", - "Erstelle ein zweites p Element mit dem folgenden Kitty Ipsum Text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "Erstelle dann innerhalb deines <style> Elements, das auch deine red-text Klasse enthält, einen Eintrag für p Elemente und setzte font-size auf 16 Pixel (16px).", - "Notiz
Füge bitte auch kein Klassenattribute zu deinem neuen p Element hinzu." + "
", + "Erstelle dann innerhalb deines <style> Elements, das auch deine red-text Klasse enthält, einen Eintrag für p Elemente und setzte font-size auf 16 Pixel (16px)." ] }, "fr": { @@ -425,9 +573,8 @@ "description": [ "La taille de police est contrôlée par la propriété CSS font-size, comme ceci :", "
h1 {
  font-size: 30px;
}
", - "Créez un second élément p après l'élément p existant avec le texte kitty ipsum suivant : Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "À l'intérieur de la même balise <style> qui contiens votre classe .red-text, créez une nouvelle entrée pour les éléments p et paramétrer le font-size à 16 pixels (16px).", - "Prenez note
Veuillez ne pas ajouter d'attributs de classe à votre nouvel élément p." + "
", + "À l'intérieur de la même balise <style> qui contiens votre classe .red-text, créez une nouvelle entrée pour les éléments p et paramétrer le font-size à 16 pixels (16px)." ] }, "pt-br": { @@ -437,7 +584,7 @@ "h1 {", "  font-size: 30px;", "}", - "Crie um segundo elemento p que tenha o seguinte texto Kitty Ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "
", "Dentro da mesma tag <style> que criamos para sua classe red-text, modifique o font-size dos elementos p para que tenha um tamanho de 16 pixels (16px)." ] }, @@ -446,9 +593,8 @@ "description": [ "Размером шрифта управляют с помощтю CSS-своайства font-size, например:", "
h1 {
  font-size: 30px;
}
", - "Создайте второй элемент p со следующи текстом kitty ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "Внутри того же элемента <style>, который содержит ваш класс red-text, создайте вхождение для элементов p и установите свойство font-size равным 16 пикселей (16px).", - "Внимание
Пожалуйста, не добавляйте атрибут класс к вашему новому элементу p." + "
", + "Внутри того же элемента <style>, который содержит ваш класс red-text, создайте вхождение для элементов p и установите свойство font-size равным 16 пикселей (16px)." ] } } @@ -458,8 +604,9 @@ "title": "Set the Font Family of an Element", "description": [ "You can set an element's font by using the font-family property.", - "For example, if you wanted to set your h2 element's font to Sans-serif, you would use the following CSS:", - "
h2 {
  font-family: Sans-serif;
}
", + "For example, if you wanted to set your h2 element's font to Sans-Serif, you would use the following CSS:", + "
h2 {
  font-family: Sans-Serif;
}
", + "
", "Make all of your p elements use the Monospace font." ], "challengeSeed": [ @@ -474,9 +621,36 @@ "", "", "

CatPhotoApp

", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'message: Your p elements should use the font Monospace.');" @@ -487,8 +661,9 @@ "de": { "description": [ "Du kannst einem Element mit font-family eine Schriftart zuweisen.", - "Wenn du zum Beispiel deinem h2 Element die Schriftart Sans-serif zuweisen willst, kannst du das mit dem folgenden CSS tun:", - "
h2 {
  font-family: Sans-serif;
}
", + "Wenn du zum Beispiel deinem h2 Element die Schriftart Sans-Serif zuweisen willst, kannst du das mit dem folgenden CSS tun:", + "
h2 {
  font-family: Sans-Serif;
}
", + "
", "Definiere für alle p Elemente die Schriftart Monospace." ] }, @@ -496,8 +671,9 @@ "title": "Paramétrer la famille de police d'un élément", "description": [ "Vous pouvez paramétrer la police d'un élément en utilisant la propriété font-family.", - "Par exemple, si vous voulez paramétrer la police de votre élément h2 à Sans-serif, vous devez utiliser le CSS suivant :", - "
h2 {
  font-family: Sans-serif;
}
", + "Par exemple, si vous voulez paramétrer la police de votre élément h2 à Sans-Serif, vous devez utiliser le CSS suivant :", + "
h2 {
  font-family: Sans-Serif;
}
", + "
", "Faites en sorte que tous vos éléments p aient la police Monospace." ] }, @@ -505,10 +681,11 @@ "title": "Defina a Fonte para um Elemento", "description": [ "Você pode estabelecer o estilo de fonte para um elemento ao utilizar a propriedade font-family.", - "Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento h2 como Sans-serif, você poderá utilizar o seguinte código em CSS:", + "Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento h2 como Sans-Serif, você poderá utilizar o seguinte código em CSS:", "h2 {", - "  font-family: Sans-serif;", + "  font-family: Sans-Serif;", "}", + "
", "Faça com que todos os elementos p utilizem o estilo de fonte Monospace." ] }, @@ -516,8 +693,9 @@ "title": "Установите семейство шрифтов для элемента", "description": [ "Вы можете установить семейство шрифтов для элемента используя свойство font-family.", - "Например, если бы вы хотели установить семейство шрифтов Sans-serif для вашего элемента h2, вы бы использовали следующий CSS:", - "
h2 {
  font-family: Sans-serif;
}
", + "Например, если бы вы хотели установить семейство шрифтов Sans-Serif для вашего элемента h2, вы бы использовали следующий CSS:", + "
h2 {
  font-family: Sans-Serif;
}
", + "
", "Присвойте шрифт Monospace всем вашим элементам p." ] } @@ -532,7 +710,8 @@ "Copy the following code snippet and paste it into the top of your code editor:", "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "Remember, before you can apply styles, like a new font, to an element, you'll need to create a CSS rule.", - "
h2 {
font-family: Sans-serif;
}
", + "
h2 {
font-family: Sans-Serif;
}
", + "
", "Create a CSS rule for the font-family of Lobster and apply this new font to your h2 element." ], "challengeSeed": [ @@ -548,9 +727,36 @@ "", "", "

CatPhotoApp

", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'message: Import the Lobster font.');", @@ -568,6 +774,7 @@ "Kopiere den folgenden Code und füge diesen in deinen Editor oben ein:", "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen.", + "
", "Füge dem h2 Element die Schriftart oder font-family Lobster hinzu." ] }, @@ -578,6 +785,7 @@ "Premièrement, vous devrez faire un appel vers Google pour prendre la police Lobster et la charger dans votre HTML.", "Copier l'extrait de code suivant et coller le dans le haut de votre éditeur de code :", "Maintenant vous pouvez paramétrer Lobster comme valeur de police de votre élément h2.", + "
", "Appliquer la valeur Lobster à la font-family de votre élément h2." ] }, @@ -588,6 +796,7 @@ "Primeiro, faça um chamado ao Google Fonts para poder utilizar a fonte chamada Lobster e carregá-la em seu HTML.", "Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:", "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", + "
", "Agora, estableça Lobster como o valor para font-family em seu elemento h2." ] }, @@ -599,6 +808,7 @@ "Скопируйте следующй кусок кода и вставьте его в самый верх вашего редактора кода:", "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "Теперь вы можете установить шрифт Lobster в качестве значения семейства шрифтов для вашего h2.", + "
", "Примените свойство font-family со значением Lobster к вашему элементу h2." ] } @@ -612,6 +822,7 @@ "When one font isn't available, you can tell the browser to \"degrade\" to another font.", "For example, if you wanted an element to use the Helvetica font, but also degrade to the Sans-Serif font when Helvetica wasn't available, you could use this CSS style:", "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "
", "Now comment out your call to Google Fonts, so that the Lobster font isn't available. Notice how it degrades to the Monospace font.", "Note
If you have the Lobster font installed on your computer, you wont see the degradation because your browser is able to find the font." ], @@ -633,9 +844,36 @@ "", "", "

CatPhotoApp

", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'message: Your h2 element should use the font Lobster.');", @@ -652,6 +890,7 @@ "Falls eine Font nicht verfügbar ist kannst du dem Browser sagen was er stattdessen verwenden soll.", "Wenn du zum Beispiel einem Element die Schriftart Helvetica geben möchtest, aber gleichzeitig als Alertnative die Schrift Sans-Serif laden willst, falls Helvetica nicht verfügbar ist, kannst du diesen CSS Style verwenden:", "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "
", "Kommentiere jetzt den Aufruf an Google Fonts aus, sodass Lobster nicht zur Verfügung steht. Beachte, wie nun alternativ die Schriftart Monospace geladen wird." ] }, @@ -662,6 +901,7 @@ "Quand une police n'est pas disponible, vous pouvez demander au navigateur de \"dégrader\" vers une autre police.", "Par exemple, si vous voulez qu'un élément utilise la police Helvetica, mais également dégrader vers Sans-Serif lorsque la police Helvetica n'est pas disponible, vous pouvez utiliser le style CSS suivant :", "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "
", "Maintenant, commenter votre appel vers les polices de Google, pour que la police Lobster ne soit pas disponible. Regardez comment la police se dégrade vers Monospace." ] }, @@ -674,6 +914,7 @@ "p {", "  font-family: Helvetica, Sans-Serif;", "}", + "
", "Agora, comente o seu chamado para a fonte do Google, para que a fonte Lobster não esteja disponível. Note como a fonte degrada para Monospace." ] }, @@ -684,6 +925,7 @@ "Когда один шрифт недоступен, вы можете сообщить браузеру \"деградировать\" до другого шрифта.", "Например, если бы вы хотели, чтобы элемент использовал шрифт Helvetica, но также деградировал до шрифта Sans-Serif, когда Helvetica недоступен, вы могли бы использовать этот CSS-стиль:", "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "
", "Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт Lobster становится недоступен. Обратите внимание как происходит деградация до шрифта Monospace." ] } @@ -696,6 +938,7 @@ "CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.", "For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use:", "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "
", "Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide.", "Note
Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge." ], @@ -717,11 +960,36 @@ "", "", "

CatPhotoApp

", - "", - "\"A", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'message: Your img element should have the class smaller-image.');", @@ -735,6 +1003,7 @@ "Die Breite eines Elements wird mit dem CSS Attribut width kontrolliert. Wie bei Schriftarten verwenden wir Pixel px um die Größe zu definieren.", "Wenn wir also die CSS Klasse larger-image erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir:", "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "
", "Erstelle eine Klasse mit dem Namen smaller-image und verwende sie, um dein Bild auf 100 Pixel zu skalieren.", "Notiz
Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen." ] @@ -745,6 +1014,7 @@ "Le CSS a une propriété nommé width qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons px (pixels) pour déterminer la largeur d'une image.", "Par exemple, si nous voulons créer une classe CSS nommée larger-image qui donnne aux éléments une largeur de 500 pixels, nous utilisons :", "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "
", "Créez une classe nommée smaller-image et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.", "Prenez note
Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi." ] @@ -759,6 +1029,7 @@ "    width: 500px;", "  }", "</style>", + "
", "Crie uma classe chamada smaller-image e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura." ] }, @@ -768,6 +1039,7 @@ "В CSS есть свойтсво, называемое width, которе управляет шириной элемента. По аналогии со шрифтами, мы используем px (пиксели) для указания ширины изображения.", "Например, если бы мы хотели создать CSS-класс larger-image, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:", "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "
", "Создайте класс smaller-image и используйте его для изменения размера изображений до 100 пикселей в ширину.", "Внимание
По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания." ] @@ -781,6 +1053,7 @@ "CSS borders have properties like style, color and width", "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:", "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "
", "Create a class called thick-green-border that puts a 10-pixel-wide green border with a style of solid around an HTML element, and apply that class to your cat photo.", "Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute. For example:", "<img class=\"class1 class2\">" @@ -807,11 +1080,36 @@ "", "", "

CatPhotoApp

", - "", - "\"A", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your img element should have the class smaller-image.');", @@ -828,6 +1126,7 @@ "CSS Rahmen haben Attribute wie style, color und width", "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:", "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "
", "Erstelle die Klasse thick-green-border, welche einen 10 Pixel dicken, grünen Rahmen mit dem Style solid um ein HTML Element setzt. Füge diese Klasse deinem Katzenfoto hinzu.", "Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im class Attribut trennst. Zum Beispiel:", "<img class=\"class1 class2\">" @@ -839,6 +1138,7 @@ "Les bordures CSS ont des propriétés comme style, color et width", "Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :", "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "
", "Créer une classe nommée thick-green-border qui ajoute une bordure verte de 10 pixel avec un style solid autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.", "Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut class de l'élément. Par exemple :", "<img class=\"class1 class2\">" @@ -856,6 +1156,7 @@ "    border-style: solid;", "  }", "</style>", + "
", "Crie uma classe chamada thick-green-border que insira uma borda verde de 10 pixels de largura com um estilo solid ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.", "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo class. Por exemplo:", "<img class=\"clase1 clase2\">" @@ -867,6 +1168,7 @@ "CSS-границы имеют свойства: style, color и width", "Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:", "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "
", "Создайте класс thick-green-border, который добавляет зелёную границу шириной в 10 пикселей со стилем solid вокруг HTML-элемента и примените этот класс к вашему фото кота.", "Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута class. Например:", "<img class=\"class1 class2\">" @@ -879,6 +1181,7 @@ "title": "Add Rounded Corners with a Border Radius", "description": [ "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.", + "
", "You can specify a border-radius with pixels. Give your cat photo a border-radius of 10px.", "Note: this waypoint allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or .smaller-image class." ], @@ -910,11 +1213,36 @@ "", "", "

CatPhotoApp

", - "", - "\"A", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your image element should have the class \"thick-green-border\".');", @@ -927,6 +1255,7 @@ "title": "Füge abgerundete Ecken mit Border Radius hinzu", "description": [ "Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", + "
", "Du kannst einen border-radius mit Pixeln deklarieren. Gib deinem Katzenfoto einen border-radius von 10px.", "Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen border-radius zu der .thick-green-border oder .smaller-image Klasse hinzufügen." ] @@ -935,6 +1264,7 @@ "title": "Agrega esquinas redondeadas usando Border Radius", "description": [ "Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius.", + "
", "Puedes especificar border-radius usando pixeles. Dale a tu foto del gato un border-radius de 10px.", "Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar border-radius ya sea a la clase .thick-green-border o a la clase .smaller-image." ] @@ -943,6 +1273,7 @@ "title": "Insira Bordas Arredondadas com o Border Radius", "description": [ "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado border-radius.", + "
", "Você pode especificar um border-radius com pixels. Adicione um border-radius de 10px para a sua foto.", "Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o border-radius tanto para a classe .thick-green-border como para a classe .smaller-image." ] @@ -951,6 +1282,7 @@ "title": "Добавьте скруглённые углы с помощью радиуса границы", "description": [ "У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство border-radius.", + "
", "Вы можете указать значения border-radius в пикселях. Присвойте вашему фото кота свойство border-radius со значением 10px.", "Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить border-radius как к классу .thick-green-border, так и к классу .smaller-image." ] @@ -962,6 +1294,7 @@ "title": "Make Circular Images with a Border Radius", "description": [ "In addition to pixels, you can also specify a border-radius using a percentage.", + "
", "Give your cat photo a border-radius of 50%." ], "challengeSeed": [ @@ -993,11 +1326,36 @@ "", "", "

CatPhotoApp

", - "", - "\"A", - "", - "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", - "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'message: Your image should have a border radius of 50%, making it perfectly circular.');", @@ -1010,6 +1368,7 @@ "title": "Erstelle runde Bilder mit einem Border Radius", "description": [ "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen.", + "
", "Gib deinem Katzenfoto einen border-radius von 50%." ] }, @@ -1017,6 +1376,7 @@ "title": "Crea imágenes circulares usando Border Radius", "description": [ "Además de pixeles, puedes especificar un border-radius usando porcentajes.", + "
", "Dale a tu foto del gato un border-radius de 50%." ] }, @@ -1024,6 +1384,7 @@ "title": "Deixe as Imagens Circulares com o Border Radius", "description": [ "Assim como pixels, você também pode usar o border-radius com porcentagens.", + "
", "Dê para a sua foto de gato um border-radius de 50%." ] }, @@ -1031,6 +1392,7 @@ "title": "Сделайте круглые изображения с помощью радиуса границы", "description": [ "В дополнение к пикселям, вы также может использовать проценты для указания значения свойства border-radius.", + "
", "Присвойте вашему фото кота свойство border-radius со значением 50%." ] } @@ -1043,6 +1405,7 @@ "You can set an element's background color with the background-color property.", "For example, if you wanted an element's background color to be green, you'd put this within your style element:", "
.green-background {
  background-color: green;
}
", + "
", "Create a class called silver-background with the background-color of silver. Assign this class to your div element." ], "challengeSeed": [ @@ -1074,35 +1437,36 @@ "", "", "

CatPhotoApp

", - "", - "

Click here for cat photos.

", - "", - "\"A", - "", - "
", - "

Things cats love:

", - " ", - "

Top 3 things cats hate:

", - "
    ", - "
  1. flea treatment
    2. ", - "
  2. thunder
    3. ", - "
  3. other cats
    4. ", - "
", - "
", - "", - "
", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - "
" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert($(\"div\").hasClass(\"silver-background\"), 'message: Give your div element the class silver-background.');", @@ -1117,6 +1481,7 @@ "Du kannst die Hintergrundfarbe von einem Element mit dem background-color Attribut setzen", "Wenn du zum Beispiel die Hintergrundfarbe von einem Element green machen willst, schreibe dies in dein style Element:", "
.green-background {
  background-color: green;
}
", + "
", "Erstelle eine Klasse namens silver-background mit der background-color grau (silver). Füge diese Klasse deinem div Element hinzu" ] }, @@ -1126,6 +1491,7 @@ "Puedes fijar el color de fondo de un elemento con la propiedad background-color.", "Por ejemplo, si quieres que el color de fondo de un elemento sea verde (green), dentro de tu elemento style pondrías:", "
.green-background {
  background-color: green;
}
", + "
", "Crea una clase llamada silver-background con la propiedad background-color en gris (silver). Asigna esta clase a tu elemento div ." ] }, @@ -1137,6 +1503,7 @@ ".green-background {", "  background-color: green;", "}", + "
", "Crie uma classe chamada silver-background com a propriedade background-color em cinza (silver). Depois, adicione essa classe ao seu elemento div." ] }, @@ -1146,6 +1513,7 @@ "Вы можете установить цвет фона элемента с помощью свойства background-color.", "Например, если бы вы хотели установить цвет фона элемента зелёным, вы бы использовали следующий стиль внутри вашего элемента style:", "
.green-background {
  background-color: green;
}
", + "
", "Создайте класс silver-background со значением свойства background-color равным silver. Назначьте этот класс вашему элементу div." ] } @@ -1156,10 +1524,11 @@ "title": "Set the ID of an Element", "description": [ "In addition to classes, each HTML element can also have an id attribute.", - "There are several benefits to using id attributes, and you'll learn more about them once you start using jQuery.", + "There are several benefits to using id attributes: You can use an id to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.", "id attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same id attribute.", "Here's an example of how you give your h2 element the id of cat-photo-app:", "<h2 id=\"cat-photo-app\">", + "
", "Give your form element the id cat-photo-form." ], "challengeSeed": [ @@ -1188,41 +1557,43 @@ " .smaller-image {", " width: 100px;", " }", + "", " .silver-background {", " background-color: silver;", " }", "", "", "

CatPhotoApp

", - "", - "

Click here for cat photos.

", - "", - "\"A", - "", - "
", - "

Things cats love:

", - " ", - "

Top 3 things cats hate:

", - "
    ", - "
  1. flea treatment
    2. ", - "
  2. thunder
    3. ", - "
  3. other cats
    4. ", - "
", - "
", - "", - "
", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - "
" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your form element the id of cat-photo-form.');" @@ -1238,6 +1609,7 @@ "id Attribute sollten eindeutig sein. Browser werden das nicht durchsetzen, aber es ist eine weit verbreitete und erprobte Herangehensweise. Also gib bitte nie mehr als einem Element das gleiche id Attribut.", "Hier ist ein Beispiel wie du deinem h2 Element die Id cat-photo-app gibst:", "<h2 id=\"cat-photo-app\">", + "
", "Gib deinem form Element die Id cat-photo-form." ] }, @@ -1249,6 +1621,7 @@ "Los atributos id deben ser únicos. Los navegadores no obligarán esto, pero es ampliamente reconocido como una de las mejores prácticas. Así que por favor no le des a más de un elemento un mismo atributo id. ", "He aquí un ejemplo de cómo le das la identificación cat-photo-app a tu elemento h2:", "<h2 id=\"cat-photo-app\">", + "
", "Dale a tu elemento form la id cat-photo-form." ] }, @@ -1260,6 +1633,7 @@ "Os atributos id devem ser únicos. Os navegadores não o obrigarão a isso, mas isso é amplamente reconhecido como uma boa prática. Assim, não dê um mesmo atributo id a mais de um elemento.", "Veja aqui um exemplo de como dar a id cat-photo-app ao seu elemento code>h2:", "<h2 id=\"cat-photo-app\">", + "
", "Dê ao seu elemento form a id cat-photo-form." ] }, @@ -1271,6 +1645,7 @@ "Атрибутам id следует быть уникальными. Браузеры не принуждают к этому, но широкой общественностью это признано лучшей практикой. Поэтому, пожалуйста, не присваивайте множеству элементов одинаковое значение атрибута id.", "Вот пример того, как вы можете присвоить вашему элементу h2 значение атрибута id равное cat-photo-app:", "<h2 id=\"cat-photo-app\">", + "
", "Присвойте вашему элементу form атрибут id со значением cat-photo-form." ] } @@ -1281,9 +1656,11 @@ "title": "Use an ID Attribute to Style an Element", "description": [ "One cool thing about id attributes is that, like classes, you can style them using CSS.", + "However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.", "Here's an example of how you can take your element with the id attribute of cat-photo-element and give it the background color of green. In your style element:", "
#cat-photo-element {
  background-color: green;
}
", "Note that inside your style element, you always reference classes by putting a . in front of their names. You always reference ids by putting a # in front of their names.", + "
", "Try giving your form, which now has the id attribute of cat-photo-form, a green background." ], "challengeSeed": [ @@ -1319,35 +1696,36 @@ "", "", "

CatPhotoApp

", - "", - "

Click here for cat photos.

", - "", - "\"A", - "", - "
", - "

Things cats love:

", - " ", - "

Top 3 things cats hate:

", - "
    ", - "
  1. flea treatment
    2. ", - "
  2. thunder
    3. ", - "
  3. other cats
    4. ", - "
", - "
", - "", - "
", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - "
" + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + " ", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
    2. ", + "
  2. thunder
    3. ", + "
  3. other cats
    4. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" ], "tests": [ "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your form element the id of cat-photo-form.');", @@ -1365,6 +1743,7 @@ "Hier ist ein Beispiel wie du einem Element mit dem id Attribut cat-photo-element eine grüne Hintergrundfarbe geben kannst. In deinem style Element:", "
#cat-photo-element {
  background-color: green;
}
", "Beachte, dass du in deinem style Element Klassen immer mit einem . vor deren Namen ansprichst. Ids sprichst du immer mit # vor deren Namen an.", + "
", "Versuche deinem Formular, das jetzt das id Attribut cat-photo-form hat, einen grünen Hintergrund zu geben." ] }, @@ -1375,6 +1754,7 @@ "He aquí un ejemplo de cómo puedes tomar tu elemento con atributo id de cat-photo-element y ponerle el color de fondo verde. En tu elemento style: ", "
#cat-photo-element {
  background-color: green;
}
", "Ten en cuenta que dentro de tu elemento style, siempre referencias clases poniendo un . en frente de sus nombres. Y siempre referencias identificaciones poniendo un # frente a sus nombres. ", + "
", "Trata de darle a tu formulario, que ahora tiene el atributo id en cat-photo-form, un fondo verde." ] }, @@ -1387,6 +1767,7 @@ "  background-color: green;", "}", "Note que dentro de seu elemento style, você deve sempre referenciar uma classe colocando um . logo antes de seu nome. Já com uma id, você deve referenciar colocando um # antes de seu nome.", + "
", "Dê ao seu formulário, que agora possui o atributo code>id em cat-photo-form, um fundo verde." ] }, @@ -1397,6 +1778,7 @@ "Вот пример того как вы можете присвоить вашему элементу со значением атрибута id равным cat-photo-element зелёный цвет фона. В вашем элементе style:", "
#cat-photo-element {
  background-color: green;
}
", "Обратите внимание, что внутри вашего элемента style вы ссылаетесь на классы используя . перед их именами. При этом вы всегда ссылаетесь на идентификаторы вставляя # перед их именами.", + "
", "Попробуйте установить для своей формы, которая теперь имеет атрибут id равный cat-photo-form, зелёный в качестве цвета фона." ] } @@ -1412,6 +1794,7 @@ "An element's padding controls the amount of space between the element's content and its border.", "Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more padding than the green box.", "When you increase the green box's padding, it will increase the distance between the text padding and the border around it.", + "
", "Change the padding of your green box to match that of your red box." ], "challengeSeed": [ @@ -1464,6 +1847,7 @@ "Drei wichtige CSS-Eigenschaften beeinflussen den Platz den jedes HTML Element umgibt: padding, margin und border.", "padding kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – border", "Wir sehen in diesem Beispiel, dass sich die grüne Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr padding hat als die grüne Box.", + "
", "Ändere das padding der grünen Box um es an die rote Box anzugleichen." ] }, @@ -1476,6 +1860,7 @@ "El relleno (padding) de un elemento controla la cantidad de espacio entre el elemento y su borde (border).", "Aquí, podemos ver que el cuadro verde y el cuadro rojo se anidan dentro del cuadro amarillo. Ten en cuenta que el cuadro rojo tiene más relleno (padding) que el cuadro verde. ", "Cuando aumentes el relleno de la caja verde, aumentará la distancia entre el texto padding y el borde alrededor de este.", + "
", "Cambia el relleno (padding) de la caja verde para que coincida con el de tu cuadro rojo." ] }, @@ -1488,6 +1873,7 @@ "O preenchimento (padding) de um elemento controla a quantidade de espaço entre o elemento e sua borda (border).", "Aqui, podemos ver que o quadro verde e o quadro vermelho se aninham dentro do quadro amarelo. Leve em conta que o quadro vermelho tem mais preenchimento (padding) que o quadro verde.", "Quando você aumenta o preenchimento da caixa verde, a distância entre o texto padding e a borda ao seu redor também será maior.", + "
", "Mude o preenchimento (padding) da caixa verde para que coincida com a de seu quadrado vermelho." ] }, @@ -1500,6 +1886,7 @@ "Свойство элемента padding управляет размером пространства между элементом и его границей border.", "Тут мы можем видеть, что зелёный и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ содержимого padding, чем зелёный прямоугольник.", "Когда вы увеличиваете padding зелёного прямоугольника, увеличивается расстояние между границей содержимого и границей самого элемента border.", + "
", "Измените значение свойства padding вашего зелёного прямоугольника, чтобы он был равен соответствующему значению красного прямоугольника." ] } @@ -1512,6 +1899,7 @@ "An element's margin controls the amount of space between an element's border and surrounding elements.", "Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more margin than the green box, making it appear smaller.", "When you increase the green box's margin, it will increase the distance between its border and surrounding elements.", + "
", "Change the margin of the green box to match that of the red box." ], "challengeSeed": [ @@ -1564,6 +1952,7 @@ "margin kontrolliert den Abstand zwischen dem Rahmen - border - eines Elements und den benachbarten Elementen.", "In diesem Beispiel sehen wir die grüne und die rote Box die sich beide innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr margin aufweist als die grüne Box, wodurch sie kleiner wirkt.", "Wenn du den Außenabstand – margin – der grünen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern.", + "
", "Gleiche den Außenabstand – margin der grünen Box dem der roten Box an." ] }, @@ -1573,6 +1962,7 @@ "El margen (margin) de un elemento controla la cantidad de espacio entre el borde (border) y los elementos alrededor.", "Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Ten en cuenta que la caja roja tiene más margen (margin) que la caja verde, haciendo que parezca más pequeña. ", "Cuando aumentes el margen (margin) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.", + "
", "Cambia el margen (margin) de la caja verde para que coincida con el de la caja roja." ] }, @@ -1582,6 +1972,7 @@ "A margem (margin) de um elemento controla a quantidade de espaço entre a borda (border) e os elementos ao seu redor.", "Aqui, podemos ver que a caixa verde e a caixa vermelha se aninham dentro da caixa amarela. Note que a caixa vermelha possui a margem maior que a caixa verde, fazendo com que ela pareça menor.", "Quando você aumenta a margem (margin) da caixa verde, a distância entre a borda e os elementos ao seu redor também aumentará.", + "
", "Mude a margem (margin) da caixa verde para que coincida com a margem da caixa vermelha." ] }, @@ -1591,6 +1982,7 @@ "Значение свойства margin контролирует размер отступа между границей border элемента и его окружением.", "Тут мы можем видеть, что зелёный прямоугольник и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ margin, чем зелёный прямоугольник, что делает его визуально меньше.", "Когда вы увеличиваете отступ margin зелёного прямоугольника, увеличивается расстояние между его границей и окружающими элементами.", + "
", "Измените значение отступа margin зелёного прямоугольника так, чтобы оно равнялось соответствующему значению красного прямоугольника." ] } @@ -1602,6 +1994,7 @@ "description": [ "An element's margin controls the amount of space between an element's border and surrounding elements.", "If you set an element's margin to a negative value, the element will grow larger.", + "
", "Try to set the margin to a negative value like the one for the red box.", "Change the margin of the green box to -15px, so it fills the entire horizontal width of the yellow box around it." ], @@ -1653,6 +2046,7 @@ "description": [ "margin kontrolliert den Abstand zwischen dem Rahmen - border - eines Elements und den benachbarten Elementen.", "Wenn du dem Außenabstand - margin - eines Elements einen negativen Wert zuweist, wird das Element größer.", + "
", "Versuche den Außenabstand - margin - auf einen negativen Wert, wie bei der roten Box, zu setzen.", "Ändere den Außenabstand – margin – der grünen Box auf -15px, damit sie die gelbe Box horizontal ausfüllt." ] @@ -1662,6 +2056,7 @@ "description": [ "El margen de un elemento controla la cantidad de espacio entre el borde del elemento y los elementos que lo rodean.", "Si estableces el margen de un elemento en un valor negativo, el elemento se hará más grande.", + "
", "Trata de establecer el margen (margin) a un valor negativo como el de la caja roja.", "Cambia el margen (margin) de la caja verde a -15px, de forma que ocupe todo el ancho horizontal de la caja amarilla que lo rodea." ] @@ -1671,6 +2066,7 @@ "description": [ "A margem de um elemento controla a quantidade de espaço entre a borda do elemento e os elementos ao seu redor.", "Se você estabelece a margem de um elemento com um valor negativo, o elemento ficará maior.", + "
", "Tente estabelecer a margem (margin) a um valor negativo como o da caixa vermelha.", "Mude a margem (margin) da caixa verde para -15px, de forma que ocupe toda a largura horizontal da caixa amarela que a rodeia." ] @@ -1680,6 +2076,7 @@ "description": [ "Значение свойства margin контролирует размер отступа между границей border элемента и его окружением.", "Если вы установите значение свойства margin элемента отрицательным, то элемент будет становиться больше.", + "
", "Попробуйте установить значение свойства margin зелёного прямоугольника отрицательным, по аналогии с красным прямоугольником.", "Измените значение свойства margin зелёного прямоугольника на -15px, таким образом он занимает всю ширину окружающего жёлтого прямоугольника." ] @@ -1692,6 +2089,7 @@ "description": [ "Sometimes you will want to customize an element so that it has different padding on each of its sides.", "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left properties.", + "
", "Give the green box a padding of 40px on its top and left side, but only 20px on its bottom and right side." ], "challengeSeed": [ @@ -1746,6 +2144,7 @@ "description": [ "Manchmal wirst du einem Element auf jeder Seite unterschiedliche Innenabstände – also padding – geben wollen.", "CSS erlaubt dir den Innenabstand - padding - eines Elements auf allen Seiten einzeln mit den Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu steuern.", + "
", "Verleihe der grünen Box einen Innenabstand – padding – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." ] }, @@ -1754,6 +2153,7 @@ "description": [ "A veces querrás personalizar un elemento para que tenga diferente relleno (padding) en cada uno de sus lados.", "CSS te permite controlar el relleno (padding) de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades padding-top, padding-right, padding-bottom y padding-left. ", + "
", "Da a la caja verde un relleno (padding) de 40px en las partes superior e izquierda, pero sólo 20px en sus partes inferior y derecha." ] }, @@ -1762,6 +2162,7 @@ "description": [ "As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (padding) diferente em cada um de seus lados.", "O CSS permite controlar o preenchimento (padding) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades padding-top, padding-right, padding-bottom e padding-left.", + "
", "Dê para a caixa verde um preenchimento (padding) de 40px nas partes superior e esquerda, e de apenas 20px em suas partes inferior e direita." ] }, @@ -1770,6 +2171,7 @@ "description": [ "Иногда вам может потребоваться изменить элемент таким образом, чтобы отступ содержимого padding с каждой из сторон был разным.", "CSS позволяет вам контролировать значение свойства padding элемента со всех сторон с помощью свойств: padding-top, padding-right, padding-bottom, padding-left.", + "
", "Присвойте зелёному прямоугольнику padding равный 40px сверху и слева, но только 20px снизу и справа." ] } @@ -1781,6 +2183,7 @@ "description": [ "Sometimes you will want to customize an element so that it has a different margin on each of its sides.", "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left properties.", + "
", "Give the green box a margin of 40px on its top and left side, but only 20px on its bottom and right side." ], "challengeSeed": [ @@ -1835,6 +2238,7 @@ "description": [ "Manchmal wirst du einem Element auf jeder Seite einen unterschiedlichen Außenabstand - margin - geben wollen.", "CSS erlaubt dir ebenfalls den Außenabstand - margin - eines Elements auf jeder Seite einzeln mit den Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu steuern.", + "
", "Gib der grünen Box einen Außenabstand – margin – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." ] }, @@ -1843,6 +2247,7 @@ "description": [ "A veces querrás personalizar un elemento para que tenga un margen (margin) diferente en cada uno de sus lados.", "CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades margin-top, margin-right, margin-bottom y margin-left. ", + "
", "Da a la caja verde un margen (margin) de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho." ] }, @@ -1851,6 +2256,7 @@ "description": [ "Talvez você queira personalizar um elemento para que possua uma margem (margin) diferente em cada um de seus lados.", "O CSS permite controlar a margem de um elemento em todos os seus quatro lados: superior, direito, inferior e esquerdo, com as propriedades margin-top, margin-right, margin-bottom e margin-left.", + "
", "Dê para a caixa verde uma margem (margin) de 40px nas partes superior e esquerda, e de apenas 20px nas partes inferior e direita." ] }, @@ -1859,6 +2265,7 @@ "description": [ "Иногда вам может потребоваться изменить элемент, установив разный отступ margin с каждой из его сторон.", "CSS позволяет вам контролировать отступ margin элемента с каждой из его сторон с помощью свойств: margin-top, margin-right, margin-bottom, margin-left.", + "
", "Присвойте красному прямоугольнику значение margin равное 40px сверху и слева, но только 20px снизу и справа." ] } @@ -1871,6 +2278,7 @@ "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left properties, you can specify them all in one line, like this:", "padding: 10px 20px 10px 20px;", "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.", + "
", "Use Clockwise Notation to give the \".green-box\" class a padding of 40px on its top and left side, but only 20px on its bottom and right side." ], "challengeSeed": [ @@ -1923,6 +2331,7 @@ "Anstatt die Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu verwenden, kannst du sie alle in einer Zeile schreiben:", "padding: 10px 20px 10px 20px;", "Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt dasselbe wie die seitenspezifischen Anweisungen.", + "
", "Gib der Klasse \".green-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – padding – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." ] }, @@ -1932,6 +2341,7 @@ "En lugar de especificar las propiedades padding-top, padding-right, padding-bottom y padding-left de un elemento, puedes especificar todas en una sóla línea, así: ", "padding: 10px 20px 10px 20px;", "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.", + "
", "Usa la notación en sentido horario para dar a la clase \".green-box\" un relleno de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." ] }, @@ -1941,6 +2351,7 @@ "Ao invés de especificar as propriedades padding-top, padding-right, padding-bottom e padding-left de um elemento, você pode especificar todas elas em uma só linha, assim:", "padding: 10px 20px 10px 20px;", "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de preenchimento.", + "
", "Use a notação em sentido horário para dar para a classe \".green-box\" um preenchimento de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." ] }, @@ -1950,6 +2361,7 @@ "Вместо указания свойств элемента: padding-top, padding-right, padding-bottom, padding-left, вы можете указать их в строку, например:", "padding: 10px 20px 10px 20px;", "Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.", + "
", "Используйте систему ссылок по часовой стрелке для установки для класса \".green-box\" значения отступа содержимого padding равное 40px сверху и слева, но только 20px снизу и справа." ] } @@ -1963,6 +2375,7 @@ "Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left properties, you can specify them all in one line, like this:", "margin: 10px 20px 10px 20px;", "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.", + "
", "Use Clockwise Notation to give the element with the green-box class a margin of 40px on its top and left side, but only 20px on its bottom and right side." ], "challengeSeed": [ @@ -2016,6 +2429,7 @@ "Anstatt die Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu verwenden, kannst du alle in eine Zeile schreiben:", "margin: 10px 20px 10px 20px;", "Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt das Gleiche wie die seitenspezifischen Anweisungen.", + "
", "Nutze die Notation im Uhrzeigersinn – auch Clockwise Notation genannt – um dem Element mit der Klasse green-box 40px Außenabstand auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite zu verleihen." ] }, @@ -2026,6 +2440,7 @@ "En lugar de especificar las propiedades margin-top, margin-right, margin-bottom, y margin-left de un elemento, puedes especificarlas en una sóla línea así: ", "margin: 10px 20px 10px 20px;", "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.", + "
", "Usa notación en sentido horario para dar al elemento con la clase green-box un margen de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." ] }, @@ -2036,6 +2451,7 @@ "Ao invés de especificar as propriedades margin-top, margin-right, margin-bottom, e margin-left de um elemento, você pode especificar todas elas em apenas uma linha assim:", "margin: 10px 20px 10px 20px;", "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.", + "
", "Use a notação em sentido horário para dar para a classe \".green-box\" uma margem de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." ] }, @@ -2046,6 +2462,7 @@ "Вмето указания свойств элемента: margin-top, margin-right, margin-bottom, margin-left, вы можете указать их в строку, например:", "margin: 10px 20px 10px 20px;", "Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.", + "
", "Используйте систему ссылок по часовой стрелке для установки для класса green-box значения отступа margin равное 40px сверху и слева, но только 20px снизу и справа." ] } @@ -2058,7 +2475,7 @@ "The last several challenges all set an element's margin or padding with pixels (px). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to px, CSS has a number of different length unit options that you can use.", "The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.", "Relative units, such as em or rem, are relative to another length value. For example, em is based on the size of an element's font. If you use it to set the font-size property itself, it's relative to the parent's font-size.", - "Note
There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design section.", + "Note
There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section.", "
", "Add a padding property to the element with class red-box and set it to 1.5em." ], @@ -2113,6 +2530,7 @@ "description": [ "Now let's start fresh and talk about CSS inheritance.", "Every HTML page has a body element.", + "
", "We can prove that the body element exists here by giving it a background-color of black.", "We can do this by adding the following to our style element:", "
body {
  background-color: black;
}
" @@ -2135,6 +2553,7 @@ "description": [ "Lass uns jetzt frisch beginnen und über CSS Vererbung reden.", "Jede HTML Seite hat ein body Element.", + "
", "Wir können sehen dass es das body Element gibt wenn wir ihm eine schwarze (black) background-color geben", "Das bewerkstelligen wir indem wir folgendes unserem style Element hinzufügen:", "
body {
  background-color: black;
}
" @@ -2145,6 +2564,7 @@ "description": [ "Ahora vamos a empezar de nuevo y hablaremos de herencia CSS.", "Cada página HTML tiene un cuerpo (body).", + "
", "Podemos demostrar que el elemento (body) existe aquí, dandole un color de fondo (background-color) negro.", "Podemos hacer esto añadiendo lo siguiente a nuestro elemento style:", "
body {
  background-color: black;
}
" @@ -2155,6 +2575,7 @@ "description": [ "Agora vamos recomeçar e falar sobre herança em CSS.", "Cada página HTML possui um corpo (body).", + "
", "Podemos demonstrar que o elemento (body) existe aqui, ao dar a ele uma cor de fundo (background-color) preta.", "Podemos fazer isso adicionando o seguinte ao nosso elemento style:", "body {", @@ -2167,6 +2588,7 @@ "description": [ "Теперь давайте начнём с нуля и поговорим о наследовании в CSS.", "Каждая HTML-страница имеет элемент body.", + "
", "Мы можем доказать существование элемента body тут, присвоив его свойству background-color значение black.", "Мы можем это сделать добавлением следующего к нашему элементу style:", "
body {
  background-color: black;
}
" @@ -2180,6 +2602,7 @@ "description": [ "Now we've proven that every HTML page has a body element, and that its body element can also be styled with CSS.", "Remember, you can style your body element just like any other HTML element, and all your other elements will inherit your body element's styles.", + "
", "First, create a h1 element with the text Hello World", "Then, let's give all elements on your page the color of green by adding color: green; to your body element's style declaration.", "Finally, give your body element the font-family of Monospace by adding font-family: Monospace; to your body element's style declaration." @@ -2209,6 +2632,7 @@ "description": [ "Jetzt haben wir bewiesen dass jede HTML Seite ein body Element besitzt und dass dieses body Element ebenfalls mit CSS gestylt werden kann.", "Vergiss nicht, dass du dein body Element wie jedes andere HTML Element stylen kannst und dass alle anderen Elemente von deinem body Element Styles erben werden.", + "
", "Erstelle zuerst ein h1 Element mit dem Text Hello World", "Dann gib allen Elementen auf deiner Seite die Farbe green indem du color:green; deinen body Element Styles hinzufügst.", "Gib deinem body Element abschließend die Schriftart Monospace indem du font-family: Monospace; deinen body Element Styles hinzufügst." @@ -2219,6 +2643,7 @@ "description": [ "Ya hemos demostrado que cada página HTML tiene un cuerpo (body), y que puede dársele estilo CSS.", "Recuerda que puedes dar estilo de tu elemento body como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento body.", + "
", "En primer lugar, crea un elemento h1 con el texto Hello World", "Después, vamos a darle a todos los elementos de tu página el color verde (green) añadiendo color: green; a la declaración de estilo de tu elemento body.", "Por último, da a tu elemento body el tipo de letra Monospace añadiendo font-family: Monospace; a la declaración del estilo de tu elemento body." @@ -2229,6 +2654,7 @@ "description": [ "Já demonstramos que cada página HTML possui um corpo (body), e que podemos dar estilo a ele através do CSS.", "Observe que você pode dar estilo ao seu elemento body como a qualquer outro elemento HTML, e que todos os outros elementos herdarão os estilos de seu elemento body.", + "
", "Em primeiro lugar, crie um elemento h1 com o texto Hello World", "Depois, dê a todos os elementos de sua página uma cor verde (green) adicionando color: green; na declaração de estilo de seu elemento body.", "Por último, dê ao seu elemento body o tipo de fonte Monospace adicionando font-family: Monospace; na declaração de estilo de seu elemento body." @@ -2239,6 +2665,7 @@ "description": [ "Мы доказали наличие у каждой HTML-страницы элемента body и то, что этот элемент body можно стилизовать с помощью CSS.", "Не забывайте, что вы можете стилизовать ваш элемент body так же как и любой другой HTML-элемент, а все остальные элементы унаследуют стили элемента body.", + "
", "Для начала, создайте элемент h1 с текстом Hello World", "Затем присвойте всем элементам на вашей странице зелёный цвет путём добавления color: green; к свойствам, указанным в объявлении стилей для элемента body.", "В завершении, присвойте вашему элементу body свойство семейства шрифтов равное Monospace путём добавления font-family: Monospace; к свойствам, указанным в объявлении стилей для элемента body." @@ -2253,6 +2680,7 @@ "Sometimes your HTML elements will receive multiple styles that conflict with one another.", "For example, your h1 element can't be both green and pink at the same time.", "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS property?", + "
", "Create a CSS class called pink-text that gives an element the color pink.", "Give your h1 element the class of pink-text." ], @@ -2279,6 +2707,7 @@ "description": [ "Manchmal werden deine HTML Elemente mehrere Styles erhalten die sich gegenseitig widersprechen.", "Zum Beispiel könnte dein h1 Element nicht gleichzeitig grün und pink sein.", + "
", "Schauen wir uns an was passiert wenn wir eine Klasse erstellen die Text pink macht und dann einem Element hinzufügen. Wird unsere Klasse die color:green; Eigenschaft unseres body Elements überschreiben - override - ?" ] }, @@ -2288,6 +2717,7 @@ "A veces los elementos HTML recibirán múltiples estilos que entran en conflicto entre sí.", "Por ejemplo, el elemento h1 no puede ser verde y rosa al mismo tiempo.", "Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (override) nuestra clase la propiedad CSS color: green del elemento body?", + "
", "Crea una clase CSS llamada pink-text que le da a un elemento el color rosado.", "Ponle a tu elemento h1 la clase de pink-text." ] @@ -2298,6 +2728,7 @@ "As vezes os elementos HTML recebem múltiplos estilos que entram em conflito entre si.", "Por exemplo, o elemento h1 não pode ser verde e rosa ao mesmo tempo.", "Vamos ver o que acontece quando criamos uma classe que faz com que o texto seja rosa e então o aplicamos a um elemento. Isso irá sobrepor (override) a propriedade CSS color: green do elemento body de nossa classe?", + "
", "Crie uma classe CSS chamada pink-text, que dê a cor rosa a um elemento.", "Depois, adicione a classe pink-text ao seu elemento h1." ] @@ -2308,6 +2739,7 @@ "Иногда вашим HTML-элементам будут присвоены множественные стили, конфликтующие друг с другом.", "Например, ваш элемент h1 не может быть одновременно зелёным и розовым.", "Давайте посмотрим, что произойдёт, когда мы создадим класс, который делает текст розовым, затем присвоим его элементу. Переопределит ли наш класс значение CSS-свойства элемента body равное color: green;?", + "
", "Создайте CSS-класс pink-text, который назначает элементу розовый в качестве цвета.", "Назначьте вашему элементу h1 класс pink-text." ] @@ -2320,6 +2752,7 @@ "description": [ "Our \"pink-text\" class overrode our body element's CSS declaration!", "We just proved that our classes will override the body element's CSS. So the next logical question is, what can we do to override our pink-text class?", + "
", "Create an additional CSS class called blue-text that gives an element the color blue. Make sure it's below your pink-text class declaration.", "Apply the blue-text class to your h1 element in addition to your pink-text class, and let's see which one wins.", "Applying multiple class attributes to a HTML element is done with a space between them like this:", @@ -2354,6 +2787,7 @@ "description": [ "Unsere \"pink-text\" Klasse hat unsere CSS Angaben des body Elements überschrieben!", "Wir haben gerade bewiesen, dass unsere Klassen das CSS des body Elements überschreiben. Die logische nächste Frage ist also was wir tun können um unsere pink-text Klasse zu überschreiben?", + "
", "Erstelle eine weitere CSS Klasse namens blue-text, die deinem Element eine blaue Farbe gibt. Stelle sicher dass sie unter deiner pink-text Klassen-Deklaration steht.", "Füge die blue-text Klasse deinem h1 Element zusätzlich zur pink-text Klasse hinzu und schau welche gewinnt.", "Einem HTML Element mehrere Klassen Attribute zu geben funktioniert mit einem Leerzeichen dazwischen:", @@ -2367,6 +2801,7 @@ "description": [ "¡Nuestra clase \"pink-text\" anuló la declaración CSS de nuestro elemento body!", "Acabamos de demostrar que nuestras clases anularán el CSS del elemento body. Así que la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase pink-text?", + "
", "Crea una clase CSS adicional llamada texto-azul que le de a un elemento el color azul. Asegúrate de que está debajo de tu declaración de la clase pink-text. ", "Aplica la clase blue-text a tu elemento h1 además de tu clase pink-text y veamos cuál gana.", "La aplicación de múltiples atributos de clase a un elemento HTML se hace usando espacios entre ellos así:", @@ -2380,6 +2815,7 @@ "description": [ "Nossa classe \"pink-text\" anulou a declaração CSS de nosso elemento body!", "Acabamos de demonstrar que nossas classes irão sobrepor o CSS do elemento body. Sendo assim, nossa seguinte pergunta lógica é: O que podemos fazer para sobrepor a nossa classe pink-text?", + "
", "Crie uma classe tradicional com CSS chamada texto-azul, que possa dar a um elemento a cor azul. Tenha a certeza de deixá-la abaixo de sua declaração da classe pink-text.", "Aplique a classe blue-text ao seu elemento h1, além da classe pink-text, e vamos ver qual delas ganhará.", "Lembre que a adição de vários atributos de classe a um elemento HTML se faz utilizando espaços entre ambos, assim:", @@ -2393,6 +2829,7 @@ "description": [ "Наш класс \"pink-text\" переопределил объявленное CSS-свойство элемента body!", "Мы только что доказали, что наши классы переопределяют CSS-свойства, обявленные в элементе body. Следующим вопросом по логике дожно быть: можем ли мы переопределить наш класс pink-text class?", + "
", "Создайте дополнительный CSS-класс blue-text, который присваивает элементу синий цвет. Убедитесь, что он расположен ниже объявления вашего класса pink-text.", "Примените класс blue-text к вашему элементу h1 в дополнение к вашему классу pink-text, и давайте посмотрим какой выиграет.", "Применение множественных классов к атрибуту class HTML-элемента осуществляется через пробел:", @@ -2410,6 +2847,7 @@ "We just proved that browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last.", "But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?", "Let's override your pink-text and blue-text classes, and make your h1 element orange, by giving the h1 element an id and then styling that id.", + "
", "Give your h1 element the id attribute of orange-text. Remember, id styles look like this:", "<h1 id=\"orange-text\">", "Leave the blue-text and pink-text classes on your h1 element.", @@ -2451,6 +2889,7 @@ "Wir haben gerade bewiesen, dass der Browser CSS von oben nach unten liest. Das bedeuted, dass im Falle eines Konflikts der Browser immer die letzte CSS Deklaration verwenden wird.", "Aber damit sind wir noch nicht fertig. Es gibt andere Wege um CSS zu überschreiben. Erinnerst du dich an Id Attribute?", "Überschreiben wir jetzt unsere pink-text und blue-text Klasse und machen unser h1 Element orange, indem wir dem h1 Element eine Id geben und diese dann stylen.", + "
", "Gib deinem h1 Element das id Attribute orange-text. Vergiss nicht, Id Styles sehen so aus:", "<h1 id=\"orange-text\">", "Erstelle eine CSS Deklaration für deine orange-text Id in deinem style Element. Hier siehst du ein Beispiel wie sowas aussieht:", @@ -2464,6 +2903,7 @@ "Acabamos de demostrar que los navegadores leen CSS de arriba hacia abajo. Eso significa que, en el caso de un conflicto, el navegador utilizará la última declaración CSS. ", "Pero no hemos terminado todavía. Hay otras maneras con las que puedes anular CSS. ¿Te acuerdas de los atributos id?", "Anulemos tus clases pink-text y blue-text, y pongamos anaranjado tu elemento h1, dándole una identificación al elemento h1 y poniéndole estilo a esa identificación (id).", + "
", "Dale a tu elemento h1 el atributo id con valor orange-text. Recuerda, los atributos id se ven así: ", "<h1 id=\"orange-text\">", "Deja las clases blue-text y pink-text de tu elemento h1.", @@ -2478,6 +2918,7 @@ "Acabamos de demonstrar que os navegadores fazem a leitura do CSS de cima para baixo. Isso significa que, em caso de um conflito, o navegador utilizará a última declaração CSS.", "Mas ainda não terminamos, pois existem outras formas para sobrepor CSS. Você se lembra dos atributos id?", "Vamos sobrepor suas classes pink-text e blue-text, e fazer com que seu elemento h1 seja laranja. Faremos isso aplicando uma id para o elemento h1 e então estilizando essa id.", + "
", "Dê ao seu elemento h1 o atributo id de nome orange-text. Relembre que os atributos id são assim:", "#brown-text {", "  color: brown;", @@ -2491,6 +2932,7 @@ "Мы только что доказали, что браузеры читают CSS сверху-вниз. Это значит, что в случае конфликта значений будет установлено то, которое было объявлено в последнюю очередь.", "Но мы ещё не закончилил. Есть и другие способы переопределения CSS. Помните атрибуты id?", "Давайте переопределим ваши классы pink-text и blue-text, и сделаем ваш элемент h1 оранжевым, назначив элементу h1 зна��ение атрибута id и его последующей стилизацией.", + "
", "Назначьте вашему элементу h1 значение атрибута id равное orange-text. Помните, что стилизация атрибута id выглядит так:", "<h1 id=\"orange-text\">", "Оставьте классы blue-text и pink-text присвоенными вашему элементу h1.", @@ -2507,6 +2949,7 @@ "description": [ "So we've proven that id declarations override class declarations, regardless of where they are declared in your style element CSS.", "There are other ways that you can override CSS. Do you remember inline styles?", + "
", "Use an inline style to try to make our h1 element white. Remember, in line styles look like this:", "<h1 style=\"color: green\">", "Leave the blue-text and pink-text classes on your h1 element." @@ -2545,6 +2988,7 @@ "description": [ "Wir haben also gesehen dass Id Deklarationen die von Klassen überschreiben, egal wo sie in deinem style Element CSS stehen.", "Es gibt noch andere Wege CSS zu überschreiben. Erinnerst du dich an Inline Styles?", + "
", "Benutze inline style um dein h1 Element weiß zu machen. Vergiss nicht, Inline Styles sehen so aus:", "<h1 style=\"color: green\">", "Lasse die blue-text und pink-text Klassen auf deinem h1 Element." @@ -2555,6 +2999,7 @@ "description": [ "Así que hemos demostrado que las declaraciones de identificadores anulan las declaraciones de clase, independientemente del lugar donde se declaran en tu elemento de estilo CSS style.", "Hay otras maneras en las que puedes anular CSS. ¿Te acuerdas de los estilos en línea?", + "
", "Utiliza un estilo en línea para tratar de hacer blanco nuestro elemento h1. Recuerda, los estilos en línea se ven así: ", "<h1 style=\"color: green\">", "Deja las clases blue-text y pink-text en tu elemento h1." @@ -2565,6 +3010,7 @@ "description": [ "Certo, nós demonstramos que declarações de id sobrepoem as declarações de classe, independente do lugar onde são declarados em seu elemento style no CSS.", "Existem outras formas em que você pode sobrepor CSS. Você se lembra de estilos inline?", + "
", "Use um estilo inline para tentar fazer com que nosso elemento h1 tenha a cor branca. Relembre que estilos inline são assim:", "<h1 style=\"color: green\">", "Deixe as classes blue-text e pink-text em seu elemento h1." @@ -2575,6 +3021,7 @@ "description": [ "Итак, мы доказали, что объявление атрибута id переопределяет значения свойств, определённые в значениях атрибута class, независимо от того, были ли они объявлены в вашем элементе style.", "Есть и другие способы переопределения CSS. Помните встроенные стили?", + "
", "Используйте встроенный стиль, чтобы попробовать сделать наш элемент h1 белым. Помните, что встроенные стили выглядят следующим образом:", "<h1 style=\"color: green\">", "Оставьте классы blue-text и pink-text назначенными вашему элементу h1." @@ -2590,6 +3037,7 @@ "But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.", "In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important", "Let's go all the way back to our pink-text class declaration. Remember that our pink-text class was overridden by subsequent class declarations, id declarations, and inline styles.", + "
", "Let's add the keyword !important to your pink-text element's color declaration to make 100% sure that your h1 element will be pink.", "An example of how to do this is:", "color: red !important;" @@ -2631,6 +3079,7 @@ "Aber warte. Es gibt eine letzte Art CSS zu überschreiben. Dabei handelt es sich um die mächtigste Methode von allen. Aber bevor wir dazu kommen, sehen wir uns an warum du überhaupt CSS überschreiben wollen würdest.", "In vielen Situationen wirst du sogenannte \"CSS libraries\" (CSS Bibliotheken) verwenden. Diese könnten versehentlich dein eigenes CSS überschreiben. Wenn du also absolut sicher sein musst dass ein Element einen bestimmten Style hat, kannst du !important verwenden.", "Gehen wir zurück zu unserer pink-text Klassendeklaration. Wie du dich vielleicht erinnerst wurde unsere pink-text Klasse von darauffolgenden Klassen, Ids und Inline Styles überschrieben.", + "
", "Füge das Schlüsselwort !important zu der Farbe deines \"pink-text\" Elements hinzu um 100% sicher zu gehen dass das h1 Element pink ist.", "Hier ist ein Beispiel wie man das macht:", "color: red !important;" @@ -2643,6 +3092,7 @@ "¡Pero espera! Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, vamos a hablar de por qué puedes querer anular CSS. ", "En muchas situaciones, usarás bibliotecas CSS. Estas pueden anular accidentalmente tu propio CSS. Por eso, cuando necesitas estar seguro de que un elemento tiene un CSS específico puedes usar !important", "Regresemos a nuestra declaración de clase pink-text. Recuerda que nuestra clase pink-text fue anulada por declaraciones de clases posteriores, declaraciones id, y estilos en línea. ", + "
", "Vamos a añadir la palabra clave !important a tu declaración del color de pink-text para estar 100% seguros que tu elemento h1 será rosado.", "Un ejemplo de cómo hacer esto es:", "color: red !important;" @@ -2655,6 +3105,7 @@ "Mas, espere! Há uma última forma de sobrepor com CSS. Este é o método mais poderoso de todos. Contudo, antes de colocá-lo em prática, vamos falar sobre os motivos que podem fazer você querer sobrepor CSS.", "Em diversas situações, você usará bibliotecas CSS. Pode ser que essas bibliotecas sobreponham acidentalmente o seu próprio CSS. Por isso, quando você precisar estar seguro de que um elemento possui um CSS específico, você poderá utilizar !important.", "Certo, vamos voltar para a nossa declaração de classe pink-text. Relembre que nossa classe pink-text foi sobreposta pelas declarações de classe posteriores, por declarações id e por estilos inline.", + "
", "Vamos adicionar nossa palavra-clave !important para sua declaração de cor de pink-text para que possamos estar 100% seguros que seu elemento h1 será sempre cor de rosa.", "Um exemplo para fazer isso é:", "color: red !important;" @@ -2667,6 +3118,7 @@ "Но подождите. Есть ещё один последний способ переопределения CSS. Это наиболее существенный способ из всех. Но перед тем, как мы его попробует, давайте поговорим о том, зачем вам может понадобиться переопрелить CSS.", "Во множестве ситуаций вы будете использовать CSS-библиотеки. Это может переопределить ваш собственный CSS. Таким образом, когда вам требуется быть абсолютно уверенными в том, что элемент будет обладать определёнными CSS-свойствами, вы можете использовать !important", "Давайте вернёмся к объявлению нашего класса pink-text. Помните, что наш класс pink-text был переопределён последующим классом, стилизацией атрибута id, встроенным стилем.", + "
", "Давайте добавим ключевое слово !important к вашему объявлению текста розовым, чтобы убедиться на 100%, что ваш элемент h1 будет розовый.", "Пример того, как это можено сделать:", "color: red !important;" @@ -2681,6 +3133,7 @@ "Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.", "We usually use decimals, or base 10 numbers, which use the symbols 0 to 9 for each digit. Hexadecimals (or hex) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent values zero to nine. Then A,B,C,D,E,F represent values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. You can find more information about hexadecimal numbers here.", "In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, #000000 is black and is also the lowest possible value. You can find more information about the RGB color system here.", + "
", "Replace the word black in our body element's background-color with its hex code representation, #000000." ], "challengeSeed": [ @@ -2703,6 +3156,7 @@ "Wusstest du dass es andere Möglichkeiten gibt Farben in CSS darzustellen? Eine dieser Möglichkeiten ist \"Hexadezimal Code\" genannt, oder kurz hex code.", "Wir verwenden üblicherweise decimals (Dezimalen), oder Zehnersystem, das für jede Ziffer eine Symbol von 0 bis 9 verwendet. Hexadecimals (Hexadezimalzahlen oder hex) beruhen auf einer 16er Basis. Das bedeuted dass sie 16 verschiedene Symbole verwenden. Wie auch Dezimalzahlen, repräsentiern die Symbole \"0\"-\"9\" Null bis Neun. Dann allerdings geht es weiter mit A,B,C,D,E,F für die Zahlen 10-15. Alles in Allem kann eine einzige Ziffer, mit 0 bis F, in hexadecimal 16 mögliche Werte ausdrücken. Mehr Informationen über das Hexadezimalsystem kannst du hier finden.", "In CSS können wir 6 Hexadezimalziffern verwenden um eine Farbe auszudrücken, je zwei für den Rot- (R), Grün (G)- und Blauanteil (B). #000000 ist zum Beispiel schwarz und der niedrigst mögliche Wert. Mehr Information über den RGB Farbraum findest du hier.", + "
", "Ersetzte das Wort black in der Hintergrundfarbe deines body Elements mit dem hex code #000000." ] }, @@ -2712,6 +3166,7 @@ "¿Sabías que hay otras maneras de representar los colores en CSS? Una de estas formas es llamada código hexadecimal o código hex para abreviar. ", "El sistema Decimal se refiere al que nos permite representar cantidades empleando los dígitos del cero al nueve - los números que la gente usa en la vida cotidiana. El sistema Hexadecimal incluye estos 10 dígitos más las letras A, B, C, D, E y F. Esto significa que Hexadecimal tiene un total de 16 dígitos posibles, en lugar de las 10 posibles que nos da nuestro sistema numérico normal en base 10. ", "Con CSS, utilizamos 6 dígitos hexadecimales para representar los colores. Por ejemplo, #000000 es el valor más bajo posible, y representa el color negro. ", + "
", "Reemplaza la palabra black en el color de fondo (background-color) de nuestro elemento body por su representación hexadecimal #000000" ] }, @@ -2721,6 +3176,7 @@ "Você sabia que existem outras formas para representar as cores em CSS? Uma dessas formas é com o que chamamos de código hexadecimal, ou código hex para abreviar.", "O sistema Decimal nos permite representar quantidades numéricas com os dígitos de zero a nove - assim como nós os utilizamos durante o nosso dia a dia. Já o sistema Hexadecimal inclui estes 10 dígitos e também as letras A, B, C, D, E e F. Isso significa que o Hexadecimal possui um total de 16 dígitos possíveis, ao invés dos 10 possíveis que podemos usar com nosso sistema numérico normal de base 10.", "No CSS, utilizamos 6 dígitos hexadecimais para representar as cores. Por exemplo, #000000 é o valor mais baixo possível, e representa a cor preta.", + "
", "Substitua a palavra black na cor de fundo (background-color) de nosso elemento body pela sua representação hexadecimal #000000." ] }, @@ -2730,6 +3186,7 @@ "Знали ли вы, что существуют другие способы представления цветов в CSS? Одним из этих способов является шестнадцатиричный код, hex-код, если короче.", "Обычно мы используем десятки, или десятичную систему счисления, в основе которой лежит число 10, которая использует символы от 0 до 9 для каждого числа. В основе Шестнадцатиричной системы лежит число 16. Это значит, что она использует шестнадцать различных символов. Как в десятичной, символы 0-9 соответствуют значениям от нуля до девяти. Далее A,B,C,D,E,F соответствуют значениям от десяти до пятнадцати. Вместе, от 0 до F, с их помощью можно представить число в шестнадцатиричной системе счисления, что даёт нам в целом 16 возможных значений. Вы можете найти больше информации о шестнадцатиричной системе счисления тут.", "В CSS, мы можем использовать 6 шестнадцатиричных чисел для представления цвета, по два на каждый компонент: красный (R), зелёный (G), синий (B). Например, #000000 - черный цвет и минимальное значение. Вы можете найти больше информации о цветовой модели RGB.", + "
", "Замените слово black в свойстве background-color нашего элемента body на представление в виде hex-кода, #000000." ] } @@ -2744,6 +3201,7 @@ "For example, orange is pure red, mixed with some green, and no blue. In hex code, this translates to being #FFA500.", "The digit 0 is the lowest number in hex code, and represents a complete absence of color.", "The digit F is the highest number in hex code, and represents the maximum possible brightness.", + "
", "Replace the color words in our style element with their correct hex codes.", "
ColorHex Code
Dodger Blue#1E90FF
Green#00FF00
Orange#FFA500
Red#FF0000
" ], @@ -2789,6 +3247,7 @@ "description": [ "Mit diesen drei puren Farben (Rot, Grün und Blau) können wir 16 Millionen andere Farben erzeugen.", "Orange, zum Beispiel, ist pures Rot, gemischt mit ein bisschen Grün und keinem Blau", + "
", "Gib dem body Element eine orange Hintergrundfarbe indem du den Hexadezimal Code #FFA500 verwendest." ] }, @@ -2797,6 +3256,7 @@ "description": [ "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", "Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.", + "
", "Haz que el color de fondo del elemento body sea anaranjado, dándole el código hexadecimal #FFA500" ] }, @@ -2805,6 +3265,7 @@ "description": [ "A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.", "Por exemplo, o laranja é vermelho puro misturado com um pouco de verde, e sem nada de azul.", + "
", "Faça com que a cor de fundo do elemento body seja alaranjada, usando o código hexadecimal #FFA500." ] }, @@ -2813,6 +3274,7 @@ "description": [ "Из этих трёх чистых цветов (красного, зелёного и синего), мы можем создать 16 миллионов других цветов.", "Например, оранжевый - смесь чистого красного с примесью зелёного, но без синего.", + "
", "Сделайте цвет фона элемента body оранжевым, присвоив его соответствующему свойству значение hex-кода равное #FFA500" ] } @@ -2825,6 +3287,7 @@ "Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.", "For example, red's hex code #FF0000 can be shortened to #F00. This shortened form gives one digit for red, one digit for green, and one digit for blue.", "This reduces the total number of possible colors to around 4,000. But browsers will interpret #FF0000 and #F00 as exactly the same color.", + "
", "Go ahead, try using the abbreviated hex codes to color the correct elements.", "
ColorShort Hex Code
Cyan#0FF
Green#0F0
Red#F00
Fuchsia#F0F
" ], @@ -2871,6 +3334,7 @@ "Viele Leute fühlen sich mit der Auswahl aus über 16 Millionen Farben überfordert. Außerdem ist es schwierig sich Hexadezimal Codes zu merken. Zum Glück kannst du sie abkürzen.", "Rot, zum Beispiel, mit dem Hexadezimal Code von #FF0000 kannst du mit #F00 abkürzen. Das bedeuted eine Ziffer für Rot, eine für Grün und eine für Blau", "Das reduziert die Gesamtsumme an möglichen Farben auf ungefähr 4.000. Aber Browser interpretieren #FF0000 und #F00 als exakt die gleiche Farbe.", + "
", "Probiere #F00 aus um die Hintergrundfarbe des body Elements rot zu färben." ] }, @@ -2880,6 +3344,7 @@ "Mucha gente se siente abrumada por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente puedes acortarlo. ", "Por ejemplo, el rojo, que es #FF0000 en código hexadecimal, se puede abreviar a #F00. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ", "Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente el mismo color. ", + "
", "Adelante, intenta usar #F00 para volver rojo el color de fondo del elemento body." ] }, @@ -2889,6 +3354,7 @@ "Muitas pessoas se sentem confusas com as possibilidades de mais de 16 milhões de cores. Além disso, é difícil lembrar de códigos hexadecimais. Por sorte, podemos abreviá-lo.", "Por exemplo, o vermelho que é #FF0000 em código hexadecimal pode ser abreviado a #F00. Isso quer dizer que podemos usar um dígito para vermelho, um dígito para verde e um dígito para azul.", "Fazer isso reduz o número total de possíveis cores para ao redor de 4.000. Apesar disso, os navegadores interpretarão #FF0000 e #F00 exatamente como a mesma cor.", + "
", "Continue, tente usar #F00 para fazer com que a cor de fundo do elemento body seja vermelha." ] }, @@ -2898,6 +3364,7 @@ "Множество людей обременяет возможность применения более 16-ти миллионов цветов. И hex-коды достаточно сложно запоминать. К счастью, вы можете использовать укороченные выражения.", "Например, красный, который имеет значение #FF0000 в виде hex-кода, может быть укорочен до #F00. В укороченном виде: одна цифра представляет красный, одна - зелёный, одна - синий.", "Это уменьшает общее количество возможных цветов до порядка 4,000. Но браузеры будут интерпретировать #FF0000 и #F00 как один и тот же цвет.", + "
", "Вперёд, попробуйте применить значение #F00, чтобы сделать цвет фона элемента body красным." ] } @@ -2914,6 +3381,7 @@ "rgb(255, 255, 255)", "Instead of using six hexadecimal digits like you do with hex code, with RGB you specify the brightness of each color with a number between 0 and 255.", "If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So RGB, which starts counting from zero, has the exact same number of possible values as hex code.", + "
", "Let's replace the hex code in our body element's background color with the RGB value for black: rgb(0, 0, 0)" ], "challengeSeed": [ @@ -2940,6 +3408,7 @@ "rgb(255, 255, 255)", "Anstatt sechs Hexadezimalziffern zu verwenden, legst du mit rgb die Helligkeit jeder einzelner Farbe mit einer Zahl zwischen 0 und 255 fest.", "Wenn du nachrechnest, 16 mal 16 ist 256 Werte. Also hat rgb, das mit Null hochzuzählen beginnt, die gleiche Anzahl an möglichen Farben wie Hexadezimal Code.", + "
", "Ersetzte jetzt den Hexadezimal Code der Hintergrundfarbe deines body Elements mit dem RGB Wert für Schwarz: rgb(0, 0, 0)" ] }, @@ -2953,6 +3422,7 @@ "rgb(255, 255, 255)", "En lugar de utilizar seis dígitos hexadecimales, con rgb especificas el brillo de cada color con un número entre 0 y 255.", "Si haces la matemática, 16 veces 16 es 256 valores totales. Así que rgb, que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal.", + "
", "Remplacemos el código hexadecimal del color de fondo de nuestro elemento body por el valor RGB para el negro: rgb(0, 0, 0)" ] }, @@ -2966,6 +3436,7 @@ "rgb(255, 255, 255)", "Ao invés de utilizar 6 dígitos hexadecimais, com rgb você especifica o brilho de cada cor com um número entre 0 e 255.", "Se você fizer a matemática, 16 vezes 16 é igual a 256 valores totais. Sendo assim, o rgb, que começa a contar desde zero, tem exatamente o mesmo número de valores possíveis que o código hexadecimal.", + "
", "Vamos substituir o código hexadecimal da cor de fundo do nosso elemento body pelo valor RGB para preto: rgb(0, 0, 0)." ] }, @@ -2979,6 +3450,7 @@ "rgb(255, 255, 255)", "Вместо использования шести шестнадцатиразрядных цифр, как вы делаете, когда применяете hex-код, применяя rgb вы указываете значение яркости каждого цвета в диапазоне от 0 до 255.", "Если вы посчитаете, 16 раз по 16 - это 256 различных значений. Таким образом rgb, где счёт начинается с нуля, имеет ровно то же число возможных значений, что и hex-код.", + "
", "Давайте заменим hex-код в цвете фона нашего элемента body на значение в формате RGB для получения чёрного: rgb(0, 0, 0)" ] } @@ -2989,6 +3461,7 @@ "title": "Use RGB to Mix Colors", "description": [ "Just like with hex code, you can mix colors in RGB by using combinations of different values.", + "
", "Replace the hex codes in our style element with their correct RGB values.", "
ColorRGB
Bluergb(0, 0, 255)
Redrgb(255, 0, 0)
Orchidrgb(218, 112, 214)
Siennargb(160, 82, 45)
" ], @@ -3033,6 +3506,7 @@ "title": "Verwende RGB um Farben zu mischen", "description": [ "Wie auch mit Hexadezimal Code, kannst du Farben in RGB mischen indem du Kombination von verschiedenen Werten nimmst.", + "
", "Ändere die Hintergrundfarbe des body Elements zum RGB Wert von Orange: rgb(255, 165, 0)" ] }, @@ -3040,6 +3514,7 @@ "title": "Usa RGB para mezclar colores", "description": [ "Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.", + "
", "Cambia el color de fondo del elemento body a anaranjado usando su valor RGB: rgb(255, 165, 0)" ] }, @@ -3047,6 +3522,7 @@ "title": "Use Valores RBG para Misturar Cores", "description": [ "Assim como com código hexadecimal, você pode misturar as cores com RGB através do uso de combinações de valores diferentes.", + "
", "Mude a cor de fundo do elemento body para alaranjado usando seu valor RGB: rgb(255, 165, 0)." ] }, @@ -3054,6 +3530,7 @@ "title": "Используйте формат RGB, чтобы смешивать цвета", "description": [ "Так же как и с hex-кодом, вы можете смешивать цвета в формате RGB, используя комбинации различных значений.", + "
", "Измените цвет фона элемента body на значение в формате RGB соответствующее оранжевому: rgb(255, 165, 0)" ] }