Page ouverte en avril 2006. Mise à jour du 24 mars 2010
Liste des propriétés CSS
Rappel sur la bonne utilisation du CSS dans XHTML
- Le langage HTML définit la structure de la page à l'aide d'éléments (les balises).
- Le langage CSS apporte le rendu visuel.
- Les deux entités doivent être complémentaires mais dissociées : la première apporte le sens (la sémantique), la seconde ajoute du rendu d'affichage.
Cet encadré est plus détaillé
ici
Une recommandation forte, pour des raisons évidentes de souplesse d'évolution, c'est d'éviter de mettre du CSS dans son code HTML et de le déporter dans un fichier séparé "code.css".
Exemple pour cette page, sans rien toucher au code HTML si ce n'est que l'URL du fichier CSS qui lui a été modifié,
voir
le nouveau rendu visuel (et comme je ne touche pas au code HTML ;), se servir des flèches du navigateur pour revenir à la page).
Sommaire
font-family
Type de police. Important pour la présentation de la page. Attention aux équivalences Linux, Windows.
Valeurs possibles
- Nom exact de la police comme Arial, Times, Helvetica, etc…
- Nom de la famille générique comme serif, sans-serif, cursive, fantasy, monospace
Valeur initiale : Valeur par défaut du navigateur.
Syntaxe. Indiquer le nom des polices dans l'ordre de ses préférences, utiliser les guillemets pour les noms de police avec espaces et enfin, mettre à la fin le nom d'une famille générique (pour le cas où aucune des polices mentionnées ne serait installée et qu'on veuille un type de police).
body {font-family: Arial, Verdana, "Nimbus Sans L", sans-serif;}
Nota. Les polices sans-serif sont les plus lisibles à l'écran. Les plus courantes (sous Windows) : arial, verdana.
font-style
Inclinaison du texte.
Valeurs possibles
- italic : italique
- normal : pas d'inclinaison (par défaut)
- oblique : autre façon de mettre en italique
Syntaxe
h3 {font-style: italic;}
font-weight
Epaisseur de la police.
Valeurs possibles
- lighter : plus fin
- normal : moyen (par défaut)
- bold : gras
- bolder : plus gras
|
- Valeur numérique soit : (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)
|
font-size
Taille de la police.
Valeurs possibles
Avec des unités
- px : pixels
- % : pourcentage (100% = normal)
- em : taille relative (1.0 = normal)
Avec les constantes (taille en relatif)
|
Autres constantes (taille en absolue avec le nom de la 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
|
text-decoration
Décoration
Valeurs possibles
- underline : souligné
- overline : la ligne sera au-dessus (comme ceci)
- line-through : barré
- blink : clignotant (ne fonctionne pas avec tous les navigateurs)
- none : normal (par défaut)
|
font-variant
Petites capitales
Valeurs possibles
- small-caps : petites capitales
- normal : normal (par défaut)
|
text-transform
Détermine les effets de capitalisation du texte
Valeurs possibles
- uppercase : tout mettre en majuscules
- lowercase : tout mettre en minuscules
- capitalize : met le premier caractère en majuscule
- none : normal (par défaut)
|
color
Couleur du texte
font
Méga-propriété de police
text-align
Alignement du texte
Valeurs possibles
- left : à gauche (par défaut)
- center : centré
- right : à droite
- justify : texte justifié
|
vertical-align
Alignement vertical.
A utiliser dans des cellules de tableau, ou dans des éléments inline eux-mêmes contenus dans un élément inline.
Valeurs possibles
- top : en haut
- middle : au milieu
- bottom : en bas
|
line-height
Espace entre les lignes du texte.
Valeurs possibles
Valeur numérique représentant un multiple de la hauteur normale : 2 pour le double, 3 pour le triple…(en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%))
text-indent
Retrait à appliquer à la première ligne d'un bloc de texte comme <p>
Valeurs possibles :
- une longueur fixe en px, em, etc… (0 par défaut)
- un pourcentage par rapport à la largeur du bloc (0 par défaut)
|
white-space
Césure.
Valeurs possibles
- normal : le passage à la ligne est automatique (par défaut)
- nowrap : pas de passage à la ligne automatique, à moins d'une balise XHTML comme <br />
- pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme avec la balise XHTML <pre>)
|
letter-spacing
Espace entre les lettres.
word-spacing
Espace entre les mots.
Propriétés des fonds
background-color
Couleur de l'arrière-plan d'un élément.
background-image
Attribut une image d'arrière-plan à un élément
Valeur : URL de l'image.
background-repeat
Définit la façon de répéter l'image d'arrière-plan (mosaïque) qui a été définie par
background-image
Valeurs possibles
- no-repeat : pas de répétition
- repeat : répétition de l'image horizontalement et verticalement (par défaut)
- repeat-x : répétition de l'image horizontalement seulement
- repeat-y : répétition de l'image verticalement seulement
|
background-attachment
Spécifie si le fond est fixe ou pas.
Valeurs possibles
- fixed : arrière-plan reste fixe
- repeat : le fond défile avec le texte (par défaut)
|
background-position
Spécifie la position (verticale et horizontale) de l'image d'arrière-plan définie par
background-image et ce, par rapport au coin
supérieur gauche de la fenêtre
Valeurs possibles. 2 façons de procéder,
1ere façon, avec 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
- bottom : à droite, horizontalement
|
2eme façon, en notant une distance
en px ou %, par rapport au coin en haut à gauche.
Exemple de code :
background-position:50px 200px;
50px à droite, 200px à gauche
|
background
Méga-propriété de fond
Propriétés des boîtes et éléments assimilés
width
Largeur.
height
Hauteur.
min-width
Largeur mini.
max-width
Largeur maxi.
min-height
Hauteur mini.
max-height
Hauteur maxi.
margin-top
Marge en haut.
margin-left
Marge à gauche.
margin-right
Marge à droite.
margin-bottom
Marge en bas.
margin
Méga-propriété de marge.
Valeurs. Indiquer de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que l'on met, 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
|
Exemple de code :
margin: 20px 5px; (
20px de marge en haut et en bas, 5px à gauche et à droite)
padding-top
Marge intérieure en haut.
padding-left
Marge intérieure à gauche.
padding-right
Marge intérieure à droite.
padding-bottom
Marge intérieure en bas.
padding
Méga-propriété de marge intérieure.
Valeurs. Indiquer de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que l'on met, la signification change comme pour margin.
border-width
Epaisseur de la bordure.
border-color
Couleur de la bordure.
border-style
Type de bordure.
Valeurs possibles
- 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
|
border-left
Bordure à gauche.
Valeurs possibles. Indiquer selon besoin la couleur, l'épaisseur et le type de bordure. L'ordre n'a pas d'importance.
Exemple de code : border-feft: 2px dashed blue;
border-top
Bordure en haut.
Valeurs possibles. Idem.
border-right
Bordure à droite.
Valeurs possibles. Idem.
border-bottom
Bordure en bas.
Valeurs possibles. Idem.
border
Méga-propriété de la bordure.
Valeurs possibles. Idem, mais ce sera pour les 4 bordures.
Propriétés de positionnement et d'affichage
float
Flottant.
Valeurs possibles
- left : flottant à gauche
- right : flottant à droite
- none : pas de flottant (par défaut;)
|
clear
Stopper un flottant.
Valeurs possibles
- 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 d'un flottant (par défaut;)
|
position
Type de positionnement.
Valeurs possibles
- 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 nromal (par défaut;)
|
top
Position par rapport au haut.
Valeurs possibles : en px, %, em… A utiliser pour un positionnement absolu, fixe ou relatif.
bottom
Position par rapport au bas.
Valeurs possibles : idem.
left
Position par rapport à gauche.
Valeurs possibles : idem.
right
Position par rapport à droite.
Valeurs possibles : idem.
z-index
Ordre d'affichage.
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.
Indiquer un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant.
Par exemple, si on a 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
list-style-type
Type de liste.
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
|
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 IE ?)
- 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 IE ?)
|
list-style-position
Position avec ou sans retrait.
Valeurs possibles
- inside : sans retrait
- outside : avec retrait (par défaut)
|
list-style-image
Puce personnalisée.
Valeur : url de l'image qui servira de puce.
list-style
Méga-propriété de liste.
Valeurs possibles : suivant besoin indiquer la ou les valeurs de list-style-type, list-style-position et list-style-image. L'ordre n'a pas d'importance.
Propriétés des tableaux
border-collapse
Type de bordure.
Valeurs possibles
- 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)
|
empty-cells
Cellules vides.
Valeurs possibles
- show : les bordures des cellules vides sont affichées
- collapse : les cellules vides sont masquées (par défaut)
|
caption-side
Position du titre. Indique la position du titre du tableau, défini via la balise <caption>
Valeurs possibles
- top : en haut du tableau
- bottom : en bas du tableau
- left : à gauche du tableau
- right : à droite du tableau
|
Autres propriétés
Astuces
Barrer son texte d'une autre couleur que le texte
Pour cet exemple, il faut utiliser deux span imbriqués, dont voici le code :
<span style="color: red; text-decoration: line-through;"><span style="color: blue;">exemple</span></span>
Faire des listes texte d'une couleur et items d'une autre couleur
- Attribuer une couleur à <ul> ou <ol>.
- Attribuer une autre couleur au texte via une balise <span>
Liens pour menus horizontaux
Quand on définit le style des liens pour menus horizontaux, souvent on définit la bordure et si on veut une séparation entre les différents liens, éviter l'attribut "margin" car, si visuellement c'est ok, ce n'est pas optimum
au niveau de l'utilisation. En effet, dès que le curseur de la souris entre dans la marge du lien, cela l'initie ce qui peut-être gênant s'il change de couleur par exemple.
L'astuce consiste à séparer les liens à l'aide de l'entité de caractère (espace "vide").
Aligner image et ligne de texte
Par défaut, image et texte s'alignent par le bas, ce qui peut ne pas être l'effet recherché. Par exemple, avoir le texte être aligné verticalement à mi hauteur de l'image. Pour cela, ajouter l'attribut align.
Exemple : <img src="monimage.jpg" alt="Mon image" align="middle" />
Haut de page