Ensemble des propriétés CSS du glossaire vues dans le sci6306

Arrière-plan

Propriété : background-color

Fonction : détermine la couleur de l'arrière-plan d'un élément

Valeurs possibles : [couleur]

Exemple d'application
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)

Propriété : background-image

Fonction : déterminer l'image d'arrière-plan d’un élément

Valeurs possibles : [url] → peut être absolue ou relative

Exemple d'application
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

Bordure

Propriété : border-color

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.

Exemple d'application
Propriété CSS	Dans le navigateur
<p style="border-style:solid;border-color:red blue white black;">Paragraphe important!!!</p>	Paragraphe important!!!

Propriété : border-style

Fonction : détermine le style de la bordure

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.

Exemple d'application
Propriété CSS	Dans le navigateur
<p style="border-style:groove dotted none solid;">Effet de style...</p>	Effet de style...

Propriété : border-width

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.

Exemple d'application
Propriété CSS	Dans le navigateur
<p style="border-style:solid;border-width:thick thin;">Bordure de paragraphe épaisse</p>	Bordure de paragraphe épaisse

Espacement

Propriété : display

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.

Exemple d'application
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.

Propriété : float

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

Exemple d'application
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

Propriété : margin

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.

Exemple d'application
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

Propriété : padding

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.

Exemple d'application

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>

Cellule avec un espacement intérieur à gauche de zéro, à droite de 2em, en bas de 1em et en haut de 0em.

Propriété : width

Fonction : Permet de définir la taille d'un élément

Valeurs possibles : [longueur] | [pourcentage] | auto

Exemple d'application
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%

Liste

Propriété : list-style-type

Fonction : détermine le type de puces ou de numérotation pour les éléments d'une liste

Exemple d'application
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 Premier item Deuxième item

Police

Propriété : font-family

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

Exemple d'application
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é

Propriété : font-size

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

Exemple d'application
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 grand Paragraphe "normal" Paragraphe avec une police plus petite

Propriété : font-style

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

Exemple d'application
Propriété CSS	Dans le navigateur
<p>Paragraphe "normal"</p> <p style="font-style: oblique;">Paragraphe stylé</p>	Paragraphe "normal" Paragraphe stylé

Propriété : font-weight

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

Exemple d'application
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>	Ceci n'est pas stylé Ceci a beaucoup de style!

Texte

Propriété : color

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)

Exemple d'application
Propriété CSS	Dans le navigateur
<p style="font-style:italic;color:red;">Paragraphe d'avertissement!</p>	Paragraphe d'avertissement!

Propriété : text-align

Fonction : détermine l'alignement du texte

Valeurs possibles : left | right | center | justify

Exemple d'application
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 normal Titre aligné à droite

Propriété : text-decoration

Fonction : détermine la « décoration » (e.g. soulignement) du texte

Valeurs possibles : none | underline | overline | line-through | blink

Exemple d'application
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é

Propriété : text-indent

Fonction : détermine l’indentation du texte

Valeurs possibles : [longueur] | [pourcentage]

Note : Seule la première ligne est indentée.

Exemple d'application
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

Arrière-plan

Propriété : background-color

Propriété : background-image

Bordure

Propriété : border-color

Propriété : border-style

Propriété : border-width

Espacement

Propriété : display

Propriété : float

Propriété : margin

Propriété : padding

Propriété : width

Liste

Propriété : list-style-type

Police

Propriété : font-family

Propriété : font-size

Titre de niveau 1 "normal"

Titre de niveau 1 plus grand

Propriété : font-style

Propriété : font-weight

Texte

Propriété : color

Propriété : text-align

Titre de niveau 1 normal

Titre aligné à droite

Propriété : text-decoration

Propriété : text-indent