CSS1

Les feuilles de style HTML

Cascading Style Sheets

par Michel Balmont

 

1. Définition et usage

Dans un traitement de texte, une feuille de style est un modèle prédéfini et qu'il suffit d'appliquer. C'est bien de cela qu'il est question ici. Le terme «cascading» s'explique par le fait que l'on peut employer plusieurs feuilles de style pour une seule page HTML ; le navigateur respectera toujours un ordre entre elles (la «cascade»).

Le langage HTML est très limité en ce qui concerne la mise en page. Le premier but des feuilles de style est de remédier à cette pauvreté. Un autre est de rendre le code plus léger en évitant les répétitions, et parfois le recours aux images. Elles permettent de contrôler l'apparence d'une page. Elles permettent enfin de créer une charte graphique afin de rendre les différentes pages d'un site esthétiquement cohérentes.

Le W3C a établi un langage standard, CSS. Il en existe déjà deux versions. Cette page présente la première, CSS1.

Dernière remarque, les navigateurs ont plus ou moins bien implémenté les feuilles de style à partir de leur quatrième version (3.5 pour Opera).

 

2. Syntaxe

2.1 Liaisons entre CSS et HTML

Elles sont de trois sortes:

  1. Internes (inline) : les feuilles des style se trouvent alors dans les balises et utilisent l'attribut style, dont la valeur est forcément entre guillemets. La balise <SPAN> est très utilisée. Ces feuilles de style priment sur les suivantes. Vous en trouverez dans le titre de cette page.
  2. Incorporées (embedded) : une balise <STYLE> est placée entre les balises <HEAD>, sous <TITLE>. Il est bon de les signaler comme commentaires (<!-- -->)Elles priment sur les suivantes. Cette page y a recours.
  3. Externes ou attachées (linked) : les styles se trouvent dans un fichier (extension ".css") auquel la page HTML fait appel par une balise de forme <LINK rel="stylesheet" href="url" type="text/css"> (ce n'est pas un conteneur), placée entre les balises <HEAD>, sous <TITLE>. Certains navigateurs exigent un type MIME pour charger les fichiers ".css" : "text/css".

 

2.2 Règles de style

2.2.1 Sélecteurs

Ils définissent la portée de la règle. Ils peuvent être de trois formes :

Exemple emprunté au W3C: 
<HTML>
   <HEAD>
      <TITLE>Title</TITLE>
          <STYLE TYPE="text/css">
                  P {font-size:12pt; line-height:12p}
                  P:first-letter {font-size:200%; float:left}
                  SPAN {text-transform:uppercase}
          </STYLE>
   </HEAD>
   <BODY>
         <P><SPAN>The first</SPAN> few words of an 
article in The Economist.</P>
   </BODY>
</HTML>
Ces sélecteurs peuvent être groupés.
Ex.: P, H1, H2, .s1 {color:red}

 

2.2.2 Propriétés

 

2.3 L'héritage

CSS applique le principe de l'héritage. Un style appliqué à un conteneur s'applique à tous les marqueurs que ce dernier contient. Sauf si, dans le marqueur contenu, une nouvelle valeur est indiquée pour la même propriété .

Plusieurs propriétés ne supportent pas l'héritage. Elles sont indiquées dans les tableaux ci-dessous par une astérique (*).

 

3. Catégories de propriétés

Elles sont au nombre de cinq:

3.1 Propriétés de polices de caractères

Voir CSS2

Nom

Sens

Valeurs

font-family

Famille de la police

  • serif (polices à empattements - ex. Times, Garamond)
  • sans-serif (polices sans empattement - ex. Arial, Helvetica)
  • cursive (polices "manuscrites" - ex. Zapf Chancery, Park Avenue)
  • fantasy (polices décoratives pour titrage - ex. Hobo, Broadway)
  • monospace (polices à chasse fixe - ex. Courier)

Une astuce : placez le nom de la famille générique en fin de liste - Ex. : {font-family:times, "Goudy old face", serif}
N.B.: En ce qui concerne les polices, on n'est obligé d'utiliser les guillemets (simples) que quand leur nom comporte plusieurs mots ('Goudy old face').

font-size

Corps de la police

points (xpt), millimètres (xmm)

xx-small, x-small, small, medium, large, x-large, xx-large (en général le rapport entre deux sera de 1,5)

Pourcentage (x%)

smaller, larger (baisse ou augmente d'un cran)

em (xem), pixel (xpx)

all (police vectorielle disponible dans toutes les tailles)

font-style

Style de la police

normal, oblique, italic, all (autorise tous les styles)

font-weight

Graisse de la police

extra-light, demi-light, light, medium, bold, demi-bold, extra-bold

valeur numérique comprise entre 100 (le plus léger) et 900 (le plus gras) [grosso modo, medium = 400, bold = 700]

bolder augmente la valeur numérique de 100 lighter la diminue de 100

all

font-variant

Affichage normal ou en petites capitales

normal, small-caps

font

Regroupe les 5 propriétés précédentes, plus line-height

L'ordre est le suivant font-style, font-variant, font-weight, font-size, line-height, font-family. Pas de virgule entre les valeurs, sauf pour les familles de police.

 

3.2 Propriétés de texte

Nom

Sens

Valeurs

word-spacing

Espace entre les mots

  • normal
  • xem, où "em" représente la largeur de la lettre "m" de la police courante
  • xex, où "ex" représente la hauteur comprise entre la ligne de base et la partie la plus haute des caractères bas de casse dépourvus de hampe (le "x" par ex.)

Des valeurs négatives sont possibles.

N.B.: Pour revenir à la valeur par défaut, utilisez 0em/0ex ou normal

letter-spacing

Espacement des lettres

"

text-decoration*

Style de texte

none (aucun, on peut l'utiliser pour supprimer le soulignement des liens hypertexte), underline (soulignement), overline (surligné), line-through (barré), blink (clignotement)

text-transform

Changements de casse

none (aucun), capitalize (mise en majuscule des débuts de mots), uppercase (majuscules), lowercase (minuscules)

text-align

Alignement horizontal d'objets HTML

center, left, right, justify

text-indent

Retrait de première ligne

points (xpt), millimètres (xmm), pica (xpc), centimètres (xcm) pouces (xin)

em (xem), ex (xex), pixel (xpx)

Pourcentage de la largeur de l'élément parent (x%)

Une valeur négative est possible.

vertical-align*

Décalage vertical

  • baseline (aligne la ligne de base du style sur la ligne de l'élément parent)
  • super (fait passer le style en exposant relativement à l'élément parent)
  • sub (fait passer le style en indice relativement à l'élément parent)
  • text-top (aligne le haut du texte avec le haut de l'élément parent)
  • text-bottom (aligne le bas du texte avec le bas de l'élément parent)
  • middle (aligne le point médian vertical du style avec la ligne de base du parent à laquelle on ajoute la hauteur de la lettre "x" du parent)
  • top (aligne le sommet du style avec le plus grand élément de la ligne courante)
  • bottom (aligne le bas du style avec le plus petit élément de la ligne courante)

Pourcentage (une valeur de pourcentage positive ou négative hausse ou rabaisse le style par rapport à la ligne de base du parent)

line-height

Contrôle de l'interligne

points (xpt), millimètres (xmm), pica (xpc), centimètres (xcm) pouces (xin)

em (xem), ex (xex), pixel (xpx)

Pourcentage relatif à la taille de la police de l'élément

Facteur de multiplication. (Lorsque vous utilisez un facteur, l'enfant hérite du facteur et non de la résultante.)

normal

Deux trucs

  • affectez "0" à la marge supérieure du paragraphe
  • l'espacement des lignes doit être inférieur au corps de la police

 

3.3 Propriétés de blocs*.

Le schéma suivant montre la position des différents éléments paramétrables dans un élément/une «boîte».

Nom

Sens

Valeurs

margin-top*

Marge supérieure

points (xpt), millimètres (xmm), pica (xpc), centimètres (xcm) pouces (xin)

em (xem), ex (xex), pixel (xpx)

Pourcentage de la largeur de l'élément parent (x%)

auto

Les valeurs négatives sont autorisées.

margin-right*

Marge de droite

"

margin-bottom*

Marge inférieure

"

margin-left*

Marge de gauche

"

margin*

Suite de quatre valeurs représentant l'épaisseur des quatre marges.
D'épaisseur nulle par défaut

"

Si quatre valeurs sont indiquées, elles s'appliquent dans l'ordre ci-dessus. Si trois valeurs sont indiquées, elles s'appliquent respectivement aux marges supérieure, droite et gauche. S'il y en a deux, la seconde s'applique aux marges droite et gauche ; s'il n'y en a qu'une aux quatre marges.

padding-top*

Ajustement en haut

points (xpt), millimètres (xmm), pica (xpc), centimètres (xcm) pouces (xin)

em (xem), ex (xex), pixel (xpx)

Pourcentage de la largeur de l'élément parent (x%)

padding-right*

Ajustement à droite

"

padding-bottom*

Ajustement en bas

"

padding-left*

Ajustement à gauche

"

padding*

Suite de quatre valeurs représentant l'épaisseur des quatre ajustements
D'épaisseur nulle par défaut

"

Si quatre valeurs sont indiquées, elles s'appliquent dans l'ordre ci-dessus. S'il n'y en a qu'une, elle s'applique aux quatre marges. Si deux ou trois valeurs sont spécifiées, les valeurs manquantes sont reprises sur les côtés opposés.

border-style*

Type de bordure

none (aucune), dotted (pointillés), dashed (tirets), solid (solide), double (double), groove (en creux), ridge (en saillie), outset (en 3D vers l'avant), inset (en 3D vers l'arrière)

border-color*

Couleur de la bordure

nom (white, blue, etc.)

code hexadécimal ( # FFFFFF)

rgb(x%, y%, z%) ou rgb(a, b, c) [abc compris entre 0 et 255]

border-width*

Epaisseur de la bordure

points (xpt), millimètres (xmm), pica (xpc), centimètres (xcm) pouces (xin)

em (xem), ex (xex), pixel (xpx)

Pourcentage (x%)

thin, medium, thick

Si quatre valeurs sont indiquées, elles s'appliquent dans l'ordre ci-dessous. S'il n'y en a qu'une, elle s'applique aux quatre bordures. Si deux ou trois valeurs sont spécifiées, les valeurs manquantes sont reprises sur les côtés opposés.

border-top*

Bordure supérieure

-style, -width, -color

border-right*

Bordure de droite

-style, -width, -color

border-bottom*

Bordure inférieure

-style, -width, -color

border-left*

Bordure de gauche

-style, -width, -color

border*

Suite de valeurs représentant l'épaisseur, le style et la couleur des quatre bordures (si des paramètres ont été définis auparavant pour un élément, ils sont alors ignorés)

Si quatre valeurs sont indiquées, elles s'appliquent dans l'ordre ci-dessus. S'il n'y en a qu'une, elle s'applique aux quatre bordures. Si deux ou trois valeurs sont spécifiées, les valeurs manquantes sont reprises sur les côtés opposés.

width*

Largeur d'un bloc

points (xpt), millimètres (xmm), pica (xpc), centimètres (xcm) pouces (xin)

em (xem), ex (xex), pixel (xpx)

Pourcentage de la largeur de l'élément parent (x%)

auto

height*

Hauteur d'un bloc

points (xpt), pica (xpc), pouces (xin), centimètres (xcm), millimètres (xmm)

em (xem), ex (xex), pixel (xpx)

auto

float*

Flottaison d'un bloc

  • none (les éléments se placeront où ils peuvent)
  • left (les éléments se placeront à gauche de l'écran, le texte revenant automatiquement à la ligne de l'autre côté)
  • right (les éléments se placeront à droite de l'écran, le texte revenant automatiquement à la ligne de l'autre côté)

clear*

Analogue à l'attribut "clear" de la balise <BR>

  • none (les éléments flottants peuvent se placer sur les deux côtés)
  • left (les éléments se placeront automatiquement au-dessous de l'élément flottant à gauche)
  • right (les éléments se placeront automatiquement au-dessous de l'élément flottant à droite)
  • both (les deux)

 

3.4 Propriétés d'arrière-plans et de couleur

Nom

Sens

Valeurs

background-color*

Couleur unie d'arrière-plan (on peut la modifier dans n'importe quelle balise)

Transparent

nom (white, blue, etc.)

code hexadécimal ( # FFFFFF)

rgb(x%, y%, z%) ou rgb(a, b, c) [abc compris entre 0 et 255]

background-image*

Image de fond

url("url_de_l'image")

none

background-repeat*

Répétition de l'image

repeat, repeat-x (répétition sur une ligne horizontale), repeat-y (sur une ligne verticale), no-repeat

background-attachment*

Déplacement du décor de fond par rapport aux objets présents dans la page

scroll (image de fond attachée au texte de premier plan), fixed (fixe)

background-position*

Mise en place précise de l'image

points (xpt), millimètres (xmm), pica (xpc), centimètres (xcm) pouces (xin)

placement horizontal : left, center, right
placement vertical : top, center, bottom

Pourcentage de la surface disponible

  • 0% 0% = coin supérieur gauche
  • 100% 100% = coin inférieur droit
Des valeurs négatives sont possibles.

background*

Regroupe les cinq propriétés précédentes

Dans l'ordre du tableau

color

Couleur du texte (on peut la modifier dans n'importe quelle balise) - Transparente par défaut

nom (white, blue, etc.)

code hexadécimal ( # FFFFFF)

rgb(x%, y%, z%) ou rgb(a, b, c) [abc compris entre 0 et 255]

 

3.5 Propriétés de classification

Nom

Sens

Valeurs

list-style-type

Repère affiché à gauche de chaque article (CSS1 + CSS2)

square (carré), circle (rond vide), disc (rond plein), decimal (1 2 3), decimal-leading-zero (001, 002, ...999), lower-roman (i ii iii iv), upper-roman (I II III IV) lower-alpha (a b c), upper-alpha (A B C), lower-greek, hebrew, armenian, georgian, cjk-ideographic (idŽogrammes chinois), hiragana, katakana, hiragana-iroha, katakana-iroha, none

list-style-position

Retrait de chaque article

  • outside (Aligne les lignes suivant la première avec le premier caractère de celle-ci)
  • inside (la deuxième ligne et les suivantes sont alignées avec le marqueur de la première ligne)

list-style-image

Remplace le repère standard par une image

url("url_de_l'image") Si l'image n'est pas disponible, le marqueur texte est utilisé par défaut.

list-style

Regroupe les trois propriétés précédentes

Dans l'ordre du tableau ci-dessus.

display*

Détermine l'affichage des éléments de style. Permet de rendre certains éléments invisibles, bien qu'ils occupent toujours de la place sur la page

  • block (une nouvelle boîte est créée en regard des éléments environnants. Usuel avec H ou P)
  • inline (une nouvelle "boîte" est créée sur la même ligne que les éléments de texte voisins, et elle est formatée en fonction de la taille et de la qualité du contenu (image IMG - texte STR) au sein des bordures)
  • list-item (similaire à "block", à ceci près que seuls des marqueurs de liste, dont le comportement est similaire au contenu "inline", sont ajoutés)
  • none (désactive l'affichage de l'élément dans tous les cas, y-compris pour les enfants de l'élément)

white-space

Détermine la façon dont sont traités les espaces et les sauts de ligne

  • normal (les espaces supplémentaires et les sauts de lignes sont ignorés)
  • pre (les espaces supplémentaires et sauts de ligne sont reconnus)
  • nowrap (les sauts de ligne s'effectuent uniquement avec des <BR>)

 

4. Bibliographie et références

Voir le site du World Wide Web Consortium