diff --git a/fr-fr/css-fr.html.markdown b/fr-fr/css-fr.html.markdown index 17f1eab4..bff922df 100644 --- a/fr-fr/css-fr.html.markdown +++ b/fr-fr/css-fr.html.markdown @@ -10,17 +10,16 @@ lang: fr-fr Au début du web, il n'y avait pas d'élements visuels, simplement du texte pure. Mais avec le developemnt des navigateurs, des pages avec du contenu visuel sont arrivées. -CSS est le langage standard qui existe et permet de garder une séparation entre +CSS est le langage standard qui existe et permet de garder une séparation entre le contenu (HTML) et le style d'une page web. -En résumé, CSS fournit une syntaxe qui vous permet de cibler des élements présents -sur un page HTML afin de leurs donner des propriétés visuelles différentes. +En résumé, CSS fournit une syntaxe qui vous permet de cibler des élements présents +sur une page HTML afin de leur donner des propriétés visuelles différentes. -Comme tous les autres langages, CSS a plusieurs versions. Ici, nous allons parlons de CSS2.0 +Comme tous les autres langages, CSS a plusieurs versions. Ici, nous allons parlons de CSS2.0 qui n'est pas le plus récent, mais qui reste le plus utilisé et le plus compatible avec les différents navigateur. -**NOTE:** Parce que le résultat du code CSS est un effet visuel, vous pouvez utiliser [dabblet](http://dabblet.com/) afin de -voir les résultats, comprendre, et vous familiariser avec le langage. +**NOTE :** Vous pouvez tester les effets visuels que vous ajoutez au fur et à mesure du tutoriel sur des sites comme [dabblet](http://dabblet.com/) afin de voir les résultats, comprendre, et vous familiariser avec le langage. Cet article porte principalement sur la syntaxe et quelques astuces. @@ -28,7 +27,7 @@ Cet article porte principalement sur la syntaxe et quelques astuces. /* Les commentaires sont entourés par slash-étoile, comme cette ligne! */ /* #################### - ## SELECTEURS + ## SÉLECTEURS ####################*/ /* Généralement, la première déclaration en CSS est très simple */ @@ -40,7 +39,7 @@ Vous pouvez cibler tous les éléments d'une page! */ * { color:red; } /* -Voici un élément dans notre HTML: +Voici un élément dans notre HTML :
*/ @@ -48,7 +47,7 @@ Voici un élément dans notre HTML: /* Vous pouvez le cibler par une classe */ .une-classe { } -/* ou les deux */ +/* ou par deux */ .une-classe.classe2 { } /* ou par son type */ @@ -74,18 +73,18 @@ div { } /* Ce qu'il faut bien comprendre, c'est que vous pouvez combiner ceci -- Il ne doit pas y avoir -d'espaces entre.*/ +d'espaces entre. */ div.une-classe[attr$='eu'] { } -/* Vous pouvez aussi cibler un élément par son parent.*/ +/* Vous pouvez aussi cibler un élément par son parent. */ /* Un élément qui est en enfant direct */ div.un-parent > .enfant {} -/* Cela cible aussi les .enfants plus profond dans la structure HTML */ +/* Cela cible aussi les .enfants plus profonds dans la structure HTML */ div.un-parent .enfants {} -/* Attention: le même sélécteur sans espace a un autre sens. */ +/* Attention : le même sélecteur sans espace a un autre sens. */ div.un-parent.classe {} /* Vous pouvez cibler un élément basé sur un enfant de même parent */ @@ -94,8 +93,8 @@ div.un-parent.classe {} /* ou n'importe quel enfant de même parent avec celui ci */ .je-suis-tout-avant ~ .cet-element {} -/* Il y a des pseudo-classes qui permettent de cibler un élément -basé sur le comportement, plus que la structure de la page */ +/* Il y a des pseudo-classes qui permettent de cibler un élément +basé sur le comportement, en plus de la structure de la page */ /* élément avec le curseur au-dessus */ :hover {} @@ -111,20 +110,20 @@ basé sur le comportement, plus que la structure de la page */ /* #################### - ## PROPRIETES + ## PROPRIÉTÉS ####################*/ selecteur { - + /* Units */ width: 50%; /* pourcentage */ - font-size: 2em; /* times current font-size */ + font-size: 2em; /* taille de la police multipliée par X */ width: 200px; /* pixels */ font-size: 20pt; /* points */ width: 5cm; /* centimetres */ width: 50mm; /* millimetres */ width: 5in; /* pouces */ - + /* Couleurs */ background-color: #F6E; /* court hex */ background-color: #F262E2; /* long hex */ @@ -132,14 +131,14 @@ selecteur { background-color: rgb(255, 255, 255); /* rouge, vert, bleu */ background-color: rgb(10%, 20%, 50%); /* rouge, vert, bleu en pourcent */ background-color: rgba(255, 0, 0, 0.3); /* rouge, vert, bleu avec transparence */ - + /* Images */ background-image: url(/chemin-vers-image/image.jpg); - + /* Polices */ font-family: Arial; font-family: "Courier New"; /* Si espace, entre guillemets */ - font-family: "Courier New", Trebuchet, Arial; /* Si la première n'est pas trouvée, deuxième, etc... */ + font-family: "Courier New", Trebuchet, Arial; /* Si la première n'est pas trouvée, la deuxième est utilisée, etc... */ } ``` @@ -149,7 +148,7 @@ selecteur { Le CSS s'écrit dans des fichiers `.css`. ```xml - + @@ -157,8 +156,8 @@ Le CSS s'écrit dans des fichiers `.css`. selecteur { propriete:valeur; } - +