Les propriétés les plus simples
12 novemre 2013

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

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:

Valeurs de la propriété background-repeat
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:

Valeurs de la propriété background-position
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.

Valeurs de la propriété background-origin
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:

Valeurs de la propriété background-attachment
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.

Valeurs de la propriété font
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:

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:

Valeurs de la propriété font-style
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]:

Valeurs de la propriété 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]:

Valeurs de la propriété 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]:

Valeurs de la propriété 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]:

Valeurs de la propriété 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]:

Valeurs de la propriété 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]:

Valeurs de la propriété 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]:

Valeurs de la propriété 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.

  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
  • Je me répète;
Valeurs de la propriété list-style-type
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]:

Valeurs de la propriété 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]:

Valeurs de la propriété 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!

Valeurs de la propriété direction
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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
Valeurs de la propriété overflow
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]:

Valeurs de la propriété 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.


Pour toute question ou commentaire
E-Mail
page modifiée le 25 février 2014 à 15:13:16. []