Cette page est une liste non exhaustive des propriétés CSS qui existent en CSS3.
Le but ici, n’est pas de faire la liste de toutes les propriétés CSS qui peuvent exister : il y en a vraiment trop 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é | 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 |