technique:css

Feuilles de style CSS - habillage web

  • 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…)
  • technique/css.txt
  • Dernière modification: 2020/12/05 00:12
  • de francoisa