Translated challenge 10 to 18
This commit is contained in:
Rémi Fortier
committed by
Rémi Fortier
Rémi Fortier
parent
49993e6b22
commit
bb4e0f5eb6
@ -643,6 +643,18 @@
|
||||
"Внутри вашего элемента <code>style</code>, замените селектор <code>h2</code> на <code>.red-text</code> и измените значение цвета с <code>blue</code> на <code>red</code>.",
|
||||
"Присвойте вашему элементу <code>h2</code> атрибут <code>class</code> со значением <code>'red-text'</code>."
|
||||
],
|
||||
"titleFR": "Utiliser les classes CSS pour styler un élément",
|
||||
"descriptionFR": [
|
||||
"Les classes sont des styles réutilisables qui peuvent être ajoutées à des éléments HTML.",
|
||||
"Voici un exemple de déclaration de classe CSS :",
|
||||
"<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>",
|
||||
"Remarquez que nous avons créer une classe CSS nommée <code>blue-text</code> à l'intérieur de notre balise <code><style></code>.",
|
||||
"Vous pouvez appliquer une classe à un élément HTML comme ceci :",
|
||||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||||
"Prenez note que que dans votre élément CSS <code>style</code>, 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 <code>style</code>, changez le sélecteur du <code>h2</code> pour <code>.red-text</code> et changez la couleur, passant de <code>blue</code> à <code>red</code>.",
|
||||
"Donnez à votre élément <code>h2</code> l'attribut de classe la valeur de <code>red-text</code>."
|
||||
],
|
||||
"title": "Use a CSS Class to Style an Element",
|
||||
"description": [
|
||||
"Classes are reusable styles that can be added to HTML elements.",
|
||||
@ -718,6 +730,15 @@
|
||||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||||
"Примените класс <code>red-text</code> к вашим элементам <code>h2</code> и <code>p</code>."
|
||||
],
|
||||
"titleFR": "Stylez plusieurs éléments avec une classe CSS",
|
||||
"descriptionFR": [
|
||||
"Souvenez-vous que vous pouvez ajouter des classes aux éléments HTML en utilisant <code>class=\"votre-classe-ici\"</code> à l'intérieur de la balise ouvrante correspondante.",
|
||||
"Souvenez-vous que les sélecteurs CSS nécessitent un point au début comme ceci :",
|
||||
"<blockquote>.blue-text {<br> color: blue;<br>}</blockquote>",
|
||||
"Rappelez-vous également que les déclarations de classes n'ont pas de point, comme ceci :",
|
||||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||||
"Appliquez la classe <code>red-text</code> à vos éléments <code>h2</code> et <code>p</code>."
|
||||
],
|
||||
"title": "Style Multiple Elements with a CSS Class",
|
||||
"description": [
|
||||
"Remember that you can attach classes to HTML elements by using <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
|
||||
@ -785,6 +806,15 @@
|
||||
"<strong>Внимание</strong><br>По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания.",
|
||||
"Также, пожалуйста, не добавляйте атрибут класс к вашему новому элементу <code>p</code>."
|
||||
],
|
||||
"titleFR": "Changez la taille de police d'un élément",
|
||||
"descriptionFR": [
|
||||
"La taille de police est contrôlée par la propriété CSS <code>font-size</code>, comme ceci :",
|
||||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||||
"Créez un second élément <code>p</code> après l'élément <code>p</code> existant avec le texte kitty ipsum suivant : <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||||
"À l'intérieur de la même balise <code><style></code> qui contiens votre classe <code>.red-text</code>, créez une nouvelle entrée pour les éléments <code>p</code> et paramétrer le <code>font-size</code> à 16 pixels (<code>16px</code>).",
|
||||
"<strong>Prenez note</strong><br>Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi.",
|
||||
"Également, veuillez ne pas ajouter d'attributs de classe à votre nouvel élément <code>p</code>."
|
||||
],
|
||||
"title": "Change the Font Size of an Element",
|
||||
"description": [
|
||||
"Font size is controlled by the <code>font-size</code> CSS property, like this:",
|
||||
@ -850,6 +880,13 @@
|
||||
"<blockquote>h2 {<br> font-family: Sans-serif;<br>}</blockquote>",
|
||||
"Присвойте шрифт <code>Monospace</code> всем вашим элементам <code>p</code>."
|
||||
],
|
||||
"titleFR": "Paramétrer la famille de police d'un élément",
|
||||
"descriptionFR": [
|
||||
"Vous pouvez paramétrer la police d'un élément en utilisant la propriété <code>font-family</code>.",
|
||||
"Par exemple, si vous voulez paramétrer la police de votre élément <code>h2</code> à <code>Sans-serif</code>, vous devez utiliser le CSS suivant :",
|
||||
"<blockquote>h2 {<br> font-family: Sans-serif;<br>}</blockquote>",
|
||||
"Faites en sorte que tous vos éléments <code>p</code> aient la police <code>Monospace</code>."
|
||||
],
|
||||
"title": "Set the Font Family of an Element",
|
||||
"description": [
|
||||
"You can set an element's font by using the <code>font-family</code> property.",
|
||||
@ -914,6 +951,14 @@
|
||||
"Теперь вы можете установить шрифт <code>Lobster</code> в качестве значения семейства шрифтов для вашего <code>h2</code>.",
|
||||
"Примените свойство <code>font-family</code> со значением <code>Lobster</code> к вашему элементу <code>h2</code>."
|
||||
],
|
||||
"titleFR": "Importer une police de Google",
|
||||
"descriptionFR": [
|
||||
"Maintenant, importons et appliquons une police de Google (prenez note que si Google est interdit d'accès dans votre pays, vous devrez omettre ce défi).",
|
||||
"Premièrement, vous devrez faire un <code>appel</code> vers Google pour prendre la police <code>Lobster</code> 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 <code>Lobster</code> comme valeur de police de votre élément <code>h2</code>.",
|
||||
"Appliquer la valeur <code>Lobster</code> à la <code>font-family</code> de votre élément <code>h2</code>."
|
||||
],
|
||||
"title": "Import a Google Font",
|
||||
"description": [
|
||||
"Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).",
|
||||
@ -985,6 +1030,14 @@
|
||||
"<blockquote>p {<br> font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
|
||||
"Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт <code>Lobster</code> становится недоступен. Обратите внимание как происходит деградация до шрифта <code>Monospace</code>."
|
||||
],
|
||||
"titleFR": "Spécifier comment vos polices devraient dégrader",
|
||||
"descriptionFR": [
|
||||
"Il y a plusieurs polices par défaut qui sont disponible dans tous les navigateurs Web. Ceci comprend <code>Monospace</code>, <code>Serif</code> et <code>Sans-Serif</code>.",
|
||||
"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 <code>Helvetica</code>, mais également dégrader vers <code>Sans-Serif</code> lorsque la police <code>Helvetica</code> n'est pas disponible, vous pouvez utiliser le style CSS suivant :",
|
||||
"<blockquote>p {<br> font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
|
||||
"Maintenant, commenter votre appel vers les polices de Google, pour que la police <code>Lobster</code> ne soit pas disponible. Regardez comment la police se dégrade vers <code>Monospace</code>."
|
||||
],
|
||||
"title": "Specify How Fonts Should Degrade",
|
||||
"description": [
|
||||
"There are several default fonts that are available in all browsers. These include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>",
|
||||
@ -1061,6 +1114,16 @@
|
||||
"Попробуйте добавить изображение используя следующую ссылку:",
|
||||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||||
],
|
||||
"titleFR": "Ajouter des images à votre site Web",
|
||||
"descriptionFR": [
|
||||
"Vous pouvez ajouter des images à votre site Web en utilisant l'élément <code>img</code> et pointer vers une URL d'image spécifique en utilisant l'attribut <code>src</code>.",
|
||||
"Un exemple de cette procédure serait :",
|
||||
"<code><img src=\"https://www.your-image-source.com/your-image.jpg\"></code>",
|
||||
"Note that in most cases, <code>img</code> elements are self-closing.",
|
||||
"Prenez note que dans la plupart des cas, les éléments <code>img</code> sont auto-fermants.",
|
||||
"Essayez avec cette image :",
|
||||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||||
],
|
||||
"title": "Add Images to your Website",
|
||||
"description": [
|
||||
"You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
|
||||
@ -1137,6 +1200,14 @@
|
||||
"Создайте класс <code>smaller-image</code> и используйте его для изменения размера изображений до 100 пикселей в ширину.",
|
||||
"<strong>Внимание</strong><br>По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания."
|
||||
],
|
||||
"titleFR": "Redimensionner vos images",
|
||||
"descriptionFR": [
|
||||
"Le CSS a une propriété nommé <code>width</code> qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons <code>px</code> (pixels) pour déterminer la largeur d'une image.",
|
||||
"Par exemple, si nous voulons créer une classe CSS nommée <code>larger-image</code> qui donnne aux éléments une largeur de 500 pixels, nous utilisons :",
|
||||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||||
"Créez une classe nommée <code>smaller-image</code> et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.",
|
||||
"<strong>Prenez note</strong><br>Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi."
|
||||
],
|
||||
"title": "Size your Images",
|
||||
"description": [
|
||||
"CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
|
||||
@ -1219,6 +1290,15 @@
|
||||
"Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута <code>class</code>. Например:",
|
||||
"<code><img class=\"class1 class2\"></code>"
|
||||
],
|
||||
"titleFR": "Ajouter des bordures autour de vos éléments",
|
||||
"descriptionFR": [
|
||||
"Les bordures CSS ont des propriétés comme <code>style</code>, <code>color</code> et <code>width</code>",
|
||||
"Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :",
|
||||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||||
"Créer une classe nommée <code>thick-green-border</code> qui ajoute une bordure verte de 10 pixel avec un style <code>solid</code> 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 <code>class</code> de l'élément. Par exemple :",
|
||||
"<code><img class=\"class1 class2\"></code>"
|
||||
],
|
||||
"title": "Add Borders Around your Elements",
|
||||
"description": [
|
||||
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
|
||||
|
||||
Reference in New Issue
Block a user