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 (padding), 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 :

Une feuille de style peut être :

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 #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(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