Ceci est une ancienne révision du document !
CSS
CSS = Cascading Style Sheets = Feuille de style en cascade.
Fichier qui permet de paramétrer la mise en forme d'un fichier HTML.
| Propriété | Valeurs | 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, uupercase | Capitales |
| font | - | Super propriété de police, bombine: 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é de couleur et de fond
| Propriété | Valeurs | Description |
| color | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleau,transparence),#CF1A20 …) | couleur du texte |
| background-color | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleau,transparence),#CF1A20 …) | 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 | Description |
| width | 150px,80% | Largeur |
| height | 150px,80% | Hauteur |
| min-widht | 150px,80% | Largeur minimale |
| max-widht | 150px,80% | Largeur maximale |
| min-height | 150px,80% | Hauteur minimale |
| max-height | 150px,80% | Hauteur maximale |
| margin-top | 23px | Marge en haut (écart extérieur) |
| margin-left | 23px | Marge à gauche (écart extérieur) |
| margin-right | 23px | Marge à droite (écart extérieur) |
| margin-bottom | 23px | Marge en bas (écart extérieur) |
| margin | 23px, 5px 23px 5px (haut, droite, bas, gauche | Super-propriété de marge. |
| padding-left | 23px | Marge intérieur gauche |
| padding-right | 23px | Marge intérieur droite |
| padding-bottom | 23px | Marge intérieur bas |
| padding-top | 23px | Marge intérieur haut |
| padding | 23px 5px 23px 5px (haut, droite, bas, gauche) | Super-propriété de marge intérieure. |
| border-width | 3px | Epaisseur de bordure |
| border-color | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence),#CF1A20… | Couleur bordure |
| border-style | solide, dotted, dashed, double, groove, ridghe, inset, outset | Type de bordure |
| border | 3px solid black | Super propriété de bodure. On peut également utiliser border-top,border-right, border-bottom, border-left |
| border-radius | 5px | Bordure arrondie |
| box-shadow | 6px 6px 0px black | Ombre de boîte |
Propriétés de positionnement et d'affichage
| Propriété | Valeurs | 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 d'é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 | 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 | 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 | Description |
| cursor | crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto… | Curseur de souris. |
