Fonction : détermine la couleur de l'arrière-plan d'un élément
Valeurs possibles : [couleur]
| Propriété CSS | Dans le navigateur |
|---|---|
| <p style="background-color:blue;color:white;">Paragraphe avec police de caractère blanche (propriété <em>color</em>) sur fond bleu (propriété <em>background-color</em>)</p> | Paragraphe avec police de caractère blanche (propriété color) sur fond bleu (propriété background-color) |
Fonction : déterminer l'image d'arrière-plan d’un élément
Valeurs possibles : [url] → peut être absolue ou relative
| Propriété CSS | Dans le navigateur |
|---|---|
| <p style="background-image:url(favicon.ico);">Paragraphe avec logo de l'UdeM en arrière-plan</p> | Paragraphe avec logo de l'UdeM en arrière-plan |
Fonction : détermine la couleur de la bordure
Valeurs possibles : [couleur]
Note : Afin de pouvoir définir la couleur d'une bordure, il faut avoir pris soin d'en définir aussi le style (propriété border-style).
La propriété peut avoir jusqu'à 4 valeurs (une valeur par côté), chaque valeur étant séparée par une espace.
| Propriété CSS | Dans le navigateur |
|---|---|
| <p style="border-style:solid;border-color:red blue white black;">Paragraphe important!!!</p> | Paragraphe important!!! |
Fonction : détermine le style de la bordure
Valeurs possibles : none | dotted | dashed | solid | double | groove | ridge | inset | outset
Note : La propriété peut avoir jusqu'à 4 valeurs (une par côté), chacune étant séparée par une espace. On peut aussi directement indiquer le côté visé dans la propriété, par exemple border-top-style:solid.
| Propriété CSS | Dans le navigateur |
|---|---|
| <p style="border-style:groove dotted none solid;">Effet de style...</p> | Effet de style... |
Fonction : détermine l'épaisseur de la bordure
Valeurs possibles : thin | medium | thick | [longueur]
Note : Avant de définir l'épaisseur de la bordure, il faut avoir pris soin d'en définir le style (propriété border-style).
La propriété peut avoir jusqu'à 4 valeurs (une par côté), chaque valeur étant séparée par une espace.
| Propriété CSS | Dans le navigateur |
|---|---|
| <p style="border-style:solid;border-width:thick thin;">Bordure de paragraphe épaisse</p> | Bordure de paragraphe épaisse |
Fonction : Permet de définir le type d'affichage des éléments.
Valeurs possibles : inline | block | none
Note : La valeur "none" permet de rendre un élément invisible.
| Propriété CSS | Dans le navigateur |
|---|---|
| <p style="display:inline;">Ceci est un premier paragraphe.</p> <p style="display:inline;">Ceci est un deuxième paragraphe qui se place directement à la suite du premier en raison de la propriété CSS "display:inline;" qui change le comportement habituel du paragraphe qui est display:block.</p> |
Ceci est un premier paragraphe. Ceci est un deuxième paragraphe qui se place directement à la suite du premier en raison de la propriété CSS "display:inline;" qui change le comportement habituel du paragraphe qui est display:block. |
Fonction : permet de positionner certains éléments comme, par exemple, enrouler du texte autour d'une image ou d'un tableau et de déterminer son emplacement
Valeurs possibles : left | right | none
| Propriété CSS | Dans le navigateur |
|---|---|
| <img src="http://www.ebsi.umontreal.ca/images/ Livre_Introduction_aux_sciences_de_l_information.jpg" alt="couverture du livre d'introduction aux sciences de l'information" style="float: right" /><p>Le texte apparaît à gauche de l'image en raison de la propriété float</p> |
 Le texte apparaît à gauche de l'image en raison de la propriété float |
