site de Fabien Torre, université de Lille


Notes de cours sur les feuilles de style

Utilisation de feuilles de style (CSS) dans la mise en forme de document HTML ou XML : principes et motivations, application à une page HTML, toutes les propriétés disponibles en CSS.

Motivations

Comme on l'a vu à la fin du cours sur le langage HTML, les balises de mise en page (comme FONT par exemple) sont exclues du langage HTML et les navigateurs futurs pourront ne pas supporter ces balises.

Il s'agit d'un paradigme général consistant à dissocier le contenu d'un document de sa forme. Ici, il semblerait donc que le langage HTML soit destiné à décrire le contenu, les feuilles de style dont nous allons discuter dans la suite servant elles à décrire la forme du document.

Les intérêts de cette séparation sont nombreux :

  • un style, appliqué à toutes les pages d'un site, assure la cohérence graphique de ce site ;
  • la maintenance d'un site en est facilitée, un changement de charte graphique ne portera que sur la feuille de style et la modification sera naturellement propagée à toutes les pages ;
  • plusieurs mises en forme différentes peuvent être proposées pour un même document sans que celui-ci ne soit répliqué en autant d'exemplaires ;
  • le code HTML est lisible et facilement modifiable, sans que l'on ait à penser en même temps au contenu et à son apparence ;
  • les pages, dégagées des balises de mise en forme, sont plus légères, donc plus rapides à circuler sur un réseau (la feuille de style est, le plus souvent, très légère et ne sera chargée qu'une seule fois pour l'ensemble des documents qui l'utilisent) ;
  • les balises donnent une indication sur la nature du contenu et cette indication pourra être utilisée par un moteur de recherche.

Enfin, précisons immédiatement que le couple HTML/CSS ne constitue pas la seule réponse à la motivation contenu séparé de la forme, citons :

  • le contenu peut être stocké dans un fichier XML ; l'apparence peut alors à nouveau être décrite dans une feuille de style, ou confiée à des traitements plus sophistiqués ;
  • le contenu peut être stocké dans une base de données, la mise en forme étant confié à un programme, en PHP par exemple (la production de ce programme pouvant très bien être du code HTML associé à une feuille de style).

Généralités

La solution retenue pour décrire des mises en forme se nomme donc feuilles de style ou, en anglais, Cascading Style Sheets (CSS). En cascade signifie que sont prises en compte les feuilles du navigateur, de l'utilisateur, puis de l'auteur du document. Les CSS peuvent être rapprochées des modèles de document des traitements de texte.

La recommandation CSS level 1 date de 1996, suivie en mai 1998 par la recommandation CSS level 2. Le travail sur les CSS de niveau 3 a commencé à la même période, certaines parties sont déjà à l'état de recommandation, d'autres sont encore en réflexion.

Après avoir écrit une feuille de style, il convient de vérifier l'apparence du document avec un maximum de navigateurs. Enfin, et surtout, il faut s'assurer impérativement que le document reste lisible même sans la feuille de style.

Application d'un style à un code HTML

Dans une balise, avec l'attribut STYLE

<B style="color:silver;"> ce qui donne cet exemple.

Dans l'en-tête, après la balise TITLE

<STYLE TYPE="text/css">
bla bla feuilles de style
</STYLE>

Commentaires HTML pour les navigateurs non compatibles

<STYLE TYPE="text/css">
<!--
bla bla feuilles de style
//-->
</STYLE>

Fichier externe

dans un fichier texte .css (pas de balise STYLE), puis dans l'en-tête du fichier HTML :

<LINK REL="stylesheet" TYPE="text/css" HREF="bla.css">

Association avec un média particulier

Avec la version 2 de la spécification CSS, on peut indiquer le média auquel est dédié une feuille de style. Pour l'instant, les médias possibles sont : all, aural, braille, embossed, handheld, print, projection, screen, tty, tv.

La précision du média peut se faire au sein d'une même feuille de style :

@media print {
   BODY { font-size: 10pt }
}

@media screen {
  BODY { font-size: 12pt }
}

ou dans l'en-tête de la page HTML :

<LINK REL="stylesheet" TYPE="text/css" HREF="site.css"  MEDIA="screen">
<LINK REL="stylesheet" TYPE="text/css" HREF="print.css" MEDIA="print">

Association d'un style à une balise

Sélecteurs de types

Dans ce cas, on ne précise que les noms des balises concernées par la définition du style :

H1 {
font-family: Wide Latin;
}

H1,H2,H3 {
	 font-family: Wide Latin, Arial Black, Helvetica, sans-serif;
	 color: red;
	 }

P {
  color: blue;
}

Sélecteurs d'attributs (CLASS ou ID)

Il est également possible de proposer des apparences différentes pour une même balise. Nous avons précédemment décrit le style associé de manière générale aux balises P et nous allons maintenant définir un autre style pour certains paragraphes dits ecolo. Cela passe par une distinction dans le code HTML :

<P CLASS="ecolo">
un paragraphe...
</P>

Puis, on utilisera la syntaxe suivante pour décrire les caractéristiques de ces paragraphes particuliers :

P.ecolo {
	color: green;
	}

Plus généralement, on peut spécifier l'apparence d'une classe sans préciser de balise :

.ecolo {
	color: green;
	}

Cela aura pour effet de faire apparaître en vert toutes les textes contenus dans balises de classe ecolo :

<H1 CLASS="ecolo">Titre militant</H1>
<P CLASS="ecolo">
un paragraphe...
</P>

Enfin, plutôt que de parler d'une classe, il est possible de ne donner un style que pour une apparition unique d'une balise donnée. Pour cela, il faut repérer cette balise en lui donnant un identifiant unique :

<P ID="p1">
bla bla bla bla bla bla
bla bla bla bla bla bla
bla bla bla bla bla bla
</P>

Puis de définir le style du paragraphe nommé p1 en utilisant la syntaxe suivante :

#p1 { color: blue; }

Cette pratique n'est plus tout à fait dans l'esprit que nous avons décrit jusqu'à maintenant à savoir décrire des styles généraux qui seront repris sur l'ensemble d'un site. Elle peut cependant se révéler utile dans quelques cas particuliers.

Par contexte

BODY {
     margin: 0.5cm;
}

UL LI { font-size: small}

UL LI LI { font-size: x_small}
héritage d'un ascendant
.Prof H1 { color: red; }
héritage de l'ascendant direct
Body > P { color: red; }

Par pseudo-classes

A:link
A:hover		(passage de souris)
A:active
A:visited	prioritaire sur les précédents... ne pas
		utiliser mais préférer le VLINK de la balise BODY

P:first-line
P:first-letter

p.ecolo:link {color: lime }
p.ecolo:visited {color: olive }

DIV et SPAN

Il s'agit de balises HTML dont le seul rôle est de délimiter une zone associée à un style : DIV pour les blocs de texte (à la manière d'un paragraphe), SPAN pour une suite de mots dans un texte. Sans style, ces balises ne produisent rien de particulier.

