Vous lisez : 9 Feuilles de Style
Partie Précédente : 8 Tableaux
Partie Suivante : 10 Scripts
9 Feuilles de Style
Les feuilles de style sont le seul et unique mécanisme préconisé par HTML 4.0 pour contrôler
l'aspect visuel du document. La plupart des éléments et attributs qui permettaient d'exercer
un tel contrôle dans les versions antérieures du langage sont en effet désormais déconseillés
et pourraient disparaître dès la prochaine version.
Une feuille de style regroupe des règles de présentation que l'on peut appliquer à des éléments
HTML dans un document. Ces règles sont exprimées dans un langage indépendant de
HTML. En fait, HTML n'impose pas un langage de feuille de style particulier, en pratique, toutefois
le langage Cascading Style Sheet (CSS) [13] tend à s'imposer.
9.1 Association de feuilles de style à un document HTML
HTML 4.0 offre une grande flexibilité au niveau de la localisation des feuilles de style.
Une feuille de style peut ainsi résider dans un fichier à part, ce qui permet de la partager entre
plusieurs documents, elle peut se trouver à l'intérieur même du document HTML ou bien elle
peut aussi être répartie au niveau même de chaque élément, grâce à l'attribut style
.
L'inclusion d'une feuille de style externe est réalisée au moyen de l'élément
LINK
(voir § 6.5) :
<HEAD>
<LINK href="EPFLStyle.css" rel="stylesheet" type="text/css">
...
</HEAD>
Une feuille de style interne est définie à l'intérieur d'un élément STYLE
intervenant à l'intérieur
de l'élément HEAD
:
<HEAD>
<STYLE type="text/css">
H1 { text-align: center; color: red}
</STYLE>
</HEAD>
Une spécification de style en ligne se fait au moyen de l'attribut style
supporté par la
plupart des éléments :
<P type="text/css" style="font-size: 12pt; color: red">
Cette dernière pratique est à éviter et ne se justifie que pour des surcharges extrêmement
localisées d'un style général défini par exemple en début de document à l'intérieur d'un élément
STYLE
.
Plusieurs feuilles de style internes et/ou externes peuvent être spécifiées pour permettre
de paramétrer le rendu sur des supports différents. Le support auquel s'applique la feuille de style
est décrit par l'attribut media
. Plusieurs feuilles de style peuvent également s'appliquer au
même media, le langage CSS a en effet la particularité de pouvoir fusionner des spécifications
de style intervenant à plusieurs niveaux, permettant ainsi de combiner une feuille externe avec
une feuille générale interne (élément STYLE
), une spécification locale (attribut style
) et des
préférences lecteur (définies par exemple par l'utilisateur dans la configuration de son visualiseur).
Tableau 19 : Feuille de style interne (STYLE
)
<STYLE>
| Une définition de feuille de style
|
| TYPE (OBLIG.)
| Le langage utilisé pour la feuille de style. Le plus souvent text/css
|
MEDIA
| Support de rendu auquel cette feuille de style s'applique : screen , print ,
projection , braille , speech , all
|
TITLE
| Titre de la feuille de style
|
9.2 Les éléments DIV et SPAN
Les éléments DIV
et SPAN
sont particulièrement utiles en combinaison avec les feuilles
de style. Tous deux n'apportent aucune information de structure sur le document contrairement
aux autres éléments HTML, leur rôle est simplement d'englober du texte de manière à pouvoir
en modifier les propriétés d'affichage grâce à une feuille de style. DIV
est un élément de niveau
bloc (qui termine un paragraphe ouvert et est entouré généralement de sauts de ligne), SPAN
est
un élément de niveau texte (voir Ch. 6).
<HEAD>
<STYLE>
SPAN.avertissement { color: red }
</STYLE>
</HEAD>
...
La copie de ce document sans autorisation
est <SPAN class="avertissement">interdite</SPAN> sous peine...
...
9.3 Cascading Style Sheets
9.3.1 Syntaxe générale du langage
Une feuille de style CSS est composée d'une séquence de règles (rules), chacune de ces
règles est composée d'un sélecteur (selector) et d'une déclaration (declaration). Une déclaration
associe une valeur (value) à une propriété (property).
<HEAD>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
Dans cet exemple H1
est le sélecteur dont le rôle est de limiter la portée de la déclaration
qui le suit. La déclaration associe la valeur blue
à la propriété color
indiquant ainsi que la
couleur des éléments H1
du document doivent être affichés en bleu. On peut associer plusieurs
déclarations au même délimiteur en les séparant par ;
et utiliser des déclarateurs multiples au
moyen du séparateur ,
:
<HEAD>
<STYLE type="text/css">
H1 { color: blue; font-size: 14pt }
H2, H3 { font-size: 12pt }
</STYLE>
</HEAD>
Le plus souvent les délimiteurs sont ainsi des éléments HTML. Toutefois on peut ne faire
porter une déclaration de style que sur un sous-ensemble nommé d'éléments d'un certain type.
Par exemple, faire en sorte que des paragraphes d'annotation soient affichés en rouge. Pour cela
il faut déclarer ces paragraphes dans le document comme appartenant à la classe annotation
en utilisant l'attribut class
(voir § 5.1) :
<P class="annotation">Une annotation importante
<P>Suivie d'un paragraphe normal
Le délimiteur ne concernant que les paragraphes de classe annotation
s'écrit alors
P.annotation
, ce qui donne la règle suivante :
<HEAD>
<STYLE type="text/css">
P.annotation { color: red}
</STYLE>
</HEAD>
...
<P class="annotation">Note: Ceci est important</P>
...
De même un délimiteur peut n'affecter qu'une seule instance d'un élément dans le document,
il suffit pour cela de donner un identificateur unique à cette instance au moyen de l'attribut
id
(voir § 5.1) et de le référencer dans le délimiteur grâce au séparateur #
au lieu de .
.
9.3.2 Propriétés usuelles
Unités de longueur. Là où des propriétés admettent des longueurs comme valeur, celles-ci peuvent
être exprimées en différentes unités :
- Unités relatives à la police courante
em
: la largeur de la lettre m dans la police courante
ex
: la hauteur du x dans la police courante
px
: pixels du dispositif d'affichage
- Unités absolues
in
: pouces, 1 pouce vaut 2.54 cm
cm
: centimètres
mm
: millimètres
pt
: points typographiques, 1 point correspond à 1/72ème de pouce
pc
: picas, 1 pica est égal à 12 points
Couleurs. CSS2 prévoit différentes façons de spécifier des couleurs : soit par mot-clé (aqua
,
black
, blue
, fuchsia
, gray
, green
, lime
, maroon
, navy
, olive
, purple
, red
, silver
,
teal
, white
et yellow
), soit par triplet de composantes rouge/vert/bleu de la forme suivante :
EM { color: #f00 } /* #rgb en hexadécimal*/
EM { color: #ff0000 } /* #rrggbb en hexadécimal */
EM { color: rgb(255,0,0) } /* entier de 0 à 255 */
EM { color: rgb(100%, 0%, 0%) } /* flottant de 0.0% à 100.0% */
URL. Certains éléments admettent comme valeur un URL (ou plus exactement un URI). La
syntaxe est la suivante :
BODY { background-image: url(marble.gif) }
Propriétés.CSS définit plus d'une centaine de propriétés [13]. En voici quelques unes parmi
les plus usuelles.
Tableau 20 : CSS2 : Propriétés usuelles
Couleurs
| color
| La couleur d'avant-plan
|
background-color
| La couleur d'arrière plan
|
background-image
| Une image à utiliser comme fond
|
Polices
| font-family
| Une liste de familles de la police à utiliser
|
P { font-family: Baskerville, "Heisi Mincho W3", Symbol }
|
font-style
| normal , italic , oblique
|
font-weight
| normal , bold , bolder , lighter
|
font-size
| La taille de la police exprimée soit par une taille absolue
déterminée par le visualiseur (xx-small , x-small ,
small , medium , large , x-large , xx-large ), soit par
une mesure relative (larger , smaller ) soit par une
mesure de longueur soit par un pourcentage par rapport à
l'élément englobant
|
font
| Un raccourci pour toutes les propriétés ci-dessus
|
P { font: bold italic large Palatino, serif }
|
Texte
| text-indent
| Indentation de la première ligne d'un bloc
|
text-align
| Alignement horizontal d'un bloc de texte : left , right ,
center , justify. Peut être également utilisé pour les
cellules de tableau.
|
text-decoration
| Attributs additionnels de décoration : underline ,
overline , line-through , blink
|
text-transform
| Modification de la capitalisation d'un bloc de texte :
capitalize , uppercase , lowercase
|
Espacement
| margin-top
margin-right
margin-botoom
margin-left
| Largeur de marge. La valeur est soit une longueur, soit un
pourcentage de la boite englobante.
margin est un raccourci pour ces quatre spécifications
individuelles.
|
padding-top
padding-right
padding-botoom
padding-left
| Largeur de remplissage (cette zone de remplissage entoure
la zone d'affichage et est elle-même entourée par la zone
de marge). padding est un raccourci pour ces quatre spécifications
individuelles.
|
Bordures
| border-top-width
border-right-width
border-bottom-width
border-left-width
| Largeur de bordure. La valeur est soit une longueur soit
thin , medium ou thick . border-width est un raccourci
pour ces quatre spécifications individuelles.
|
border-style
| Le style de cadre : dotted (pointillé), dashed (pointillé
long), solid , double , groove (creusé), ridge (relief)
|
border-top-color
border-right-color
border-bottom-color
border-left-color
| Couleur de bordure. border-color est un raccourci pour
ces quatre spécifications individuelles.
|
border
| Raccourci pour les trois propriétés précédentes
|
Listes
| list-style-type
| Type de numérotation de la liste : disc , circle , square ,
decimal , lower-roman , upper-roman , lower-latin ,
upper-latin , ...
|
list-style-image
| Une image à utiliser comme marqueur d'élément de liste
(surcharge list-style-type ).
|
UL { list-style-image: url(http://png.com/ellipse.png) }
|
Tableaux
| caption-side
| Position de la légende du tableau : top , bottom , left ou
right .
|
vertical-align
| La hauteur d'une rangée dépend de la taille et du placement
des cellules qu'elle contient. Une cellule est donc souvent
moins haute que la hauteur de la rangée à laquelle elle
appartient. Cette propriété détermine l'alignement vertical
d'une cellule par rapport à sa rangée : baseline (aligne la
ligne de base texte de la cellule avec la ligne de base de la
rangée), bottom (le bas de la cellule coïncide avec le bas
de la rangée), top , middle
|
border-spacing
| Espacement des bordures de cellules. La spécification
comprend un ou deux longueurs (une seule longueur
s'applique à l'espacement horizontal et vertical), deux longueurs
correspondent respectivement à l'espacement horizontal
et vertical.
|
TABLE { border-spacing: 15pt }
|
empty-cells
| Attributs de bordure pour les cellules vides : border ou
noborder .
|
Copyright ©1996,1998 EPFL/DI-LSP.