Fiche de révision — CSS2 L1 IG2I
1. Liaison et Priorités (Cascade)
Linkage externe : <link rel="stylesheet" href="style.css"> .
Linkage interne : Balise <style> .
Style en ligne : Attribut style="..." (poids très fort, à éviter).
Priorités (Ordre de force) : !important > Style en ligne > ID ( # ) > Classe/Pseudo-classe ( . ) > Balise > Héritage.
2. Les Sélecteurs (Complétés)
Base : Balise ( p ), Classe ( .menu ), ID ( #header ).
Groupement : h1, h2 (cible les deux).
Descendance : div p (tous les p dans une div ).
Fils direct : div > p (uniquement le p enfant direct).
Voisinage direct : h1 + p (le p qui suit immédiatement un h1 ).
Attribut : input[type="text"] (cible par valeur d’attribut).
3. Le Modèle de Boîte (Box Model)
width / height : Taille du contenu.
padding : Espace intérieur.
border : Bordure.
margin : Espace extérieur (attention à la fusion des marges verticales).
box-sizing: border-box; : Inclut le padding et la bordure dans la largeur totale.
4. Propriétés d’Affichage ( display )
block : Prend toute la largeur, va à la ligne.
inline : Reste sur la ligne, ignore les dimensions.
inline-block : Reste sur la ligne mais accepte width et height .
none : L’élément est retiré de la page.
5. Positionnement ( position )
static : Flux normal.
relative : Décalage par rapport à sa place initiale (sert de repère aux enfants).
absolute : Placé par rapport au premier parent positionné.
fixed : Collé à la fenêtre (ne bouge pas au scroll).
z-index : Ordre de superposition.
6. Textes, Couleurs et Unités
Couleurs : Noms, Hexadécimal ( # ), RGB.
Police : font-family (listes de secours), font-size , font-weight .
1. Liaison et Priorités (Cascade)
Linkage externe : <link rel="stylesheet" href="style.css"> .
Linkage interne : Balise <style> .
Style en ligne : Attribut style="..." (poids très fort, à éviter).
Priorités (Ordre de force) : !important > Style en ligne > ID ( # ) > Classe/Pseudo-classe ( . ) > Balise > Héritage.
2. Les Sélecteurs (Complétés)
Base : Balise ( p ), Classe ( .menu ), ID ( #header ).
Groupement : h1, h2 (cible les deux).
Descendance : div p (tous les p dans une div ).
Fils direct : div > p (uniquement le p enfant direct).
Voisinage direct : h1 + p (le p qui suit immédiatement un h1 ).
Attribut : input[type="text"] (cible par valeur d’attribut).
3. Le Modèle de Boîte (Box Model)
width / height : Taille du contenu.
padding : Espace intérieur.
border : Bordure.
margin : Espace extérieur (attention à la fusion des marges verticales).
box-sizing: border-box; : Inclut le padding et la bordure dans la largeur totale.
4. Propriétés d’Affichage ( display )
block : Prend toute la largeur, va à la ligne.
inline : Reste sur la ligne, ignore les dimensions.
inline-block : Reste sur la ligne mais accepte width et height .
none : L’élément est retiré de la page.
5. Positionnement ( position )
static : Flux normal.
relative : Décalage par rapport à sa place initiale (sert de repère aux enfants).
absolute : Placé par rapport au premier parent positionné.
fixed : Collé à la fenêtre (ne bouge pas au scroll).
z-index : Ordre de superposition.
6. Textes, Couleurs et Unités
Couleurs : Noms, Hexadécimal ( # ), RGB.
Police : font-family (listes de secours), font-size , font-weight .
