Propriétés CSS - Style
Propriétés de mise en forme du texte
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
| font-family | police1, police2, police3, serif, sans-serif, monospace | Nom de police |
| font-size | 1.3em, 16px, 120%... | Taille du texte |
| font-weight | bold | Gras |
| font-style | italic | Italique |
| 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 |
Propriétés de couleur
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
| color | nom, rgb(rouge, vert, bleu), rgba(rouge, vert, bleu, transparence), #CF1A20... | Couleur du texte |
Propriétés de fond
| Propriété | Valeurs (exemples) | Description |
|---|---|---|
| background-color | Identique à color | Couleur de fond |
| background-image | url('image.png') | Image de fond |
| 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-position |
| opacity | 0.5 | Transparence |
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 |
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, none... | Type d'élément (block, inline, inline-block, none…) |
| overflow | auto, scroll, visible, hidden | Comportement en cas de dépassement |
| float | left, right, none | Flottant : rend l'élément flottant, il sort du flux. |
| clear | left, right, both, none | Arrêt d'un flottant |
| position | static, relative, absolute, fixed, sticky | 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 |
Pratique
https://www.w3schools.com/css/exercise.asp
Liens utiles
font family
https://www.w3schools.com/css/css_font.asp
color name
https://www.w3schools.com/colors/colors_names.asp
https://www.w3schools.com/html/html_colors.asp
border
https://www.w3schools.com/css/css_border.asp
https://www.w3schools.com/css/css_border_rounded.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_border-style
Pour aller + loin (niveau avancé)
selector
https://www.w3schools.com/cssref/css_selectors.asp
https://www.w3schools.com/cssref/trysel.asp
pseudo class:hover
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_transparency