Ceci est une ancienne révision du document !
Feuilles de style CSS - habillage web
Plein de ressources sur le sujet un peu partout
Principes de base en CSS
- Le particulier l'emporte sur le générique (les classes surchargent les balises génériques)
- Les CSS utilisent le mode descendant : parent - enfants
- En cas d'égalité, le code le plus bas surcharge le code le plus haut.
Sélecteurs
.nom { }
: classe (.titre)
#nom { }
: id (unique, à éviter) (id=“titre-site”)
nom { }
: balise (p, body)
parent > enfant { }
: enfant direct
balise[attribut=“valeur”] { }
: attribut de la balise (utilisation de * pour règle)
* { }
: tout sans distinction
balise:pseudo-classe
{ } : pseudo-classes prédéfinies (ex a:hover, first-child, nth-child)
nom + balise { }
: première balise (uniquement) après nom
nom1, nom2 { }
: style pour les sélecteurs nom1 et nom2 (en complément)
Boîtes
Propriétés : width
, height
Marges : border
, padding
(intérieures), margin
(extérieures) : 4 chiffres : top, right, bottom, left / 3 chiffres : top , left-right, bottom / 2 chiffres : top-bottom, lef-right / 1 chiffre : tous.
Display block
(empilés, taille fixable) : h1, p, div, header, section, footer…
Display inline
(en ligne, taille dépendante du conteneur parent) : a, strong, em, span…
Display inline-block
(en ligne, mais taille fixée) : input…
Cas particuliers des images: Display inline avec taille fixable, width et height possible en auto
Spécifités des boites
- Les marges adjacentes fusionnent toujours entre elles : la plus grande l'emporte !
- Les margin des enfants l'emportent sur des marges plus petites des parents, sans padding
- Les espaces sont affichées dans les
inline
etinline-block
. - L'attribut
background
est différent entreinline
etinline-block
(nouvelle boite en ligne) - Plusieurs autres spécificités de display (flexbox, grid…)
Flexbox : mise en page souple
- Flexbox : avec Grafikart