[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Officiels > Site Web > Apprenez à créer votre site web ! > Annexes > Liste des propriétés CSS > Lecture du tutoriel

Liste des propriétés CSS

Cette page est une liste non exhaustive des propriétés CSS qui existent.

Le but est de réunir sur une même page un maximum de propriétés CSS. Pour la plupart, ce sont des propriétés que nous avons vues dans le cours, mais vous trouverez aussi sûrement quelques nouvelles propriétés que nous n'avons pas eu le temps d'aborder. Ce sont généralement des propriétés plus rares mais faciles à utiliser.

La liste est non exhaustive car mon but n'est pas de faire la liste de toutes les propriétés CSS qui peuvent exister. Il y en a trop, et certaines sont très rarement utilisées.
Je préfère donc me concentrer sur les principales propriétés, ce qui en fait déjà un petit paquet quand même

Sommaire du chapitre :

Propriétés de formatage de texte
Propriétés de couleur et de fond
Propriétés des boîtes
Propriétés de positionnement et d'affichage
Propriétés des listes
Propriétés des tableaux
Autres propriétés

Propriétés de formatage de texte

Je résume ici la plupart des propriétés de formatage de texte.

Qu'est-ce que le formatage de texte ? C'est tout ce qui consiste à mettre en forme le texte : mettre en gras, italique, souligné, changer la police, l'alignement etc...

Police, taille et décorations

Type

Nom

Valeurs possibles

Nom de police

font-family

Indiquer les noms de polices possibles par ordre de préférence :

Code : CSS

1	font-family:police1, police2, police3;

Si le visiteur a la police 1, il l'utilisera. Sinon, il regarde s'il a la police 2, puis la police 3 etc.
Utilisez des guillemets si le nom de la police comporte des espaces. Essayez de toujours mettre comme dernière police possible "serif" ou "sans-serif".

Code : CSS

1	font-family: "Arial Black", Arial, Verdana, serif;

Taille du texte

font-size

Indiquez la taille du texte.
Plusieurs unités sont possibles :

px (pixels)
% (pourcentage, 100% = normal)
em (taille relative, 1.0 = normal)
ex (taille relative à la hauteur de la lettre "x". 1.0 = normal)
nom de taille :
- xx-small : très très petit
- x-small : très petit
- small : petit
- medium : moyen
- large : grand
- x-large : très grand
- xx-large : très très grand

Gras

font-weight

bold : gras
bolder : plus gras
lighter : plus fin
normal : pas gras (par défaut)

Italique

font-style

italic : italique
oblique : autre façon de mettre en italique
normal : normal (par défaut)

Décoration

text-decoration

underline : souligné
overline : ligne au-dessus
line-through : barré
blink : clignotant
none : normal (par défaut)

Petites capitales

font-variant

small-caps : petites capitales
normal : normal (par défaut)

Capitales

text-transform

uppercase : tout mettre en majuscules
lowercase : tout mettre en minuscules
capitalize : début des mots en majuscules
none : normal (par défaut)

Méga-propriété de police

font

Indiquez dans n'importe quel ordre des valeurs possibles pour font-weight, font-style, font-size, font-variant, font-family.
Attention exception : le nom de la police (font-family) doit être placé en dernier dans la liste dans tous les cas.
Vous n'êtes pas obligés de mettre une valeur de chacune de ces propriétés.

Exemple :

Code : CSS

1	font: bold, 16px, Arial;

Cela mettra votre texte en gras, 16 pixels, Arial.

Alignement

Type	Propriété	Valeurs possibles
Alignement horizontal	text-align	left : à gauche (par défaut) center : centré right : à droite justify : texte justifié (prend toute la largeur de la page)
Alignement vertical	vertical-align	A utiliser dans des cellules de tableau, ou dans des éléments inline eux-mêmes contenus dans un élément inline. top : en haut middle : au milieu bottom : en bas
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, à moins qu'une balise xHTML comme <br /> ne soit présente. pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise xHTML <pre>)

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 tapant 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 fonctionnement que color. Cela définit cette fois 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)
Code : CSS

1 2	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

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

Position du fond

background-position

2 façons de faire :

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

Code : CSS
1
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

Code : CSS

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

Méga-propriété de fond

background

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)

Code : CSS

1 2	/* Le fond fond.png reste affiché en haut à droite de l'écran et n'est pas répété. */ background:url("images/fond.png") no-repeat fixed top right;

Propriétés des boîtes

Dimensions

Type	Propriété	Valeurs possibles
Largeur	width	Valeur en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur)
Hauteur	height	Idem
Largeur minimale	min-width	Indiquer une valeur, en pixels par exemple.
Largeur maximale	max-width	Idem
Hauteur minimale	min-height	Idem
Hauteur maximale	max-height	Idem

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

Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

1 valeur : ce sera 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.

Par exemple, si je mets 2 valeurs :

Code : CSS

1	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	padding-top	Indiquer une valeur comme 20px, 1.5em...
Marge intérieure à gauche	padding-left	Idem
Marge intérieure à droite	padding-right	Idem
Marge intérieure en bas	padding-bottom	Idem
Méga-propriété de marge intérieure	padding	Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change : 1 valeur : ce sera 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.

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.
L'ordre n'a pas d'importance. Exemple :

Code : CSS

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

Bordure en haut

border-top

Idem

Bordure à droite

border-right

Idem

Bordure en bas

border-bottom

Idem

Méga-propriété de bordure

border

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

Propriétés de positionnement et d'affichage

Affichage

Type

Propriété

Valeurs possibles

Type d'élément

display

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>)

Affichage

visibility

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.

Afficher seulement une partie

clip

Indiquer 4 valeurs comme ceci :

Code : CSS

1	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, droite, bas et gauche du rectangle.

Limiter les dimensions

overflow

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".

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	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)
Type de positionnement	position	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... A utiliser pour un positionnement absolu, fixe ou relatif.
Position par rapport au bas	bottom	Idem
Position par rapport à gauche	left	Idem
Position par rapport à droite	right	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 vous avez 2 éléments positionnés en absolus avec un z-index de 10 pour l'un et de 20 pour l'autre, c'est celui qui a un z-index de 20 qui sera affiché par-dessus.

Propriétés des listes

Type

Propriété

Valeurs possibles

Type de liste

list-style-type

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.
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. Exemple :

Code : CSS

1	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.
Exemple :

Code : CSS

1	list-style: inside square;

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)
progress : curseur utilisé pour indiquer une tâche de fond (curseur avec 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. Exemple :

Code : CSS

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

Vous devez utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani

Pfiou !

Recenser les propriétés CSS n'est ni reposant, ni amusant je vous l'assure !
Les plus experts d'entre vous auront remarqué que je n'ai pas mis toutes les propriétés CSS, comme je l'ai dit au début. En effet, mon but n'était pas de faire la liste complète mais plutôt de vous fournir un support lorsque vous codez en CSS.

J'ai donc conservé les propriétés CSS qui me paraissaient les plus souvent utilisées.

Si je trouve le temps, ou plutôt le courage, de rajouter de nouvelles propriétés CSS dans le futur, j'éditerai ce chapitre. Toutefois, je pense que vous aurez déjà de quoi faire avec ce qui est déjà là