Ordre du code source [1]
Spécificité
Importance
Eviter des répétitions dans les feuilles de style: définir des styles génériques pour éléments de base, puis créer des classes pour les éléments différents.
CSS : Cascading Style Sheets
Plusieurs règles peuvent être en conflit : appliquent des valeurs différentes à propriété sur un même élément.
Ordre du code source [1]
Spécificité
Importance
Eviter des répétitions dans les feuilles de style: définir des styles génériques pour éléments de base, puis créer des classes pour les éléments différents.
<style>
h2 {
font-size: 2em;
color: #000;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.small {
font-size: 1em;
}
.bright {
color: rebeccapurple;
}
</style>
<h2>Heading with no class</h2>
<h2 class="small">Heading with class of small</h2>
<h2 class="bright">Heading with class of bright</h2>quels styles sont appliqués quand plusieurs règles pourraient s’appliquer. Calculée en fonction des types de sélecteurs utilisés.
Mesure la précision d’un sélecteur.
Ex. sélecteur de classe plus spécifique que élément (et donc s’applique)
.main-heading {
color: red;
}
h1 {
color: blue;
}<h1 class="main-heading">This is my heading.</h1>CSS en incise (attribut style="…")[1]
Sélecteur d’ID (#nom_de_l_identifiant)
Sélecteur de classe (.nom_de_classe), d’attribut (ex. role="region") et pseudo-classes (ex. :visited)
Sélecteur de type (nom d’élément, ex. a , body …) et pseudo-elements (ex. ::after)
Sélecteur universel (*)
Valeur en 4 parties : ( a , b , c , d ).
a : styles en incise (1 ou 0) [1]
b : nombre de sélecteurs ID (+1)
c : nombre de sélecteurs de classes, d’attributs, et pseudo-classes (+1)
d : nombre de sélecteurs de types, pseudo-elements(+1) [2]
0Style du navigateur (par défaut) [1]
Feuilles de style utilisateur [2]
Feuilles de style du site
!important des feuilles de style du site
!important des feuilles de style utilisateur
!important des feuilles de style du navigateur
(1, 0, 0, 0)
<p style="color:green"> Ce texte est vert</p>(0, 1, 0, 0)
<head>
<style>
.success {
background-color: limegreen;
}
</style>
</head>
<body>
<button class="success">OK</button>
</body>(0, 0, 1, 0)
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="encart">La couleur du texte de l'encart est définie dans un fichier CSS externe.</div>
</body>| Sélecteur | Identifiants | Classes | Éléments | Spécificité totale |
|---|---|---|---|---|
| 0 | 0 | 1 | 0-0-1 |
| 0 | 0 | 3 | 0-0-3 |
| 0 | 2 | 2 | 0-2-2 |
| 1 | 0 | 0 | 1-0-0 |
| 1 | 0 | 1 | 1-0-1 |
Comment les styles sont passés aux enfants [1]. Pour avoir des styles cohérentss sur le document entier. Permet de réduire les répétitions, plus concis et facile à maintenir.
de parent vers enfant (pas dans l’autre sens)
certains propriétés hérités par défaut
ex. font-family, color, line-height
d’autres non
ex. margin, padding, border, background
inheritforce l’héritage depuis le parent même si la propriété n’est pas héritée par défaut
|
5 valeurs spéciales pour contrôler l’héritage[1].
Applique la valeur de l’élément parent sur l’élément ciblé. Cela « force » l’héritage.
Applique la valeur initiale de la propriété sur l’élément ciblé.
Réinitialise la valeur de la propriété de l’élément ciblé avec la mise en forme par défaut du navigateur. Cette valeur agit comme unset dans la plupart des cas.
Réinitialise la valeur de la propriété de l’élément ciblé avec celle établie dans une couche de cascade précédente.
Réinitialise la propriété avec sa valeur naturelle. Autrement dit, si la propriété est naturellement héritée, ce mot-clé sera synonyme de inherit, sinon, il sera synonyme de initial.
propriété raccourcie. Applique une valeur d’héritage à (presque) toutes les propriétés.
Pratique pour annuler les modifications appliquées à des mises en forme et revenir à un point de départ connu avant d’appliquer d’autres modifications.