Tous les détails : boîtes, propriétés, pseudo-classes

Notion de boîte

La mise en page à l'aide de CSS repose sur la notion de boîtes : il faut imaginer que tout contenu entre une balise ouvrante et une balise fermante est en fait dans une boîte. À l'aide des feuilles de style, on va pouvoir spécifier l'apparence du contenu de la boîte (color, font, background, etc.), les espacements à l'extérieur de la boîte (margin) et les espacements à l'intérieur (padding).

Naturellement, l'imbrication des balises implique une imbrication des boîtes. Ainsi, les éléments <LI> sont vus comme des boîtes contenus dans une boîte représentant la balise <UL>.

Unités de mesure

px, mm, cm, in, pt, pc, em (hauteur des majuscules de la police en cours), en (hauteur des minuscules de la police en cours).

Propriétés de police

  • font-family : suite de noms de polices (si l'une manque sur la machine du client, on essayera la suivante), terminée par le nom d'une famille de polices (si aucune police n'a été trouvée, on prendra une police dans la famille spécifiée) ; cinq familles sont distinguées :
    • serif (Times, etc.)
    • sans-serif (Arial, Helvetica, etc.)
    • cursive
    • monospace (machine à écrire comme Courrier)
    • fantasy
  • font-size
  • font-style (normal, italic, oblique)
  • font-variant (normal, small-caps)
  • font-weight (de 100 à 900, normal, bold)

Mise en forme du texte

  • white-space (normal, pre, nowrap) ;
  • word-spacing : l'espace entre les mots ;
  • letter-spacing : l'espace entre deux lettres au sein d'un même mot ;
  • text-decoration (none, underline, overline, line-through, blink) ;
  • text-transform (none, uppercase, lowercase, capitalize) ;
  • text-shadow.
Pour faire disparaître le soulignement des liens :
  A:hover {
	  text-decoration: none;
	  }
 

Agencement du texte

  • display (block, inline)
  • text-align (left, center, right, justify)
  • text-indent (taille du retrait de première ligne)
  • line-height (hauteur de ligne)
  • vertical-align (baseline, super, top, text-top, middle, text-bottom, bottom, sub)

Mise en forme de listes

  • list-style-type (none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, disc, circle, square) : type de numérotation ou de puce ;
  • list-style-image (none ou url(nom de fichier image)) : permet de spécifier une image servant de puce pour les listes ;
  • list-style-position (inside, outside) : position de la liste par rapport au reste du texte (décalage vers la droite ou pas) ;
  • list-style.

Couleurs et arrière-plans

  • color (rgb(0,0,255)) : couleur du texte ;
  • background-color : couleur du fond ;
  • background-image (url, ou uri ?) : image de fond ;
  • background-repeat (repeat, repeat-x, repeat-y, no-repeat) : mode de réplication de l'image de fond ;
  • background-attachement (scroll, fixed) : défilement ou non de l'image de fond ;
  • background-position : position d'ancrage du coin supérieur gauche de l'image de fond dans l'élément stylé ; avec des valeurs négatives et en jouant sur hauteur et largeur de l'élément, on fait des sprites.

Retraits extérieurs et intérieurs

  • margin, margin-top, margin-bottom, margin-left, margin-right : retraits extérieurs ;
  • padding, padding-top, padding-bottom, padding-left, padding-right : retraits intérieurs.

Cadres

  • border, border-top, border-bottom, border-left, border-right ;
  • border-style, border-style-top, border-style-bottom, border-style-left, border-style-right (solid, double, groove, ridge, inset, outset, dotted, dashed) ;
  • border-width ;
  • border-color.

Positionnement absolu des éléments

Balises div et span
  • position (static, absolute, relative)
  • top
  • left
  • width
  • height
  • visibility (visible, hidden)
  • z-index: indique dans quel ordre doivent apparaître des éléments superposés (uniquement pour des éléments positionnés de manière absolue).

Les pseudo-classes

  • P:first-letter, P:first-line ;
  • :link, :visited
  • :hover (passage de souris), :active, :focus
  • :lang
  • :after, :before
Fabien Torre Valid HTML5! Valid CSS!
Accueil > Enseignement > Cours > Documents numériques > CSS
(contenu mis à jour )
site de Fabien Torre, université de Lille

Description

Survoler un lien de navigation pour lire sa description ici...