Feuilles de style CSS - habillage web

Plein de ressources sur le sujet un peu partout

• Chaine de Grafikart
• Astuces sur Alsacreation
• OpenClassRomm HTML5 et CSS
• CSS3 Maker
• Devdocs CSS
• CSS sur MDN

• 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.

.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)

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

• 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 et inline-block.
• L'attribut background est différent entre inline et inline-block (nouvelle boite en ligne)
• Plusieurs autres spécificités de display (flexbox, grid…)

• Flexbox : avec Grafikart
• Flexbox sur MDN