Liste des propriétés CSS

Hauteur de ligne

line-height

Indiquer une valeur en pixels (px) ou en pourcentage (%)

Alinéa

text-indent

Indiquez une valeur en pixels (px) pour définir l'alinéa de vos paragraphes

Vos paragraphes commenceront avec le retrait que vous avez indiqué

Césure

white-space

normal : le passage à la ligne est automatique (par défaut)

nowrap : pas de passage à la ligne automatique, sauf si une balise xHTML comme <br /> est présente

pre : le passage à la ligne se fait comme le texte saisi dans le code source (comme balise xHTML <pre>)

2/9

Propriétés de couleur et de fond

Couleur

Type

Propriété

Valeurs possibles

Couleur de texte

color

Indiquer une couleur avec l'une des méthodes suivantes :

• En indiquant le nom de la couleur en anglais (black, blue, green, white, red...)
• En indiquant la couleur en hexadécimal (#CC48A1)
• En indiquant la couleur en RGB : rgb (128, 255, 0)

Couleur de fond

background-color

Même chose que pour color, pour la couleur de fond du texte

Image de fond

Type

Propriété

Valeurs possibles

Image de fond

background-image

Indiquer l'url de l'image (notation absolue ou relative)

background-image:url("images/fond.png"); / Notation relative /

background-image:url("http://www.monsite.com/images/fond.png"); / Notation absolue /

Fond fixé

background-attachment

fixed : le fond reste fixe quand on descend plus bas sur la page

scroll : le fond défile avec le texte (par défaut)

Répétition du fond

background-repeat

Position du fond

background-position

Méga-propriété de fond background

repeat : le fond se répète (par défaut)

repeat-x : le fond ne se répète que sur une ligne, horizontalement

repeat-y : le fond ne se répète que sur une colonne, verticalement

no-repeat : le fond ne se répète pas, il n'est affiché qu'une fois

2 façons de faire :

• En notant une distance en px ou %, par rapport au coin en haut à gauche

background-position:50px 200px; / 50 px à droite, 200px en bas /

• En utilisant des valeurs prédéfinies, une pour la verticale et une pour l'horizontale :

top : en haut, verticalement

center : au milieu, verticalement

bottom : en bas, verticalement

left : à gauche, horizontalement

center : au centre, horizontalement

right : à droite, horizontalement

background-position : bottom right; / en bas à droite /

Indiquer une ou plusieurs valeurs issues des propriétés background-image, background-repeat,

background-attachment, background-position

L'ordre des valeurs n'a pas d'importance et vous n'êtes pas obligés de mettre toutes les valeurs de ces

propriétés (au moins une suffit)

background:url("images/fond.png") no-repeat fixed top right;

/ Le fond fond.png reste affiché en haut à droite de l'écran et n'est pas répété /

3/9

Propriétés des boîtes

Dimensions

Type

Propriété

Valeurs possibles

Largeur

Hauteur

width

height

Valeur en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur)

Idem

Largeur minimale

min-width

Indiquer une valeur, en pixels par exemple

Largeur maximale

max-width

Hauteur minimale

min-height

Hauteur maximale

max-height

Idem

Idem

Idem

Bordures

Type

Propriété

Valeurs possibles

Epaisseur de la bordure

border-width

Indiquer une valeur en px

Couleur de la bordure

border-color

Indiquer une valeur de couleur

Type de bordure

border-style

none : pas de bordure (par défaut)

hidden : bordure cachée

solid : ligne pleine

double : ligne double (nécessite une taille de bordure de 3px minimum)

dashed : en tirets

dotted : en pointillés

inset : effet 3D "enfoncé"

outset : effet 3D "surélevé"

ridge : autre effet 3D

Bordure à gauche

border-left

Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche

border-left: 2px inset blue; / Bordure bleue de 2px avec effet 3D "enfoncé" /

Bordure en haut

Bordure à droite

border-top

border-right

Bordure en bas

border-bottom

Idem

Idem

Idem

Méga-propriété de bordure

border

Indiquer l'apparence des bordures en haut, à droite, en bas et à gauche.

4/9

Marges extérieures

Type

Propriété

Valeurs possibles

Marge en haut

margin-top

Indiquer une valeur comme 20px, 1.5em...

Marge à gauche

margin-left

Idem

Marge à droite

margin-right

Idem

Marge en bas

margin-bottom Idem

Méga-propriété de marge margin

Indiquer de 1 à 4 valeurs à la suite:

• 1 valeur : c'est la marge pour le haut, le bas, la gauche et la droite
• 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la

droite

• 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la

troisième à la marge du bas

• 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche

Exemple, avec 2 valeurs :

margin:20px 5px; / 20px de marge en haut et en bas, 5px à gauche et à droite /

Marges intérieures

Type

Propriété

Valeurs possibles

Marge intérieure en haut

Marge intérieure à gauche

padding-top

padding-left

Marge intérieure à droite

padding-right

Marge intérieure en bas

padding-bottom

Indiquer une valeur comme 20px, 1.5em...

Idem

Idem

Idem

Méga-propriété de marge intérieure

padding

Indiquer de 1 à 4 valeurs à la suite:

• 1 valeur : c'est la marge pour le haut, le bas, la gauche et la droite
• 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour

la gauche et la droite

• 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à

gauche et à droite, la troisième à la marge du bas

• 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche

5/9

Propriétés de positionnement et d'affichage

Affichage

