Cette page traite des propriétés CSS et de la façon dont elles affectent les éléments du document définies par les sélecteurs. Ces propriétés CSS sont très nombreuses et je commence par les plus faciles: propriétés de couleur et de fond, propriétés des polices, propriétés des textes, propriétés des listes et propriétés d'effets visuels.
Les règles de style
Les règles de style CSS s'appliquant à un sélecteur doivent être entourées par des accolades { ... } et chacune des règles doit aussi se terminer par un point-virgule. Chacune de ces règles consiste en une propriété, suivie d'un deux-points : suivi par une valeur, soit
sélecteur {
propriété-1: valeur-1;
propriété-2: valeur-2;
...
propriété-n: valeur-n;
}Propriétés
Lorsqu'elles ne sont pas spécifiées, la plupart des propriétés prennent la même valeur que l'élément parent. On dit alors qu'elles héritent permettant ainsi de définir certaines propriétés une seule fois au niveau du parent le plus haut (BODY par exemple) en laissant les autres éléments hériter pour cette propriété. On va la rencontrer souvent dans les sections qui suivent.
Il y a cependant des propriétés qui n'héritent pas par défaut comme background-bolor (valeur par défaut = Transparent) ou border. Dans ce cas, on peut forcer l'héritage est donnant à la propriété la valeur inherit.
Les propriétés ont été divisées par groupes
- Propriétés de couleur et de fond;
- Propriété des polices;
- Propriétés des textes;
- Propriétés des listes;
- Propriétés d'effets visuels;
Avertissement de l'auteur
Dans ce qui suit, j'abuse du mot "pixel" comme incluant toutes les unités de mesure: cm, mm, in, em, ...
Propriétés de couleur et de fond
Les propriétés de couleur et de fond régissent les couleurs d'avant et d'arrière-plan ainsi que les images et leur disposition en arrière-plan. Elles sont color, background-color, background-image, background-repeat, background-position et background.
color
La propriété color, introduite avec CSS-1, s'applique à la couleur de l'avant plan (texte, par exemple). Elle peut prendre de nombreuses valeurs et s'appliquent au contenu des éléments rencontrant les exigences du sélecteur. Les 16 couleurs de fondamentales ont un nom anglais normalisé comme red, blue, yellow ... : elles sont reconnus par tous les navigateurs.
La couleur est aussi désignée par son code hexadécimal (un dièse suivi de 6 nombres hexadécimaux). Les deux premiers nombres hexadécimaux représentent la valeur de rouge, les deux suivants le vert et les deux derniers le bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs.
Il y a aussi un sous-ensemble de 216 couleurs appelées "Web safe" qui permettent d'afficher les couleurs correctement sur les écrans à 256 couleurs.
background-color
La propriété background-color, introduite avec CSS-1, est semblable à la propriété color sauf qu'elle s'applique à l'arrière-plan d'un élément.
background-image
La propriété background-image, introduite avec CSS-1, spécifie l'image qui apparaîtra comme arrière plan d'un élément comme dans l'expression
background-image:url('paper.gif');où l'image 'paper.gif' sera utilisée.
background-repeat
La propriété background-repeat, introduite avec CSS-1, détermine comment et si l'image d'arrière-plan sera répétée. Elle peut prendre l'une de ces valeurs:
| Valeur | Description |
|---|---|
| repeat | L'image est répétée dans la direction spécifiée autant que nécessaire pour remplir la totalité de la surface de dessin de l'image d'arrière-plan. La dernière image peut être coupée si elle ne tient pas entièrement dans l'espace restant. C'est la valeur par défaut |
| repeat-x | L'image d'arrière plan sera répétée seulement horizontalement |
| repeat-y | L'image d'arrière plan sera répétée seulement verticalement |
| no-repeat | L'image n'est pas répétée (et de par ce fait, la surface de dessin de l'image d'arrière-plan ne sera pas forcément recouverte). La position de l'image d'arrière-plan non répétée est définie par la propriété background-position |
| inherit | Même valeur que celle de l'élément parent |
background-position
La propriété background-position, introduite avec CSS-1, indique la position initiale d'une image d'arrière-plan, par rapport à la zone de positionnement défini par background-origin, pour chaque image. Elle peut prendre les valeurs suivantes:
| Valeur | Description |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom |
si une seule de ces valeurs est utilisée, la valeur de l'autre sera "center" |
| x% y% | La première valeur donne la position horizontale alors que la seconde donne la position verticale. Le coin supérieur gauche se situe à 0% 0% alors que le coin inférieur droit est à 100% 100%. La valeur par défaut est 0% 0%. |
| xpos ypos | La première valeur est la position horizontale et la seconde est la position verticale. Le coin supérieur gauche se situe à 0 0. Les unités peuvent être en pixels (px) ou toute autre unité CSS. Si seulement une valeur est fournie, l'autre sera 50%. On peut mélanger % et ce type de position |
| inherit | Même valeur que celle de l'élément parent |
background-origin
La propriété background-origin, introduite avec CSS-1, détermine la zone de positionnement de l'arrière-plan, soit la position de l'origine d'une image spécifiée en utilisant la propriété background-image.
| Valeur | Description |
|---|---|
| border-box | L'arrière-plan s'étend jusqu'au bord extérieur de la bordure (tout en restant en-dessous de la bordure sur l'axe z) |
| padding-box | Aucun arrière-plan n'est dessiné en-dessous de la bordure (l'arrière-plan s'étend jusqu'à la bordure extérieure du padding) |
| content-box | L'arrière-plan est dessiné dans (contenu dans) la boîte de contenu |
background-attachment
La propriété background-attachment, introduite avec CSS-1, détermine si une image d'arrière-plan est fixe dans l'affichage ou si elle va se déplacer (scroll) avec le reste de la page. Elle peut prendre les valeurs suivantes:
| Valeur | Description |
|---|---|
| scroll | spécifie que l'image d'arrière-plan va se déplacer (scroll) avec le reste de la page. C'est la valeur par défaut |
| fixed | L'image d'arrière-plan est fixe |
| inherit | Même valeur que celle de l'élément parent |
background
La propriété background, introduite avec CSS-1, est une super propriété qui combine background-image, background-repeat, background-attachment et background-position.
Propriété des polices
| Property | Description |
|---|---|
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |
Les propriétés des polices sont font, font-family, font-size, font-style, font-variant et font-weight.
font
La propriété font, introduite avec CSS-1, spécifie toutes les propriétés des polices de caractères en une seule déclaration. Les valeurs possibles sont indiquées dans la table qui suit.
| Valeur | Description |
|---|---|
| font-style | Définit le style de la police. Voir font-style pour les valeurs possibles |
| font-variant | Permet d'afficher la police en petites majuscules ou normalement. Voir font-variant pour les valeurs possibles |
| font-weight | Définit le poid de la police. Voir font-weight pour les valeurs possibles. |
| font-size/line-height | Specifies the font size and the line-height. See font-size and line-height for possible values |
| font-family | Définit la famille de polices à être utilisée. Voir font-family pour les valeurs possibles |
| caption | La police utilisée pour afficher les légendes (comme les boutons, les menus déroulants, ...) est utilisée |
| icon | La police utilisée par les étiquettes des icônes est utilisée |
| menu | La police de caractère utilisée pour les menus déroulants est utilisée |
| message-box | Les polices utilisées par les boîtes de dialogue sont utilisées |
| small-caption | Une version plus petite de la police "caption" est utilisée |
| status-bar | Utilise les polices utilisées pour afficher la barre d'état |
| inherit | Même valeur que celle de l'élément parent |
font-family
La propriété font-family, introduite avec CSS-1, définit la police utilisée pour afficher un élément. Elle peut contenir une liste de plusieurs noms de polices. La règle d'application est la suivantesuivante: si le fureteur ne supporte pas la première police de la liste, il essaiera le deuxière, et ainsi de suite.
Il existe deux façons de nommer les familles de polices:
- nom de famille - Le nom d'une famille de polices comme "Times", "Courier", "Arial", etc.
- nom de famille générique - Le nom d'une famille générique comme "serif", "sans-serif", "cursive", "fantasy", "monospace".
- Les polices de caractères de la famille serif les plus courants sont: Times new roman (PC), Times (Mac), Georgia (Mac/PC), Palatino Linotype (PC) et Palatino (Mac);
- Les polices de caractères de la famille sans-serif les plus courants sont: Verdana (Mac/PC), Arial (Mac/PC), Trebuchet (PC), Helvetica (Mac), Tahoma (PC) et Geneva (Mac);
Il est recommandé de commencer cette règle avec la police qu'on veut afficher et de toujours finir la liste avec un nom de famille générique qui sera utilisée si aucune des polices mentionnées antérieurement n'existe. Il y a aussi des différences entre Macs et PCs.
font-style
La propriété font-style, introduite avec CSS-1, sert surtout à mettre les caractères en italic. Elle peut prendre les valeurs suivantes:
| Valeur | Description |
|---|---|
| normal | Le fureteur affiche une police de caractère normale. C'est la valeur par défaut. |
| italic | Le fureteur affiche une police de caractèreen italique. |
| oblique | Le fureteur affiche une police de caractère en oblique. Presque comme italique mais moins supporté par les fureteurs. |
| inherit | Même valeur que celle de l'élément parent. |
font-size
La propriété font-size, introduite avec CSS-1, définit la hauteur et la largeur des caractères. Ses valeurs peuvent être absolues ou relatives aux éléments voisins.
font-variant
La propriété font-variant, introduite avec CSS-1, définit des variantes d'affichage des caractères. Elle peut prendre les valeurs suivantes [w3schools.com: font-variant]:
| Valeur | Description |
|---|---|
| normal | Le fureteur affiche la police normale. C'est la valeur par défaut |
| small-caps | Le fureteur affiche en petites majuscules (small-caps) |
| inherit | Même valeur que celle de l'élément parent |
font-weight
La propriété font-weight, introduite avec CSS-1, définit l'épaisseur des caractères. Ses valeurs sont les suivantes [w3schools.com: font-weight]:
| Valeur | Description |
|---|---|
| normal | Caractères normaux. C'est la valeur par défaut |
| bold | Caractères gras |
| bolder | Caractères plus gras |
| lighter | Caractères plus légers |
| 100 200 300 400 500 600 700 800 900 |
Définis de mince à épais, 400 est équivalent à "normal" alors que 700 est équivalent à "bold" |
| inherit | Même valeur que celle de l'élément parent. |
Propriétés des textes
On est maintenant arrivés à la section qui traite du formatage de texte. Ces propriétés sont text-align, text-indent, text-decoration, text-transform, word-spacing, letter-spacing, line-height et white-space.
text-align
La propriété text-align, introduite avec CSS-1, définit la position du texte dans un élément. Elle peut prendre les valeurs suivantes [w3schools.com: text-align]:
| Value | Description |
|---|---|
| left | Aligne le texte à gauche. |
| right | Aliogne le texte à droite. |
| center | Centre le texte |
| justify | Justifie le texte de sorte que chaque lignes soient d'égle longueur (comme dans un journal). |
| inherit | Même valeur que celle de l'élément parent. |
text-indent
La propriété text-indent. introduire avec CSS-1, définit l'indentation de la première ligne d'un texte. Elle peut prendre les valeurs suivantes [w3schools.com: text-indent]:
| Value | Description |
|---|---|
| length | Définit une indentation fixe en px, pt, cm, em, etc. |
| % | Définit une indentation en % de la largeur de l'élément parent. |
| inherit | Même valeur que celle de l'élément parent. |
text-decoration
La propriété text-decoration, introduite avec CSS-1, définit quelles décorations sont ajoutées à un texte. Ellepeut prendre les valeurs suivantes [w3schools.com: text-decoration]:
| Value | Description |
|---|---|
| none | Texte normal. C'est la valeur par défaut. |
| underline | Sousligne le texte. |
| overline | Surligne le texte. |
| line-through | Ligne à travers le texte. |
| blink | Texte "blinks" (pas supporté par IE, Chrome ou Safari) |
| inherit | Même valeur que celle de l'élément parent. |
text-transform
La propriété text-transform, introduite avec CSS1, contrôle la capitalisation d'un texte. Elle peut prendre les valeurs suivantes [w3schools.com: text-transform]:
| Valeu | Description |
|---|---|
| none | Le texte est rendu normalement. C'est la valeur par défaut. |
| capitalize | Tranforme les premières lettres de chaque mot en majuscules. |
| uppercase | Transforme tous les caractères en majuscules. |
| lowercase | Transforme tous les caractères en minuscules. |
| inherit | Même valeur que celle de l'élément parent. |
word-spacing
La propriété word-spacing, introduite avec CSS-1, contrôle l'espacement entre les balises et les mots. Elle ne prend que trois valeurs: normal (valeur par défaut), length ou inherit. La valeur length est l'espacement voulu exprimée en pixels. Comme exemple de l'application de cette propriété: ce paragraphe utilise {word-spacing: 20px;}.
letter-spacing
La propriété letter-spacing, introduite avec CSS-1, contrôle l'espacement entre les lettres d'un texte. Elle peut prendre les valeurs normal (valeur par défaut), length et inherit. La valeur length est l'espacement voulu exprimée en pixels.Comme exemple de l'application de cette propriété: ce paragraphe utilise {letter-spacing: 5px;}.
line-height
La propriété line-height, introduite avec CSS-1, contrôle la hauteur des lignes dans un texte (sans changer la grosseur des caractères). Elle peut prendre les valeurs normal (valeur par défaut), length, % et inherit. La valeur length est la hauteur de ligne exprimée en pixels alors que % définit la hauteur de la ligne en fonction de la hauteur des caractères. Comme exemple de l'application de cette propriété: ce paragraphe utilise {line-height: 50px;}.
white-space
La propriété white-space, introduite avec CSS-1, indique comment le fureteur va interpréter les espaces blancs dans un texte. Elle peut prendre les valeurs suivantes [w3schools.com: white-space]:
| Valeur | Description |
|---|---|
| normal | Les blancs sont réduits à un seul et il y a retour à la ligne automatique en fonction de la largeur du conteneur.. C'est la valeur par défaut |
| nowrap | Les blancs sont réduits à un seul. Les codes de retour à la ligne sont ignorés. |
| pre | Pas de fusion des blancs. Pas de retour à la ligne automatique. |
| pre-line | Supprime les espaces multiples et ajoute des sauts de ligne pour que le texte ne sorte pas du bloc |
| pre-wrap | Ne fusionne pas les blancs. Retour à la ligne automatique en fonction de la largeur du conteneur. |
| inherit | Même valeur que celle de l'élément parent. |
Propriétés des listes
Les propriétés des listes (<ul> et <ol>) sont list-style-type, list-style-position, list-style-image et list-style..
list-style-type
La propriété list-style-type, introduite avec CSS-1, définit le style de puce qui sera utilisé dans une liste. Elle peut prendre les valeurs du tableau qui suit [w3schools.com: list-style-type]. La troisième colonne vous permet de voir ce que donne chaque valeur.
| Valeur | Description | Essayer |
|---|---|---|
| disc | La puce est un cercle plein. C'est la valeur par défaut pour la balise <ul>. | |
| none | Aucune puce n'est affichée. | |
| circle | La puce est un cercle vide. | |
| square | La puce est un carré. | |
| decimal | La puce est un nombre arabe. C'est la valeur par défaut pour la balise <ol> | |
| decimal-leading-zero | La puce est un chiffre arabe avec les zéros qui le précède (01, 02, 03, etc.) | |
| lower-alpha | La puce est un caractère alpha-numérique minuscule (a, b, c, d, e, etc.) | |
| upper-alpha | La puce est un caractère alpha-nmérique majuscule (A, B, C, D, E, etc.) | |
| lower-roman | La puce est un chiffre romain minuscule (i, ii, iii, iv, v, etc.) | |
| upper-roman | La puce est un chiffre romain majuscule (I, II, III, IV, V, etc.). | |
| lower-latin | La puce est une lettre latine minuscule (a, b, c, d, e, etc.) | |
| upper-latin | La puce est une lettre latine majuscule (A, B, C, D, E, etc.) | |
| lower-greek | La puce est un lettre grecque minuscule | |
| armenian | La puce est une numération traditionnelle armenienne. | |
| cjk-ideographic | La puce est une numération ideographique.*, ** | |
| georgian | La puce est une numération traditionelle georgienne. | |
| hebrew | La puce est une numération traditionelle hébreux.*, ** | |
| hiragana | La puce est une numération traditionellel Hiragana.*, ** | |
| hiragana-iroha | La puce est une numération traditionelle Hiragana iroha.*, ** | |
| katakana | La puce est une numération traditionelle Katakana.*, ** | |
| katakana-iroha | La puce est une numération traditionelle Katakana iroha.*, ** | |
| inherit | Même valeur que celle de l'élément parent.*, ** | |
| Remarques | * ne fonctionne pas avec Internet Explorer ** fonctionne mal sous Opera Firefox et Safari sont compatibles |
list-style-position
La propriété list-style-position, introduite avec CSS-1, spécifie si la puce apparaît à l'intérieur ou à l'extérieur du flux normal. Elle peut prendre les valeurs suivantes [w3schools.com: list-style-position]:
| Valeur | Description |
|---|---|
| inside | Met la puce et le texte en indentation. La puce apparaît à l'intérieur du flux normal. |
| outside | Garde la puce à la gauche du texte, à l'extérieur du flux normal. C'est la valeur par défaut. |
| inherit | Même valeur que celle de l'élément parent. |
list-style-image
La propriété list-style-image, introduite avec CSS-1, permet de ramplacer la puce standard par une puce personalisée. Ses valeurs possibles sont les suivantes [w3schools.com: list-style-image]:
| Valeur | Description |
|---|---|
| url | Parcours versla puce personalisée. |
| none | Aucune image ne s'affiche. Cependant, la propriété list-style-type définit le style de la puce affichée. C'est la valeur par défaut. |
| inherit | Même valeur que celle de l'élément parent. |
list-style
La propriété list-style, introduite avec CSS-1, est une super-propriété de liste qui combine list-style-type, list-style-position, et list-style-image.
Propriétés d'effets visuels
Les propriétés d'effets visuels sont direction, visibility, overflow et clip.
direction
Le sens de lecture des textes écrits en arabe ou en hébreux va de droite à gauche alors que c'est le contraire pour les textes écrits dans d'autres langues. C'est pour satisfaire ce besoin que la propriété direction, introduite avec CSS-2, a été pensée. Elle peut prendre les valeurs suivantes [w3schools.com: direction]:
Voici un test d'écriture directionelle!
| valeur | Description | Essayez |
|---|---|---|
| ltr | La direcion de l'écriture est de gauche à droite et commande implicitement text-align:left*. C'est la valeur par défaut | |
| rtl | La direcion de l'écriture est de droite à gauche et commande implicitement text-align-right*. | |
| inherit | Même valeur que celle de l'élément parent | |
| * cet effet sera masqué si la balise hérite d'une autre balise pour laquelle text-align:left a été spécifié. | ||
Normalement, dans le test d'écriture, lorsque direction prend la valeur rtl, le texte français ne devrait pas être inversé car l'algorithme bidirectionnel [Authoring HTML: Handling Right-to-left Scripts] du fureteur sait que le français s'écrit de gauche à droite et, s'il s'applique, le texte français ne sera pas écrit de droite à gauche.
Pour amplifier l'effet d'inversion, j'ai utilisé la propriété unicode-bidi [CSS vs. markup for bidi support] avec sa valeur bidi-override ce qui fait que l'algorithme bidirectionnel ne s'applique plus. En fait, la propriété unicode-bidi détermine la mise en forme bidirectionnelle. Elle peut prendre les valeurs: bidi-override, embed, normal ou inherit.
Note importante! Il est fortement recommandé de ne pas utiliser CSS pour écrire de droite à gauche. On recommande plutôt d'utiliser la propriété dir="rtl" dans les balises HTML concernées.
visibility
La propriété visibility, introduite avec CSS-2, peut prendre deux valeurs: visible et hidden. La valeur hidden est un peu comme display: none sauf que visibility: hidden rend le bloc concerné invisible. Cependant, il conserve toujours son emplacement et les blocs adjacents restent à leur place.
overflow
La propriété overflow, introduite avec CSS-2, gère les débordements de contenu. Elle peut prendre les valeurs du tableau qui suit[w3schools.com: overflow]. Dans la troisième colonne de ce tableau, vous pouvez voir ce que chacune de ces valeurs donne.
| valeur | Description | Essayez |
|---|---|---|
| hidden | cache tout ce qui dépasse | |
| visible | rend visible tout ce qui dépasse. C'est la valeur par défaut | |
| scroll | met toujours ds barres de défilement horizontale et verticale | |
| auto | met une barre de défilement horizontale ou verticale si besoin | |
| inherit | Même valeur que celle de l'élément parent |
clip
La propriété clip, introduite avec CSS-2, permet de spécifier la zone visible d'un élément. Elle est généralement utilisée pour cacher une partie d'un élément. Elle peut prendre les valeurs suivantes [w3schools.com: clip]:
| Valeur | Description |
|---|---|
| shape | Coupe l'élément. Les seules valeurs valides sont rect(top, right, bottom, left) |
| auto | Pas de coupure (clipping). C'est la valeur par défaut |
| inherit | Même valeur que celle de l'élément parent |
La propriété clip ne fonctionne pas si la propriété overflow est égale à visible.
Une propriété isolée: !important
La propriété !important est inclassable. Elle s’applique à tout les attributs CSS. Elle permet à l’attribut auquel elle est ajoutée de prendre le pas sur tous les mêmes autres attributs qui pourraient se trouver à l’intérieur de la même class ou du même id.
En pratique, Internet Explorer ne comprends pas cette règle, il l’ignore complètement contrairement à tous les autres fureteurs.
