Les feuilles de style

Dernière modification le mardi 14 octobre 2008 à 17:40 par Jean-François Pillou.

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é
Cet article est régulièrement mis à jour par des experts sous la
direction de Jean-François Pillou, fondateur de CommentCaMarche.
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.