Cheatsheet CSS3

Propriétés de texte

Propriété	Valeurs (exemples)	Description
`font-family`	police1, police2, .., serif, sans-serif, monospace	Nom de police
`@font-face`	Nom et source de la police	Police personnalisée
`font-size`	1em, 16px, 20%...	Taille du texte
`font-weight`	bold, normal	Gras
`font-style`	italic, oblique, normal	Italique
`text-decoration`	none, underline, overline, line-through, blink	Soulignement, ligne au-dessus, barré ou clignotant
`font-variant`	small-caps, normal	Petites capitales
`text-transform`	capitalize, lower / uppercase	Capitales
`font`	-	prop. combinée : `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	Align. vertical : cellules de tableau ou éléments `inline-block`
`line-height`	18px, 120%...	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 (horiz., vert., fondu, couleur)	Ombre de texte

Propriétés des boîtes

Propriété	Valeurs (exemples)	Description
`width`	150px, 80%...	Largeur
`height`	150px, 80%...	Hauteur
`min-width` `max-width` `min-height` `max-height`	150px, 80%...	Largeur minimale Largeur maximale Hauteur minimale Hauteur maximale
`margin-` `top` `right` `bottom` `left`	23px, 5%	Marge en haut à droite en bas à gauche
`margin`	23px 5px 23px 5px (haut, droite, bas, gauche)	Super-propriété de marge.
`padding-` `top` `right` `bottom` `left`	23px, 5%	Marge intérieure en haut à droite en bas à gauche
`padding`	23px 5px 23px 5px (haut, droite, bas, gauche)	Super-propriété de marge intérieure.
`border-width`	3px	Épaisseur de bordure
`border-color`	nom, rgb(*), rgba(rgb,opacity), #AB0	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.
`border-radius`	5px	Bordure arrondie
`box-shadow`	6px 6px 0px black ( horizontale, verticale, fondu, couleur)	Ombre de boîte

Propriétés de couleur et de fond

Propriété	Valeurs (exemples)	Description
`color`	nom, rgb, rgba(rgb,opacity), #A0F	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`	-	prop. combinées : `background-image`, `repeat`, `attachment`, `position`
`opacity`	0.5	Transparence

Propriétés d'affichage

Propriété	Valeurs (exemples)	Description
`display`	block, inline, inline-block, table, table-cell, none...	Type d'élément
`visibility`	visible, hidden	Visibilité
`clip`	rect (0, 60px, 30px, 0) rect (haut, droite, bas, gauche)	Affichage d'une partie de l'élément
`overflow`	auto, scroll, visible, hidden	Gestion du dépassement
`float`	left, right, none	Flottant
`clear`	left, right, both, none	Arrêt d'un flottant
`position`	relative, absolute, static	Positionnement
`top` `bottom` `left` `right`	20px, 10%	Position / : haut bas gauche droite
`z-index`	10	Ordre d'affichage sur axe Z.

Propriétés des listes

Propriété	Valeurs (exemples)	Description
`list-style-type`	none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha	Style de la puce
`list-style-position`	inside, outside	Position en retrait
`list-style-image`	url('puce.png')	Puce personnalisée
`list-style`	-	prop. combinée : `list-style -type`, `position,`, `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