MEMENTO DES BALISES CSS3

MEMENTO DES BALISES CSS3

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.

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 boites

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

Le PDF https://drive.google.com/open?id=0B1DXt8-IXQV3Z1RmRHFkc1g4UlU

Source: openclassroom.com