CSS

Cascading Style Sheets : feuilles de style en cascade.

Besoin

Définir l'apparence de balises HTML.

Analyse

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

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 :

Conception

Modèle de boîte

Conformément à la nature hiérarchique du langage à balises fermantes/ouvrantes qu'est HTML, CSS utilise un modèle de boîtes (box model) imbriquées représentant les zones à afficher.

Chaque boîte applique les règles d'affichage qui lui sont dictées, de manière absolue ou en relation avec les autres boîtes.

Contenu

Les composants d'une boîte, emboîtés
margin
border
padding
Contenu

Une boîte est une encapsulation de plusieurs éléments :

  • son contenu, qui inclut lui-même :
    • sa bordure (border) qui entoure :
      • sa marge interne (<b>padding</b>), qui englobe :
        • son contenu
  • sa marge (margin) externe, qui n'est jamais prise en compte dans sa taille.

Affichage

L'affichage (display) des boîtes peut se faire :

  • sous forme de conteneur (block) qui réserve son espace. Par défaut un bloc occupe toute la largeur disponible (de son propre conteneur, à défaut du viewport) et ira donc à la ligne s'il est placé après un autre élément.
  • sous forme de contenu (inline) qui sera inséré dans le flux de lecture. Sa taille ne sera alors régie que par la taille de ce contenu et de rien d'autre (fixer sa taille n'aura aucun effect).
  • sous forme de conteneur contenu (inline-block)
  • non affiché (none) : aucun espace n'est alors réservé.

Tout navigateur définit un style par défaut pour chaque balise HTML, conformément au standard CSS (<p> ou <div> seront par défaut affiché comme des blocs, <i> ou <span> comme des éléments de texte, etc.).

Le calcul de la dimension d'une boîte peut à partir de son contenu (box-sizing: content-box par défaut) ou de sa bordure (box-sizing: border-box, souvent plus pratique).

Positionnement

Les boîtes peuvent être positionnées (position) selon différents algorithmes :

  • inchangée (static) par rapport à leur position attendue dans le flux de lecture du document.
  • de manière relative à la position courante. Par exemple 10px plus haut, 2em de moins côté gauche, etc.
  • de manière absolue (absolute) par rapport à un référentiel
  • de manière fixe (fixed), c'est-à-dire absolue indépendamment de tout référentiel (ou par rapport au référentiel du viewport si l'on veut).

Implémentation

Langage

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 : .<em>classe</em> . La règle s'appliquera donc à tous les éléments ayant cette classe.
      • leur identité (id) : #<em>id</em> . 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.

Versions

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 <strong><em>#</em></strong><em>idElement</em>
Classe d'élément <strong>.</strong><em>classe</em>
Pseudo-classe d'élément <em>classe</em>:<strong>link</strong><br> <em>classe</em>:<strong>visited</strong>
Descendant d'élément <em>parent child</em>
Tous éléments <em>[parent]</em> <strong>*</strong>
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: <span class="codeString">"Bookman Old
  Style"</span>; font-size: small; list-style-position: outside; list-style-type: disc; text-align: justify<br>
        }<br> address { font-family: <span class="codeString">"Courier
  New"</span>, Courier, mono; <br> font-size: small; margin-left: 1cm<br> }<br> ol {
        font-family: <span class="codeString">"Bookman Old
  Style"</span>; font-size: small; list-style-position: outside; list-style-type: decimal; text-align: justify<br>
        }<br> h2 { font-family: <span class="codeString">"Bookman Old
  Style"</span>; 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(https://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

Références