Propriétés de style

Le tableau suivant énumère les propriétés de style qui peuvent être utilisées.

Type

Propriété

Valeur

Description

Police

font-family

Police précise (Arial, Times, Verdana ...)
Famille (serif, fantasy, monospace)

Définit un nom de police ou une famille

font-style

normal, italic, oblic

Définit le style d'écriture

font-weight

normal, bold, light, bolder, lighter ou valeur numérique

Définit l'é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

normale, small-caps

Définit une variante

Font

{font: bold italic}

Raccourci permettant de mettre toutes les propriétés

Style

text-align

left, center, right

Définit l'alignement du texte

text-indent

en pouces (in), en cm, ou en %

Définit un retrait

text-decoration

blink, underline, line-through, overline ou none (clignotant, souligné, barré, surligné ou aucune)

Définit une décoration

text-transform

uppercase, lowercase, capitalize (majuscule, minuscule, première lettre en minuscules)

Définit la casse du texte

Color

"#RRGGBB"

Définit la couleur du texte

word-spacing

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Définit l'espace entre les mots

line-height

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Définit l'interligne

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

white-space

normal, pre, nowrap

Espacement ou blanc

Arrière-plans

background-color

"#RRGGBB"

Définit la couleur du fond

background-image

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, center, bottom, left, center ou right
- En points (pt), pouces (in), en cm, en pixels (px), ou en %

Position de l'image par rapport au coin supérieur gauche

background

{background: test.jpg fixed repeat}

Raccourci

Marges

margin-top

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Valeur de la marge supérieure

margin-right

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Valeur de la marge de droite

margin-bottom

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Valeur de la marge inférieure

margin-left

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Valeur de la marge de gauche

margin

 

Raccourci

Bordures

border-top-width

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Epaisseur du bord supérieur

border-right-width

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Epaisseur du bord droit

border-bottom-width

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Epaisseur du bord inférieur

border-left-width

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Epaisseur du bord de gauche

border-width

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Raccourci

border-color

"#RRGGBB"

Couleur de la bordure

border

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Raccourci

padding-top

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Ecartement entre l'élément et le bord supérieur

padding-right

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Ecartement entre l'élément et le bord droit

padding-bottom

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Ecartement entre l'élément et le bord inférieur

padding-left

En points (pt), pouces (in), en cm, en pixels (px), ou en %

Ecartement entre l'élément et le bord gauche

padding

 

Raccourci t

Listes

list-style-type

disc, circle ou square

Type de puces et de numérotation

list-style-image

URL

Permet de remplacer les puces par une image

list-style-position

inside ou outside

Spécifie si les puces sont à l'intérieur ou à l'extérieur du texte

list-style

 

Raccourci