Les feuilles de style en cascade
la norme CSS1 du W3C
Pour répondre à la demande des concepteur
web désireux d'améliorer les mises en page
HTML, le Consortium W3 a défini la norme CSS1 pour
"Cascading Style Sheets" ou feuilles de style en cascade.
Les FSC c'est d'abord la possibilité de redéfinir
les attributs attachées au balises standards permettant
ainsi la mise à jour dynamique d'un document HTML
déjà rédigé. Mais les FSC c'est
aussi un plus grand nombre de possibilités de mises
en forme typographiques : approches, interlignage...
Seul inconvénient : la norme CSS1 est récente
et seules les dernières versions (4) des navigateurs
Netscape et Internet Explorer interprètent correctement
le FSC.
Comment ça marche ?
Le concepteur web peut, au début, de son travail
redéfinir comme il l'entend les marqueurs HTML standards
en leur associant un ensembles de mises en forme élaborées.
Une fois sa page réalisée le concepteur peut,
s'il le souhaite, en changer totalement l'apparence, en
modifiant seulement les définitions initiales ou
styles qu'il a créés.
Ces définitions peuvent être stockées
dans un fichier externe (un feuille de styles). Toutes les
pages d'un site font référence à ce
fichier et la mise en forme du site ne dépend plus,
dès lors, que d'un seul document.
Suivez le guide :
C'est le tag <Style> qui permet la redéfinition
d'un marqueur HTML standard. Un peut ne l'utiliser que ponctuellement
comme ici :
<H2 STYLE="color: yellow">Ceci est un titre de niveau
hiérarchique 2 qui s'affichera en jaune.</H2>
Ou bien globalement, c'est à dire une fois pour toutes
dans l'en-tête du document :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1 {color : red ; font-family:sans-serif }
H2 {color: blue }
</STYLE>
</HEAD>
Tout titre de niveau 2 c'est-dire tout bloc marqué
par le tag <H2> sera désormais affiché
en bleu. S'il souhaite redéfinir la mise en forme
de toute sa page, le concepteur se contentera de modifier
les quelques lignes définissant les styles. Le gain
de temps est évident.
S'il s'agit de définir des styles pour un site entier
comprenant des centaines de pages maintenant, on préférera
définir les styles dans un seul fichier externe,
une feuille de styles, à laquelle toutes les pages
du site feront référence :
Ce fichier qui ne doit pas contenir de balise HTML sera
simplement un fichier texte contenant les définitions
requises :
/* ici débute ma feuille de style nommée "mesStyles.css"
*/
P { font-family:sans-serif}
B { color:blue }
H1 { color : red }
H2 { color: blue; letter-spacing : -2 em }
...
A noter : il est même possible de redéfinir
la balise <BODY> dans ce fichier externe :
BODY {font-family:Arial; font-size:12pt; background-color:#ff33cc}
Auquel cas, ce sont ces attributs de mise en forme qui seront
appliqués aux documents liés et ce en dépit
de leurs propres balises <BODY>.
Afin d'utiliser ces définitions dans un site, il
faudra relier chaque page du site au fichier externe à
l'aide de la balise LINK :
<HEAD>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://members.xoom.com/Crapo
web/mesStyles.css">
</HEAD>
La plupart des navigateurs, après avoir appelé
la feuille de style, la garderont dans leur cache. Les autres
pages du site qui l'utilisent n'auront donc pas à
attendre son chargement et seront affichées plus
rapidement
Il est possible de constituer un style global à l'aide
de plusieurs feuilles de style. Il faut alors utiliser le
même <TITLE> pour chacune des feuilles à
combiner avec les autres :
<HEAD>
<LINK REL=StyleSheet TYPE=" text/css " HREF=" Tableaux.css
" TITLE=" old style ">
<LINK REL=StyleSheet TYPE=" text/css " HREF=" typographie.css
" TITLE=" old style ">
<LINK REL=StyleSheet TYPE=" text/css " HREF=" formulaires.css
" TITLE=" old style ">
</HEAD>
Dans cet exemple, le style " old style " est constitué
des définitions fournies par trois fichiers externes
ou feuilles de style : Tableaux.css, typographie.css,
formulaires.css.
Les Styles imbriqués
Une balise à été redéfinie
globalement pour tout un site dans une feuille de style
externe (voir plus haut) , mais rien n'interdit l'utilisation
simultanée d'une feuille de style différente
dans l'en-tête d'une page du site puis, derechef,
l'utilisation ponctuelle du tag <STYLE> au sein de
cette page ! Lequel de ces styles aura priorité ?
On parle dans ce cas de styles en cascade. Les règles
concernant l'imbrication des feuilles de styles sont nombreuses
(et complexes voir plus haut avec la balise <BODY>)
mais on peut les simplifier en disant que les navigateur
donnent en général la priorité aux
styles les plus proches du bloc.
Les mises en formes possibles :
Un redéfinition de balise, un style est toujours
rédigé ainsi :
sélecteur { propriété : valeur }
lorsqu 'un style implique plusieurs propriétés,
on sépare celles-ci par un point-virgule :
STRONG { color: red ; font-size: large }
De nombreuses propriétés peuvent être
utilisées qui étendent considérablement
les possibilités de mises en forme offert par le
HTML. Voici une liste de propriétés utilisables
suivi de quelques valeurs exemples :
font-family : arial, helvetica, sans-serif
font-family : cursive
font-family : fantasy
font-family : monospace
font-family : serif
font-family : "new century schoolbook", times, verdana
font-style : normal
font-style : italic
font-variant : normal
font-variant : small-caps
font-weight : normal
font-weight : bold
font-weight : bolder
font-weight : lighter
font-size 12pt
font-size : 150%
font-size : xx-small
font-size : small
font-size : medium
font-size : large
font-size : x-large
font-size : larger
font-size : smaller
la propriété font permet de regrouper plusieurs
propriétés en une seule définition
: l'ordre est le suivant : font-style, font-variant, font-weight,
font-size / line-height, font-family. Les propriétés
omises sont fixées à leurs valeurs par défaut.
font : normal small-caps 12pt/14pt fantasy
font : 120% serif
color : red
color : rgb(255,0,0)
background-color : #F00
background-image : url(monImage.gif)
La propriété background-attachment détermine
si l'image de fond suit le défilement de la page.
Les valeurs possibles sont scroll (par défaut) et
fixed
background-attachment : fixed
word-spacing permet d'accroître d'une valeur spécifiée
la longueur de l'espace intermots.
word-spacing : normal
word-spacing : 0.4 em
letter-spacing permet d'accroître d'une valeur spécifiée
la longueur de l'écart interlettres.
letter-spacing : 0.1 em
letter-spacing : - 0.5 em
text-decoration : none
text-decoration : underline
text-decoration : overline
text-decoration : blink
vertical-align : top
vertical-align : middle
vertical-align : bottom
text-transform : capitalize
text-transform : lowercase
text-align : left
text-align : right
text-align : center
text-align : justify
text-indent : 3em
line-height : 1.5
line-height : 130 %
line-height : 1 em
border-width : thin
border-width : medium
border-color : black
border-style : dotted
border-style : solid
border-style : double
border-style : ridge
Les propriétés d'échelle width et height
peuvent être appliquées à des éléments
textuels mais sont plus utiles pour des images. Leurs valeurs
par défaut sont " auto ".
width : 100px
width : auto
height : auto
list-style-type : decimal
list-style-type : lower-alpha
list-style-type : upper-roman
La propriété list-style-image définit
l'image qui sera utilisée comme marqueur de liste.
list-style-image : url(petitRond.gif)
Pour une liste complète des propriétés
utilisables et des valeurs possibles consulter la recommandation
REC-CSS1-961217 du W3C.
|
