diff options
| -rw-r--r-- | fr-fr/css-fr.html.markdown | 223 |
1 files changed, 223 insertions, 0 deletions
diff --git a/fr-fr/css-fr.html.markdown b/fr-fr/css-fr.html.markdown new file mode 100644 index 00000000..df45cf8e --- /dev/null +++ b/fr-fr/css-fr.html.markdown @@ -0,0 +1,223 @@ +--- +language: css +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] + - ["Marco Scannadinari", "https://github.com/marcoms"] +translators: + - ["@prrrnd", "https://github.com/prrrnd"] +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 +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. + +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. +Cet article porte principalement sur la syntaxe et quelques astuces. + + +```css +/* Les commentaires sont entourés par slash-étoile, comme cette ligne! */ + +/* #################### + ## SELECTEURS + ####################*/ + +/* Généralement, la première déclaration en CSS est très simple */ +selecteur { propriete: valeur; /* autres proprietés...*/ } + +/* Le sélécteur sert à cibler un élément du HTML + +Vous pouvez cibler tous les éléments d'une page! */ +* { color:red; } + +/* +Voici un élément dans notre HTML: + +<div class='une-classe classe2' id='unId' attr='valeur' /> +*/ + +/* Vous pouvez le cibler par une classe */ +.une-classe { } + +/* ou les deux */ +.une-classe.classe2 { } + +/* ou par son type */ +div { } + +/* ou son id */ +#unId { } + +/* ou par le fait qu'il a un attribut */ +[attr] { font-size:smaller; } + +/* ou que l'attribut a une valeur spécifique */ +[attr='valeur'] { font-size:smaller; } + +/* commence avec une valeur */ +[attr^='val'] { font-size:smaller; } + +/* termine avec une valeur */ +[attr$='eur'] { font-size:smaller; } + +/* contient une valeur */ +[attr~='leu'] { font-size:smaller; } + + +/* Ce qu'il faut bien comprendre, c'est que vous pouvez combiner ceci -- Il ne doit pas y avoir +d'espaces entre.*/ +div.une-classe[attr$='eu'] { } + +/* 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 */ +div.un-parent .enfants {} + +/* Attention: le même sélécteur sans espace a un autre sens. */ +div.un-parent.classe {} + +/* Vous pouvez cibler un élément basé sur un enfant de même parent */ +.je-suis-avant + .cet-element { } + +/* 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 */ + +/* élément avec le curseur au-dessus */ +:hover {} + +/* lien visité */ +:visited {} + +/* lien non visité */ +:link {} + +/* élément avec le focus */ +:focus {} + + +/* #################### + ## PROPRIETES + ####################*/ + +selecteur { + + /* Units */ + width: 50%; /* pourcentage */ + font-size: 2em; /* times current font-size */ + 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 */ + background-color: tomato; /* couleur nommée */ + 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... */ +} + +``` + +## Utilisation + +Le CSS s'écrit dans des fichiers `.css`. + +```xml +<!-- Vous devez inclure le CSS dans la balise <head>: --> +<link rel='stylesheet' type='text/css' href='chemin/style.css' /> + +<!-- Vous pouvez inclure du CSS dans le HTML directement, mais ce n'est vraiment pas recommandé. --> +<style> + selecteur { propriete:valeur; } +</style> + +<!-- ou directement sur l'élément HTML. +PS: À ne pas faire. --> +<div style='propriete:valeur;'> +</div> + +``` + +## Priorités + +Comme on vient de le voir, un élément peut être ciblé par plus qu'un seul sélécteur +et une même propriété peut être définie plusieurs fois. +Dans ces cas, une des propriétés devient prioritaire. + +Voici du code CSS: + +```css +/*A*/ +p.classe1[attr='valeur'] + +/*B*/ +p.classe1 {} + +/*C*/ +p.classe2 {} + +/*D*/ +p {} + +/*E*/ +p { propriete: valeur !important; } + +``` + +et le code HTML: + +```xml +<p style='/*F*/ propriete:valeur;' class='classe1 classe2' attr='valeur'> +</p> +``` + +Les priorités de style sont: +Attention, les priorités s'appliquent aux **propriétés**, pas aux blocs entiers. + +* `E` a la priorité grâce à `!important`. +* `F` vient ensuite, car le code se trouve directement dans le HTML. +* `A` vient ensuite, car il est le plus spécifique. + plus spécifique veut dire, celui qui cible le plus l'élément +* `C` vient ensuite. Il est aussi spécifique que `B`, mais est écrit après. +* Puis `B` +* Et enfin `D`. + +## Compatibilité + +La plupart des fonctionnalités de CSS2 (et de plus en plus CSS3) sont compatibles +avec tous les navigateurs. Mais c'est important de vérifier la compatibilité. + +[QuirksMode CSS](http://www.quirksmode.org/css/) est une très bonne source pour cela. + +## En savoir plus (en anglais) + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) + |