Les feuilles de style
Propriétés de polices
| Propriété | Valeur | Description |
|---|---|---|
| font-family | Police précise (Arial, Times, Verdana)
Famille (serif, sans-serif, fantasy, monospace, cursive) |
Définit un ou plusieurs nom de polices ou de familles de polices. Si plusieurs polices sont définies, la première trouvée sur le système de l'utilisateur sera utilisée. |
| font-style | normal, italic, oblique | Définit le style d'écriture |
| font-weight | lighter, normal, bold ou bolder.
valeur numérique (100, 200, 300, 400, 500, 600, 700, 800, 900) |
Définit la graisse (épaisseur) de la police |
| font-size | xx-small, x-small, small, medium, large, x-large, xx-large
taille en points (pt), cm, % |
Définit la taille de la police |
| font-variant | normal, small-caps | Définit une variante (petites majuscules) |
| font | font: Verdana, Arial, bold italic 8px; | Raccourci permettant de mettre toutes les propriétés |
Texte et paragraphes
| Propriété | Valeur | Description |
|---|---|---|
| color | "#RRGGBB" | Définit la couleur du texte |
| line-height | line-height: 12pt; | Définit l'interligne |
| text-align | left, center, right ou justify | Définit l'alignement du texte |
| text-indent | text-indent: 5px; | Définit l'indentation (retrait du texte) |
| text-decoration | blink (clignotement), underline (souligné), line-through (barré), overline (surligné) ou none (aucune décoration) | Définit une décoration |
| text-shadow | text-shadow: 1px 2px 4px black; | Définit l'ombrage texte, respectivement décalage à droite, en bas, rayon de l'effet de flou et couleur. |
| text-transform | uppercase (majuscule), lowercase (minuscule) ou capitalize (première lettre en majuscule) | Définit la casse du texte |
| white-space | normal (passage à la ligne automatique), pre (idem saisie), nowrap (pas de passage à la ligne automatique) | Césure |
| word-spacing | word-spacing: 6px; | Définit l'espacement des mots |
| width | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Définit la longueur d'un élément de texte ou d'une image |
| height | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Définit la hauteur d'un élément de texte ou d'une image |
Couleurs et arrière plan
| Propriété | Valeur | Description |
|---|---|---|
| background-color | "#RRGGBB" | Définit la couleur d'arrière plan |
| background-image | url(http://url) | Définit l'image d'arrière-plan |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | Définit la façon de répéter l'arrière-plan |
| background-attachment | scroll, fixed | Spécifie si l'image reste fixe avec les déplacements de l'écran |
| background-position | top, middle, bottom, left, center ou right | Position de l'image par rapport au coin supérieur gauche |
| background | background: url(test.jpg) fixed repeat; | Raccourci pour les propriétés d'arrière-plan |
Marges
| Propriété | Exemple | Description |
|---|---|---|
| margin-top | margin-top: 5px; | Valeur de la marge supérieure |
| margin-right | margin-right: 0.5em; | Valeur de la marge de droite |
| margin-bottom | margin-bottom: 2pt; | Valeur de la marge inférieure |
| margin-left | margin-left: 0; | Valeur de la marge de gauche |
| margin | margin: 5px 0.5em 2pt 0; | Raccourci pour les propriétés de marge |
Bordures
| Propriété | Valeur | Description |
|---|---|---|
| border[-top -left -bottom -right]-width | En points (pt), pouces (in), en cm, en pixels (px), ou en % | Epaisseur de la bordure [supérieure, de gauche, inférieure ou de droite] |
| border[-top -left -bottom -right]-color | border-left-color: #RRGGBB; | Couleur de la bordure [supérieure, de gauche, inférieure ou de droite] |
| border[-top -left -bottom -right]-style | solid (pleine), dashed (en tirets), dotted (en pointillés), double (double et remplie) ou ridge (en 3D) | Style de la bordure [supérieure, de gauche, inférieure ou de droite] |
| border-collapse | collapse separate |
Effet » 3D » ou non |
| border | border: 1px 0 0 2px dotted green; | Raccourci global les propriétés de bordure |
Espaces intérieurs
| Propriété | Valeur | Description |
|---|---|---|
| padding-top | padding-top: 3px; | Espace intérieur entre l'élément et la bordure supérieure |
| padding-right | padding-right: 0.25em; | Espace intérieur entre l'élément et la bordure droite |
| padding-bottom | padding-bottom: 0; | Espace intérieur entre l'élément et la bordure inférieure |
| padding-left | padding-left: 2pt; | Espace intérieur entre l'élément et la bordure gauche |
| padding | padding: 3px 0.25em 0 2pt; | Raccourci vers l'ensemble des propriétés d'espace intérieur |
Tableaux
| Propriété | Valeur | Description |
|---|---|---|
| border-collapse | separate ou collapse | Fusion des bordures des cellules (collapse) ou non (separate) |
| border-spacing | border-spacing: 4px; | Espacement des cellules |
| caption-side | top, bottom, left ou right | Positionnement de la légende du tableau |
| empty-cells | show ou collapse | Affichae (show) ou masquage (collapse) des cellules vides |
| table-layout | fixed (indépendamment du contenu des cellules) ou auto (selon le contenu des cellules) | Largeur fixe ou variable |
| speak-headers | alwats (systématiquement avant chaque cellule) ou once (une seule fois) | Propriété pour sourds et malentendants indiquant le comportement lors de la lecture des cellules d'en-tête d'un tableau |
Listes
| Propriété | Valeur | Description |
|---|---|---|
| list-style-type | decimal, upper-roman, lower-latin, disc, circle, square ou none | Type de puces et de numérotation |
| list-style-image | list-style-image: url(image.png); | Permet de personnaliser les puces avec une image |
| list-style-position | inside ou outside | Spécifie le retrait des puces |
| list-style | Raccourci vers les propriétés de liste |
Mise en page
| Propriété | Valeur | Description |
|---|---|---|
| @page | @page(size: portrait) | Définit la mise en page de l'impression |
| size | auto, landscape ou portrait | Format de l'impression |
| margin-top | margin-top: 3 cm; | Marge supérieure |
| margin-right | margin-right: 1.5 cm; | Marge de droite |
| margin-bottom | margin-right: 1 cm; | Marge inférieure |
| margin-left | margin-left: 2 cm; | Marge de gauche |
| marks | crop (traits de coupe), cross (repère de montage), none (pas de marque) | Traits de coupe et repères de montage |
| page-break-before | Always, avoid | Force le saut de page avant un élément |
| page-break-after | Always, avoid | Force le saut de page après un élément |
| orphans | orphans: 2; | Evite les lignes orphelines en fin de page. Définit le nombre de ligne minimal à partir un renvoi en page suivante est effectué |
| widows | widows: 1; | Evite les lignes veuves en début de page. Définit le nombre de ligne minimal à partir un renvoi en page précédente est effectué |
Ce document intitulé « Les feuilles de style » issu de Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