Type

Propriété

Valeurs possibles

Type d'élément

display

Affichage

visibility

Afficher seulement une partie clip

Limiter les dimensions

overflow

none : l'élément ne sera pas affiché

block : l'élément devient de type "block" (bloc, comme <p>)

inline : l'élément devient de type "inline" (en ligne, comme <strong>)

list-item : l'élément devient de type "élément de liste à puce" (comme <li>)

hidden : masqué

visible : visible (par défaut)

display:none; fait complètement disparaître l'élément, tandis que visibility:hidden; masque l'élément,

qui continue quand même à prendre de la place sur l'écran

Indiquer 4 valeurs comme ceci :

clip: rect(valeur1, valeur2, valeur3, valeur4);

Cela permet de n'afficher qu'une partie d'un élément

rect() permet d'indiquer les coordonnées du rectangle qui sera affiché

Les valeurs 1 à 4 correspondent respectivement aux coins haut, droit, bas et gauche du rectangle

visible : tout l'élément sera affiché (par défaut)

hidden : l'élément sera coupé s'il dépasse les limites définies par height et width

On ne pourra pas voir la partie du texte coupée

scroll : tout comme hidden, l'élément sera coupé s'il dépasse les limites

Toutefois, cette fois le navigateur ajoutera des barres de défilement pour qu'on puisse voir la suite du

texte

auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas, en fonction des cas Bien

souvent, utiliser cette valeur revient à utiliser la valeur "scroll"

6/9

Positionnement

Type

Propriété

Valeurs possibles

Flottant

float

left : flottant à gauche

right : flottant à droite

none : pas de flottant (par défaut)

Stopper un flottant

clear

Type de positionnement

position

left : supprime l'effet d'un flottant à gauche précédent

right : supprime l'effet d'un flottant à droite précédent

both : supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite

none : pas de suppression de l'effet du flottant (par défaut)

absolute : position absolue par rapport au coin en haut à gauche

fixed : position fixe (fonctionne comme la position absolue)

L'élément reste à sa position même quand on descend plus bas dans la page

relative : position relative, par rapport à la position "normale" de l'élément

static : positionnement normal (par défaut)

Position par rapport au haut

top

Valeur en px, %, em... à utiliser pour un positionnement absolu, fixe ou relatif

Position par rapport au bas

bottom

Position par rapport à gauche

left

Position par rapport à droite

right

Idem

Idem

Idem

Ordre d'affichage

z-index

En cas de positionnement absolu par exemple, si 2 éléments se chevauchent, z-index permet d'indiquer

quel élément doit être affiché au-dessus de l'autre

Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant

Par exemple, si 2 éléments sont positionnés en absolu avec un z-index de 10 pour l'un et de 20 pour

l'autre, celui qui a un z-index de 20 est affiché par-dessus

7/9

Propriétés des listes

Type

Propriété

Valeurs possibles

• Pour les listes non ordonnées (<ul>) :

• disc : un disque noir (par défaut)

•

circle : un cercle

square : un carré

•

• none : aucune puce ne sera utilisée

Type de liste

list-style-type

• Pour les listes ordonnées (<ol>) :

• decimal : des nombres 1, 2, 3, 4, 5... (par défaut)

• decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...)

Ne fonctionne pas sur Internet Explorer

• upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...)

lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)

•

• upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)

lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)

•

lower-greek : numérotation grecque

Ne fonctionne pas sur Internet Explorer

•

Position en retrait

list-style-position

inside : sans retrait

outside : avec retrait (par défaut)

Puce personnalisée

list-style-image

Indiquer l'url de l'image qui servira de puce

list-style-image: url("images/puce.png");

Méga-propriété de liste

list-style

Vous pouvez réunir les valeurs de list-style-type, list-style-position et list-style-image. Vous n'êtes pas

obligés de mettre toutes les valeurs, et l'ordre n'a pas d'importance.

list-style: inside square;

8/9

Propriétés des tableaux

Type

Propriété

Valeurs possibles

Type de bordure

border-collapse

collapse : les bordures du tableau et des cellules sont mélangées

separate : les bordures du tableau et des cellules sont séparées (par défaut)

Cellules vides

empty-cells

show : les bordures des cellules vides sont affichées

collapse : les cellules vides sont masquées (par défaut)

Position du titre

caption-side

Indique la position du titre du tableau, défini via la balise <caption>

top : en haut du tableau

bottom : en bas du tableau

left : à gauche du tableau

right : à droite du tableau

Autres propriétés

Type

Propriété

Valeurs possibles

Curseur de

souris

cursor

auto : curseur automatique (par défaut)

default : curseur standard

pointer : curseur en forme de main, comme quand on pointe sur un lien

text : curseur utilisé quand on pointe sur du texte

wait : curseur utilisé pour indiquer une attente (sablier)

help : curseur en forme de point d'interrogation, indiquant une aide

move : curseur en forme de croix, indiquant un déplacement possible

n-resize : flèche vers le nord

ne-resize : flèche vers le nord-est

e-resize : flèche vers l'est

se-resize : flèche vers le sud-est

s-resize : flèche vers le sud

sw-resize : flèche vers le sud-ouest

w-resize : flèche vers l'ouest

nw-resize : flèche vers le nord-ouest

url : curseur personnalisé, de type .cur ou .ani

cursor: url("images/curseur.cur");

Extrait du Site du Zéro http://www.siteduzero.com

9/9