Cascading Style Sheets : feuilles de style en cascade.

Besoin

Définir l'apparence des balises HTML.

Analyse

Un style est un ensemble de paramètres déterminant le rendu visuel d'une balise, comme :

  • la fonte
  • les couleurs (avant-plan, arrière-plan, etc.)
  • l'espacement
  • la justification
  • la casse

La spécification des styles applicables à un document est contenue dans une feuille de style.

On prévoit de spécifier pour un document une série de feuilles de styles, dont certaines peuvent redéfinir les styles des précédentes. On parle alors de cascade de feuilles de styles, pour atteindre les buts de :

  • modularité : capacité à construire un style global à partir de feuilles de styles élémentaires
  • adaptabilité : appliquer les style adéquats en fonction des volontés des rédacteurs, des lecteurs, des cas d'utilisation, etc.

Conception

Une feuille de style est constituée de :

  • règles (rules), elles-mêmes constituées de :
    • un sélecteur (selector) d'éléments auxquels appliquer le style, via (par spécificité croissante) :
      • leur type : nom d'élément : a, p, etc.
      • la classe qu'il leur est appliquée : .classe . La règle s'appliquera donc à tous les éléments ayant cette classe.
      • leur identité (id) : #id . La règle ne doit alors concerner qu'un seul élément (ou plusieurs mais via l'héritage du style) tel que en-tête, pied de page, navigation, barre latérale, etc.
    • une déclaration : définition du style sous la forme d'une suite de :
      • propriété
      • valeur
    • un poids, considéré en cas de conflits de redéfinitions entre règles. Par défaut les règles issues de l'auteur d'un document sont plus fortes que celles d'un lecteur par exemple.

Une feuille de style peut être :

  • interne : intégrée au contenu du document HTML
  • externe : référencée par le document HTML. Ce dernier choix permet de réutiliser la même feuille de style pour plusieurs documents, et donc de modifier l'apparence d'un ensemble de document à partir d'une seule feuille.

Implémentation

Propriétés 1 (1996) 2 3 (2012) 4
0 (1998) 1 (2011)
Texte Propriétés de fontes (typeface, emphasis) Sélection plus précise d'élément avec >, +, [attr], :first-child, etc.
Couleur d'avant-plan, arrière-plan
Espacement entre mots et lignes
Alignement
Marge, bordure, padding et positionnement
Identification unique et classification générique de groupes d'attributs
Sélecteur Element particulier #idElement
Classe d'élément .classe
Pseudo-classe d'élément classe:link
classe:visited

Descendant d'élément parent child
Tous éléments [parent] *
Images Alignement, marge, bordure, padding et positionnement
Tableaux Alignement, marge, bordure, padding et positionnement
Positionnement position: static
Relatif position: relative (top, bottom, left, right offsets)
Absolu position: absolute
Fixe position: fixed
Affichage display: [none|inline|block]
  • index de profondeur
  • media types
  • aural style sheets
  • bidirectional text
  • new font properties (shadows)
Non z-index
  • bords arrondis
border-radius
media-queries @media screen and (min-width: 400px) and (max-width: 700px) { … }

Exemples

Un exemple de feuille de style CSS est :

<style type="text/css"> .mainTitle { // classe
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: larger } h1 { font-family: "Bookman Old Style";
        font-size: x-large; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none;
        text-align: left; word-spacing: normal; letter-spacing: 0mm } p { font-size: small; font-style: normal;
        line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; text-align: justify;
        color: #000000; font-family: "Bookman Old Style"; clip: rect( ); text-indent: 20pt } ul {
        font-family: "Bookman Old
  Style"; font-size: small; list-style-position: outside; list-style-type: disc; text-align: justify
}
address { font-family: "Courier New", Courier, mono;
font-size: small; margin-left: 1cm
}
ol { font-family: "Bookman Old Style"; font-size: small; list-style-position: outside; list-style-type: decimal; text-align: justify
}
h2 { font-family: "Bookman Old Style"; font-size: large; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; height: auto; margin-top: 25px; margin-right: 0; margin-left: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; border: 0; black groove; clip: rect( ) } </style>

Un exemple de page Web (HTML) utilisant une feuille de style est :

<html> <head> <title>Test de
        feuille de style</title> <link rel="stylesheet" type"text/css" href="/monStyle.css" title="MonStyle">
        <style type="text/css"> <!-- @import url(http://javarome.net/basic); h1 { color: blue } -->
      </style> </head> <body> <h1>Ce titre 1 est bleu</h1> <p style="color: green">Alors
        que ce paragraphe est vert.</p> </body> </html>
    

Notes

  • CSS ne doit pas être confondu avec le standard XSL (eXtensible Style Sheet) lié à XML.
  • Des outils permettent une écriture simplifiée de feuilles CSS :
    • Préprocesseurs (Meta-langage compilant du CSS)
    • Knacss : feuille de style utilitaire
    • CSS Lint : Analyse en ligne de votre CSS et suggestions de corrections/améliorations

Références