Mémento propriétés CSS

Cette page est une liste non exhaustive des propriétés CSS qui existent en CSS3. Pour la plupart, ce sont des propriétés que nous avons vues dans le cours, mais vous trouverez aussi quelques nouvelles propriétés que nous n’avons pas abordées.

La liste est non exhaustive car mon but n’est pas de faire la liste de toutes les propriétés CSS qui peuvent exister : il y en a vraiment trop (plus de deux cents !) et certaines sont très rarement utilisées.

Mémento

Propriétés de mise en forme du texte

Je résume ici la plupart des propriétés de mise en forme du texte.

Qu’est-ce que la mise en forme de texte ? C’est tout ce qui touche à la présentation du texte proprement dit : le gras, l’italique, le souligné, la police, l’alignement, etc.

Propriété	Valeurs (exemples)	Description
`font-family`	police1, police2, police3, serif, sans-serif, monospace	Nom de police
`@font-face`	Nom et source de la police	Police personnalisée
`font-size`	1.3em, 16px, 120%…	Taille du texte
`font-weight`	bold, normal	Gras
`font-style`	italic, oblique, normal	Italique
`text-decoration`	underline, overline, line-through, blink, none	Soulignement, ligne au-dessus, barré ou clignotant
`font-variant`	small-caps, normal	Petites capitales
`text-transform`	capitalize, lowercase, uppercase	Capitales
`font`	–	Super propriété de police. Combine : `font-weight`, `font-style`, `font-size`, `font-variant`, `font-family`.
`text-align`	left, center, right, justify	Alignement horizontal
`vertical-align`	baseline, middle, sub, super, top, bottom	Alignement vertical (cellules de tableau ou éléments `inline-block` uniquement)
`line-height`	18px, 120%, normal…	Hauteur de ligne
`text-indent`	25px	Alinéa
`white-space`	pre, nowrap, normal	Césure
`word-wrap`	break-word, normal	Césure forcée
`text-shadow`	5px 5px 2px blue (horizontale, verticale, fondu, couleur)	Ombre de texte

Propriétés de couleur et de fond

Propriété	Valeurs (exemples)	Description
`color`	nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20…	Couleur du texte
`background-color`	Identique à color	Couleur de fond
`background-image`	url(‘image.png’)	Image de fond
`background-attachment`	fixed, scroll	Fond fixe
`background-repeat`	repeat-x, repeat-y, no-repeat, repeat	Répétition du fond
`background-position`	(x y), top, center, bottom, left, right	Position du fond
`background`	–	Super propriété du fond. Combine : `background-image`, `background-repeat`, `background-attachment`, `background-position`
`opacity`	0.5	Transparence

Propriétés des boîtes

Propriété	Valeurs (exemples)	Description
`width`	150px, 80%…	Largeur
`height`	150px, 80%…	Hauteur
`min-width`	150px, 80%…	Largeur minimale
`max-width`	150px, 80%…	Largeur maximale
`min-height`	150px, 80%…	Hauteur minimale
`max-height`	150px, 80%…	Hauteur maximale
`margin-top`	23px	Marge en haut
`margin-left`	23px	Marge à gauche
`margin-right`	23px	Marge à droite
`margin-bottom`	23px	Marge en bas
`margin`	23px 5px 23px 5px (haut, droite, bas, gauche)	Super-propriété de marge. Combine : `margin-top`, `margin-right`, `margin-bottom`, `margin-left`.
`padding-left`	23px	Marge intérieure à gauche
`padding-right`	23px	Marge intérieure à droite
`padding-bottom`	23px	Marge intérieure en bas
`padding-top`	23px	Marge intérieure en haut
`padding`	23px 5px 23px 5px (haut, droite, bas, gauche)	Super-propriété de marge intérieure. Combine : `padding-top`, `padding-right`, `padding-bottom`, `padding-left`.
`border-width`	3px	Épaisseur de bordure
`border-color`	nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20…	Couleur de bordure
`border-style`	solid, dotted, dashed, double, groove, ridge, inset, outset	Type de bordure
`border`	3px solid black	Super-propriété de bordure. Combine `border-width`, `border-color`, `border-style`. Existe aussi en version `border-top`, `border-right`, `border-bottom`, `border-left`.
`border-radius`	5px	Bordure arrondie
`box-shadow`	6px 6px 0px black (horizontale, verticale, fondu, couleur)	Ombre de boîte

Propriétés de positionnement et d’affichage

Propriété	Valeurs (exemples)	Description
`display`	block, inline, inline-block, table, table-cell, none…	Type d’élément (`block`, `inline`, `inline-block`, `none`…)
`visibility`	visible, hidden	Visibilité
`clip`	rect (0px, 60px, 30px, 0px) rect (haut, droite, bas, gauche)	Affichage d’une partie de l’élément
`overflow`	auto, scroll, visible, hidden	Comportement en cas de dépassement
`float`	left, right, none	Flottant
`clear`	left, right, both, none	Arrêt d’un flottant
`position`	relative, absolute, static	Positionnement
`top`	20px	Position par rapport au haut
`bottom`	20px	Position par rapport au bas
`left`	20px	Position par rapport à la gauche
`right`	20px	Position par rapport à la droite
`z-index`	10	Ordre d’affichage en cas de superposition. La plus grande valeur est affichée par-dessus les autres.

Propriétés des listes

Propriété	Valeurs (exemples)	Description
`list-style-type`	disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none	Type de liste
`list-style-position`	inside, outside	Position en retrait
`list-style-image`	url(‘puce.png’)	Puce personnalisée
`list-style`	–	Super-propriété de liste. Combine `list-style-type`, `list-style-position`, `list-style-image`.

Propriétés des tableaux

Propriété	Valeurs (exemples)	Description
`border-collapse`	collapse, separate	Fusion des bordures
`empty-cells`	hide, show	Affichage des cellules vides
`caption-side`	bottom, top	Position du titre du tableau

Autres propriétés

Propriété	Valeurs (exemple)	Description
`cursor`	crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto…	Curseur de souris