Fonction : Détermine la largeur de la marge par rapport au bloc conteneur (élément parent)
Valeurs possibles : [longueur] | [pourcentage] | auto
Note : La propriété margin permet de définir les 4 marges en même temps; les propriétés margin-top, margin-bottom, margin-left, margin-right permettent de définir individuellement les 4 côtés.
| Propriété CSS | Dans le navigateur |
|---|---|
| <p style="margin-bottom:0em;">Premier paragraphe sans marge inférieure.</p> <p style="margin-top: 0em; margin-bottom: 2em; margin-left: 5em;">Deuxième paragraphe sans marge supérieure, avec une grande marge à gauche et en dessous.</p> <p>Troisième paragraphe avec des marges normales</p> |
Premier paragraphe sans marge inférieure. Deuxième paragraphe sans marge supérieure, avec une grande marge à gauche et en dessous. Troisième paragraphe avec des marges normales |
Fonction : Détermine l'espacement à l'intérieur d'un élément
Valeurs possibles : [longueur] | [pourcentage] | auto
Note : La propriété padding permet de définir les 4 espacements en même temps; les propriétés padding-top, padding-bottom, padding-left, padding-right permettent de définir individuellement les 4 côtés.
| Propriété CSS | Dans le navigateur | |
|---|---|---|
| <table> <tr> <td style="padding-left:0em;padding-right:2em;padding-bottom:1em;padding-top:0em;">Cellule avec un espacement intérieur à gauche de zéro, à droite de 2em, en bas de 1em et en haut de 0em.</td> </tr> </table> |
|
Fonction : Permet de définir la taille d'un élément
Valeurs possibles : [longueur] | [pourcentage] | auto
| Propriété CSS | Dans le navigateur |
|---|---|
| <p><strong>Taille originale</strong></p> <img src="plan_2e_lgroulx.jpg" alt="accès au bureau C2072" /> <p><strong>Image réduite à 10%</strong></p> <img src="plan_2e_lgroulx.jpg" alt="accès au bureau C2072" style="width:10%;" /> |
Taille originale 
Image réduite à 10% |
Fonction : détermine le type de puces ou de numérotation pour les éléments d'une liste
Valeurs possibles : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
| Propriété CSS | Dans le navigateur |
|---|---|
| <p>Liste numérotée en lettres minuscules</p> <ol style="list-style-type: lower-alpha;"> <li>Premier item</li> <li>Deuxième item</li> </ol> |
Liste numérotée en lettres minuscules
|
Fonction : détermine le nom de la police
Valeurs possibles : nom d’une police spécifique ou nom générique (i.e. famille de polices). Les noms de polices de plus d’un mot devront être placés entre guillemets (e.g. "lucida handwriting" ).
Noms génériques : serif, sans-serif, cursive, fantasy, monospace
Note : On peut juxtaposer jusqu’à trois polices comme valeur. Ainsi, si l’agent utilisateur (e.g. navigateur) ne possède pas la première police, il utilisera celle qui suit
| Propriété CSS | Dans le navigateur |
|---|---|
| <p>Paragraphe "normal"</p> <p style="font-family: 'lucida handwriting', times, serif;">Paragraphe stylé</p> |
Paragraphe "normal" Paragraphe stylé |
Fonction : détermine la taille des caractères
Valeurs possibles : [taille absolue] | [taille relative] | [longueur] | [pourcentage]
Tailles absolues : xx-small, x-small, small, medium, large, x-large, xx-large
Tailles relatives : smaller, larger
Pourcentage : en relation avec la taille de la police de l'élément parent
| Propriété CSS | Dans le navigateur |
|---|---|
| <h1>Titre de niveau 1 "normal"</h1> <h1 style="font-size: 300%;">Titre de niveau 1 plus grand</h1> <p>Paragraphe "normal"</p> <p style="font-size: 0.8em;">Paragraphe avec une police plus petite</p> |
Titre de niveau 1 "normal"Titre de niveau 1 plus grandParagraphe "normal" Paragraphe avec une police plus petite |
Fonction : détermine le style des caractères
Valeurs possibles : normal | italic | oblique
Note : Valeur par défaut : normal
« italic » et « oblique » généralement synonymes
| Propriété CSS | Dans le navigateur |
|---|---|
| <p>Paragraphe "normal"</p> <p style="font-style: oblique;">Paragraphe stylé</p> |
Paragraphe "normal" Paragraphe stylé |
Fonction : détermine l’épaisseur du trait des caractères
Valeurs possibles : Valeurs absolues : normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
(normal = 400; bold = 700)
Valeurs relatives : bolder | lighter (en fonction de la police courante)
Note : Valeur par défaut : normal
| Propriété CSS | Dans le navigateur |
|---|---|
| <blockquote><p>Ceci n'est pas stylé</p></blockquote> <blockquote style="font-weight: bold;"><p>Ceci a beaucoup de style!</p></blockquote> |
|
Fonction : déterminer la couleur du texte
Valeurs possibles : [couleur]
Note : Plusieurs façons de spécifier une couleur, par exemple :
(1) Par mots-clés
black, white, gray, yellow, red, blue, green, etc.
(2) Par triplet de composantes rouge/vert/bleu (RGB) dans une des quatre formes suivantes
#rrggbb (ex. : #00cc00)
#rgb (ex. : #0c0)
rgb(x,x,x) où x sont des nombres entiers entre 0 et 255 (ex. : rgb(0,204,0))
rgb(y%,y%,y%) où y sont des nombres entre 0 et 100
(3) Par triplet de composantes teinte (hue)/saturation/lumière (lightness) (HSL)
hsl(x,y,z) où x est un nombre entre 0 et 360 (un degré sur la roue des couleurs), et y et z sont des pourcentages (un nombre entre 0 et 100)
| Propriété CSS | Dans le navigateur |
|---|---|
| <p style="font-style:italic;color:red;">Paragraphe d'avertissement!</p> | Paragraphe d'avertissement! |
Fonction : détermine l'alignement du texte
Valeurs possibles : left | right | center | justify
| Propriété CSS | Dans le navigateur |
|---|---|
| <h1>Titre de niveau 1 normal</h1> <h1 style="text-align:right">Titre aligné à droite</h1> |
Titre de niveau 1 normalTitre aligné à droite |
Fonction : détermine la « décoration » (e.g. soulignement) du texte
Valeurs possibles : none | underline | overline | line-through | blink
| Propriété CSS | Dans le navigateur |
|---|---|
| <p>Paragraphe de texte ordinaire</p> <p style="text-decoration:line-through;">Paragraphe barré</p> |
Paragraphe de texte ordinaire Paragraphe barré |
Fonction : détermine l’indentation du texte
Valeurs possibles : [longueur] | [pourcentage]
Note : Seule la première ligne est indentée.
| Propriété CSS | Dans le navigateur |
|---|---|
| <p>Paragraphe ordinaire sans indentation</p> <p style="text-indent: 2cm;">Paragraphe avec une indentation de 2 centimètres</p> |
Paragraphe ordinaire sans indentation Paragraphe avec une indentation de 2 centimètres |