2014-08-20 05:45:07 +00:00
---
language: css
2017-08-25 07:57:43 +00:00
filename: cascading-fr.css
2014-08-20 05:45:07 +00:00
contributors:
- ["Mohammad Valipour", "https://github.com/mvalipour"]
- ["Marco Scannadinari", "https://github.com/marcoms"]
translators:
2014-08-20 05:47:06 +00:00
- ["@prrrnd", "https://github.com/prrrnd"]
2014-08-20 05:45:07 +00:00
lang: fr-fr
---
2015-10-18 16:38:01 +00:00
Au début du web, il n'y avait pas d'élements visuels, simplement du texte pur. Mais avec le dévelopement des navigateurs,
2014-08-20 05:45:07 +00:00
des pages avec du contenu visuel sont arrivées.
2014-09-16 15:33:10 +00:00
CSS est le langage standard qui existe et permet de garder une séparation entre
2014-08-20 05:45:07 +00:00
le contenu (HTML) et le style d'une page web.
2014-09-16 15:33:10 +00:00
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.
2014-08-20 05:45:07 +00:00
2015-10-18 16:38:01 +00:00
Comme tous les autres langages, CSS a plusieurs versions. Ici, nous allons parler 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 navigateurs.
2014-08-20 05:45:07 +00:00
2014-09-16 15:33:10 +00:00
**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.
2014-08-20 05:45:07 +00:00
Cet article porte principalement sur la syntaxe et quelques astuces.
```css
/* Les commentaires sont entourés par slash-étoile, comme cette ligne! */
/* ####################
2014-09-16 15:33:10 +00:00
## SÉLECTEURS
2014-08-20 05:45:07 +00:00
####################*/
/* Généralement, la première déclaration en CSS est très simple */
selecteur { propriete: valeur; /* autres proprietés...*/ }
2015-10-18 16:38:01 +00:00
/* Le sélecteur sert à cibler un élément du HTML
2014-08-20 05:45:07 +00:00
Vous pouvez cibler tous les éléments d'une page! */
* { color:red; }
/*
2014-09-16 15:33:10 +00:00
Voici un élément dans notre HTML :
2014-08-20 05:45:07 +00:00
< div class = 'une-classe classe2' id = 'unId' attr = 'valeur' / >
*/
/* Vous pouvez le cibler par une classe */
.une-classe { }
2014-09-16 15:33:10 +00:00
/* ou par deux */
2014-08-20 05:45:07 +00:00
.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
2014-09-16 15:33:10 +00:00
d'espaces entre. */
2014-08-20 05:45:07 +00:00
div.une-classe[attr$='eu'] { }
2014-09-16 15:33:10 +00:00
/* Vous pouvez aussi cibler un élément par son parent. */
2014-08-20 05:45:07 +00:00
/* Un élément qui est en enfant direct */
div.un-parent > .enfant {}
2015-10-18 16:39:21 +00:00
/* Cela cible aussi les .enfants plus profonds dans la structure HTML */
2014-08-20 05:45:07 +00:00
div.un-parent .enfants {}
2014-09-16 15:33:10 +00:00
/* Attention : le même sélecteur sans espace a un autre sens. */
2014-08-20 05:45:07 +00:00
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 {}
2014-09-16 15:33:10 +00:00
/* 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 */
2014-08-20 05:45:07 +00:00
/* élément avec le curseur au-dessus */
:hover {}
/* lien visité */
:visited {}
/* lien non visité */
:link {}
/* élément avec le focus */
:focus {}
/* ####################
2014-09-16 15:33:10 +00:00
## PROPRIÉTÉS
2014-08-20 05:45:07 +00:00
####################*/
selecteur {
2014-09-16 15:33:10 +00:00
2014-08-20 05:45:07 +00:00
/* Units */
width: 50%; /* pourcentage */
2014-09-16 15:33:10 +00:00
font-size: 2em; /* taille de la police multipliée par X */
2014-08-20 05:45:07 +00:00
width: 200px; /* pixels */
font-size: 20pt; /* points */
width: 5cm; /* centimetres */
width: 50mm; /* millimetres */
width: 5in; /* pouces */
2014-09-16 15:33:10 +00:00
2014-08-20 05:45:07 +00:00
/* 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 */
2014-09-16 15:33:10 +00:00
2014-08-20 05:45:07 +00:00
/* Images */
background-image: url(/chemin-vers-image/image.jpg);
2014-09-16 15:33:10 +00:00
2014-08-20 05:45:07 +00:00
/* Polices */
font-family: Arial;
font-family: "Courier New"; /* Si espace, entre guillemets */
2014-09-16 15:33:10 +00:00
font-family: "Courier New", Trebuchet, Arial; /* Si la première n'est pas trouvée, la deuxième est utilisée, etc... */
2014-08-20 05:45:07 +00:00
}
```
## Utilisation
Le CSS s'écrit dans des fichiers `.css` .
```xml
2014-09-16 15:33:10 +00:00
<!-- Vous devez inclure le CSS dans la balise <head> : -->
2014-08-20 05:45:07 +00:00
< 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 >
2014-09-16 15:33:10 +00:00
<!-- ou directement sur l'élément HTML.
PS : à ne pas faire. -->
2014-08-20 05:45:07 +00:00
< div style = 'propriete:valeur;' >
< / div >
```
## Priorités
2014-09-16 15:33:10 +00:00
Comme on vient de le voir, un élément peut être ciblé par plus qu'un seul sélecteur
2014-08-20 05:45:07 +00:00
et une même propriété peut être définie plusieurs fois.
Dans ces cas, une des propriétés devient prioritaire.
2014-09-16 15:33:10 +00:00
Voici du code CSS :
2014-08-20 05:45:07 +00:00
```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 >
```
2014-09-16 15:33:10 +00:00
Les priorités de style sont :
2014-08-20 05:45:07 +00:00
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é
2014-09-16 15:33:10 +00:00
La plupart des fonctionnalités de CSS2 (et de plus en plus CSS3) sont compatibles
avec tous les navigateurs. Mais il est important de vérifier la compatibilité.
2014-08-20 05:45:07 +00:00
[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 )