Ah! On y arrive! Les fameuses feuilles de style, la grande innovation de HTML 4. Grâce aux feuilles
de style, il est désormais possible de réaliser une mise en page impecable, sans utiliser des
dizaines d’images.
On peut aussi créer une mise en page qui sera appliquée à plusieurs documents. Ainsi, il suffira
de modifier la feuille de style pour changer l’apparence de tout les documents liés.
En fait, l’invention des feuilles de style ne date pas d’hier et existe depuis quelques temps
maintenant dans la spécification RTF et les traitements de texte.
Mais malheuresement, les navigateurs ne sont pas toujours fidéles à ces rêgles : si vous êtes
sous Microsoft Internet Explorer, les pages que vous lisez doivent être convenablement présentées.
Maintenant, si vous possédez Netscape Navigator, faites un tour sur mes pages…
Et oui, n’en déplaise aux anti-Microsoft, Internet Explorer est le navigateur le plus performant.
Théorie
Déjà, il faut savoir que tout élement HTML (un tableau, une division, un paragraphe…) est compris
dans un rectangle.
Partant de constat, on peut modifier les différentes propriétés de ce rectangle qui régissent
le type, la taille et la couleur de bordure, la couleur d’arrière plan, la police et la couleur
du texte…
Les possibilités sont donc très étendues.
Utilisation d’une feuille de style
L’utilisation d’une feuille de style peut se faire de 3 façons différentes pouvant néanmoins être
combinées les unes aux autres.
Fichier externe (balise <LINK>)
Déjà, on peut écrire toutes les rêgles de style dans un fichier distinct, puis l’inclure dans
le document choisi par le biais de la balise
<LINK> du type marqueur. Le fichier
devra alors avoir l’extension
.css.
Pour l’inclure dans le document HTML, on le mentionera tout simplement dans la section d’en-tête
(entre
<HEAD> et
</HEAD>) ainsi :
<HTML>
<HEAD>
<LINK href= »mystylesheet.css » rel= »stylesheet » type= »text/css »>
</HEAD>
<BODY>
Ceci est mon document HTML
</BODY>
</HTML>
L’attribut
href mentionne l’URL ou se trouve la feuille de style à inclure.
L’interêt de cette technique est que l’on peut ainsi appliquer un même style à une multitude de
document, sans pour autant définir les même rêgles de style de chaque document.
Ainsi, une simple modification dans le fichier externe permettra de modifier tout les documents
liés.
La balise <STYLE>
On peut également définir les rêgles de style directement dans le document, via la balise
<STYLE>
du type conteneur. Cette balise se trouvera dans la section d’en-tête du document.
Normalement, l’attribut
type doit être mentionné avec la valeur
text/css, mais
les navigateurs s’en sortent très bien sans lui. Mais bon, restez dans les rêgles de l’art du
parfait WebMaster et écrivez :
<HTML>
<HEAD>
<STYLE type= »text/css »>
Ici, ma feuille de style.
Attention! Ceci n’en est pas une 
</STYLE>
</HEAD>
<BODY>
Et ici, le document HTML classique
</BODY>
</HTML>
L’attribut STYLE
La dernière méthode pour appliquer un style à un élement est d’utiliser l’attribut commun à toute
les balises : l’attribut
style.
Son emploi se fait comme pour n’importe quel autre attribut :
<H2 style= »Rêgle de style pour le titre. Ceci n’en est pas une »>Titre de
niveau 2</H2>
<P style= »Rêgle de style pour le paragraphe. Ceci n’en est pas une »>Ceci est
un paragraphe auquel est appliqué une rêgle de style par l’attribut <B>style</B></P>
Exemples
Nous allons tracer une bordure bleu autour d’un paragraphe (et oui, on peut). Pour faire un
paragraphe, on utilise la balise
<P>. C’est donc sur cet élement qu’il va falloir
agir.
Pour agir sur un élement HTML dans une feuille de style, il suffit d’écrire son nom sans les
>
et
<. Puis, à la manière du C++, on ouvre une acolade
{. Ensuite, on écrit
les propriétés et les valeurs qu’elles doivent avoir, et on referme le tout avec l’acolade fermante
}.
Pour affecter une valeur, on utilise non pas le signe égual (
=), mais le double points
(
:). Et à la fin de chaque couple
propriété:valeur, on rajoute un point virgule
(comme en Pascal ou en C++), ce qui nous donne le schéma suivant :
<STYLE type= »text/css »>
BALISE{
propriete1:valeur1;
propriete2:valeur2;
propriete3:valeur3;
}
</STYLE>
La propriété qui régie la bordure se nomme tout simplement
border. Mais la bordure elle même
à plusieurs propriétés, comme la taille, le style ou la couleur.
Pour accéder à ces différentes proriétés, on utilisera :
- border-color pour la couleur
- border-style pour le style
- border-width pour l’épaisseur
Exemple :
<HTML>
<HEAD>
<STYLE type= »text/css »>
P{
border-color:blue;
border-style:solid;
border-width:1;
}
</STYLE>
</HEAD>
<BODY>
<P>Au sommet de Piancavallo, une autre course commence. Dès les premières rampes de
l’ascension finale, longue de 12 km, le «Pirate» redevient un aigle. Pavel
Tonkov, qui a eu l’art de se cacher jusqu’alors, tente un moment de lui emboîter le pas.
Peine perdue.<BR>
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce
qu’il à besoin d’avoir «le cœur en paix ». La montagne lui manque. Il se
refuse à penser au lendemain, alors qu’il ferait mieux d’en garder sous la pédale pour le
contre-la-montre de Trieste. Mais il ne creuse pas d’écart monstrueux. Là-haut, il devance
de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur du Giro 1997, est écarté de la lutte.
Ses 5′ de retard sont le signe d’un virus impossible à guérir au beau milieu de la
course.<BR>
<I>Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar</I></P>
</BODY>
</HTML>
Résulat :
Au sommet de Piancavallo, une autre course commence. Dès les premières rampes de l’ascension finale,
longue de 12 km, le «Pirate» redevient un aigle. Pavel Tonkov, qui a eu l’art de se cacher
jusqu’alors, tente un moment de lui emboîter le pas. Peine perdue.
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce qu’il à besoin
d’avoir «le cœur en paix ». La montagne lui manque. Il se refuse à penser au lendemain,
alors qu’il ferait mieux d’en garder sous la pédale pour le contre-la-montre de Trieste. Mais il ne
creuse pas d’écart monstrueux. Là-haut, il devance de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur
du Giro 1997, est écarté de la lutte. Ses 5′ de retard sont le signe d’un virus impossible à guérir au
beau milieu de la course.
Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar
C’est bien, mais on n’aimerai bien laisser une marge de 30 pixels entre la bordure et le document.
Pour cela, rien de plus simple : on va agir sur la propriété
magin du paragraphe.
On modifiera donc la feuille de style en conséquent :
<STYLE type= »text/css »>
P{
border-color:blue;
border-style:solid;
border-width:1;
margin:30;
}
</STYLE>
Cette fois-ci, ça donne :
Au sommet de Piancavallo, une autre course commence. Dès les premières rampes de l’ascension finale,
longue de 12 km, le «Pirate» redevient un aigle. Pavel Tonkov, qui a eu l’art de se cacher
jusqu’alors, tente un moment de lui emboîter le pas. Peine perdue.
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce qu’il à besoin
d’avoir «le cœur en paix ». La montagne lui manque. Il se refuse à penser au lendemain,
alors qu’il ferait mieux d’en garder sous la pédale pour le contre-la-montre de Trieste. Mais il ne
creuse pas d’écart monstrueux. Là-haut, il devance de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur
du Giro 1997, est écarté de la lutte. Ses 5′ de retard sont le signe d’un virus impossible à guérir au
beau milieu de la course.
Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar
Mais maintenant, on veut laisser un espace de 5 pixels entre la bordure et le texte du paragraphe.
Il va falloir agir sur la propriété
padding du paragraphe.
Voici la feuille de style une fois mise à jour :
<STYLE type= »text/css »>
P{
border-color:blue;
border-style:solid;
border-width:1;
margin:30;
padding:5;
}
</STYLE>
Résultat :
Au sommet de Piancavallo, une autre course commence. Dès les premières rampes de l’ascension finale,
longue de 12 km, le «Pirate» redevient un aigle. Pavel Tonkov, qui a eu l’art de se cacher
jusqu’alors, tente un moment de lui emboîter le pas. Peine perdue.
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce qu’il à besoin
d’avoir «le cœur en paix ». La montagne lui manque. Il se refuse à penser au lendemain,
alors qu’il ferait mieux d’en garder sous la pédale pour le contre-la-montre de Trieste. Mais il ne
creuse pas d’écart monstrueux. Là-haut, il devance de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur
du Giro 1997, est écarté de la lutte. Ses 5′ de retard sont le signe d’un virus impossible à guérir au
beau milieu de la course.
Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar
C’est encore mieux. Compliquons encore un petit peu. En hommage à Pantani et à la Mercatone Uno,
nous allons écrire le texte en vert sur un fond jaune.
La propriété qui contrôle la couleur de fond se nomme
background-color. Pour le texte,
on écrira tout simplement
color :
<STYLE type= »text/css »>
P{
border-color:blue;
border-style:solid;
border-width:1;
margin:30;
padding:5;
background-color:yellow;
color:green;
}
</STYLE>
Ce qui nous donne :
Au sommet de Piancavallo, une autre course commence. Dès les premières rampes de l’ascension finale,
longue de 12 km, le «Pirate» redevient un aigle. Pavel Tonkov, qui a eu l’art de se cacher
jusqu’alors, tente un moment de lui emboîter le pas. Peine perdue.
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce qu’il à besoin
d’avoir «le cœur en paix ». La montagne lui manque. Il se refuse à penser au lendemain,
alors qu’il ferait mieux d’en garder sous la pédale pour le contre-la-montre de Trieste. Mais il ne
creuse pas d’écart monstrueux. Là-haut, il devance de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur
du Giro 1997, est écarté de la lutte. Ses 5′ de retard sont le signe d’un virus impossible à guérir au
beau milieu de la course.
Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar
C’est bien, mais maitenant on veut que la source du livre d’où a été tiré ce passage de la passionante
histoire du cyclisme (au fait, c’était le Tour d’Italie 1998 briallement remporté par Marco Pantani,
lors de la 14
ème de 165
kms, de Schio à Piancavallo) apparaisse en noir,
et en caractère plus petits.
No Problemo, pour l’écrire en italique on a fait justement appel à la balise
<I>.
On va logiquement agir sur celle ci. Pour la couleur du texte, vous savez faire. Pour la taille
de la police, on agit sur la propriété
font-size. Vu que l’on veut écrire tout petit, la
valeur a utiliser sera
xx-small.
Voici maintenant l’aspect de la feuille de style :
<STYLE type= »text/css »>
P{
border-color:blue;
border-style:solid;
border-width:1;
margin:30;
padding:5;
background-color:yellow;
color:green;
}
I{
color:black;
font-size:xx-small;
}
</STYLE>
Et voici l’aspect du paragraphe :
Au sommet de Piancavallo, une autre course commence. Dès les premières rampes de l’ascension finale,
longue de 12 km, le «Pirate» redevient un aigle. Pavel Tonkov, qui a eu l’art de se cacher
jusqu’alors, tente un moment de lui emboîter le pas. Peine perdue.
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce qu’il à besoin
d’avoir «le cœur en paix ». La montagne lui manque. Il se refuse à penser au lendemain,
alors qu’il ferait mieux d’en garder sous la pédale pour le contre-la-montre de Trieste. Mais il ne
creuse pas d’écart monstrueux. Là-haut, il devance de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur
du Giro 1997, est écarté de la lutte. Ses 5′ de retard sont le signe d’un virus impossible à guérir au
beau milieu de la course.
Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar
Maintenant, on voudrait diminuer la largeur de ce paragraphe à 200 pixels, et le placer à la
droite du document.
Pour agir sur la largeur, on utilisera tout simplement
width :
<STYLE type= »text/css »>
P{
border-color:blue;
border-style:solid;
border-width:1;
margin:30;
padding:5;
background-color:yellow;
color:green;
width:200;
}
I{
color:black;
font-size:xx-small;
}
</STYLE>
Et voici le paragraphe :
Au sommet de Piancavallo, une autre course commence. Dès les premières rampes de l’ascension finale,
longue de 12 km, le «Pirate» redevient un aigle. Pavel Tonkov, qui a eu l’art de se cacher
jusqu’alors, tente un moment de lui emboîter le pas. Peine perdue.
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce qu’il à besoin
d’avoir «le cœur en paix ». La montagne lui manque. Il se refuse à penser au lendemain,
alors qu’il ferait mieux d’en garder sous la pédale pour le contre-la-montre de Trieste. Mais il ne
creuse pas d’écart monstrueux. Là-haut, il devance de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur
du Giro 1997, est écarté de la lutte. Ses 5′ de retard sont le signe d’un virus impossible à guérir au
beau milieu de la course.
Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar
C’est presque super. Mais on veut maitenant
justifier le texte, pour combler ces affreux
espaces.
Pas de problèmes. Pour justifier le texte, on peut soit utiliser directement l’attribut
align
de la balise
<P>, soit utiliser la propriété
text-align, associée à
la valeur
justify :
<STYLE type= »text/css »>
P{
border-color:blue;
border-style:solid;
border-width:1;
margin:30;
padding:5;
background-color:yellow;
color:green;
width:200;
text-align:justify;
}
I{
color:black;
font-size:xx-small;
}
</STYLE>
Résultat final (ouf !):
Au sommet de Piancavallo, une autre course commence. Dès les premières rampes de l’ascension finale,
longue de 12 km, le «Pirate» redevient un aigle. Pavel Tonkov, qui a eu l’art de se cacher
jusqu’alors, tente un moment de lui emboîter le pas. Peine perdue.
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce qu’il à besoin
d’avoir «le cœur en paix ». La montagne lui manque. Il se refuse à penser au lendemain,
alors qu’il ferait mieux d’en garder sous la pédale pour le contre-la-montre de Trieste. Mais il ne
creuse pas d’écart monstrueux. Là-haut, il devance de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur
du Giro 1997, est écarté de la lutte. Ses 5′ de retard sont le signe d’un virus impossible à guérir au
beau milieu de la course.
Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar
Et si on avait eu un deuxième paragraphe ? Et bien il aurrait été formaté suivant la même rêgle
de style. Cette effet peut dans certains cas être recherché. Mais dans d’autres cas, on voudra
pouvoir utiliser un autre style pour un autre paragraphe.
Il suffit d’utiliser ce que l’on appelle une
classe. Pour la créer, il faut écrire dans
la feuille de style son nom précédé d’un point (
.) à la suite du nom de l’élement (toujours
sans les
< et
>).
Maintenant, Marco Pantani prend le maillot rose à l’occasion de la 17
ème étape ralliant
Asiago à Selva di Val Gardena. Pour celebrer cet évenement, on va écrire un paragraphe sur fond
rose avec du texte bleu (tout en gardant l’ancien paragraphe).
Il va donc nous falloir modifier notre feuille de style et créer deux classes : une pour le premier
paragraphe que nous appellerons
Piancavallo et une seconde pour l’autre
ValGardena.
À partir de ce moment, il existe plusieurs façons de procéder :
- On ré-ecrit les deux même rêgles de style à l’identique pour les deux paragraphes, en changeant
seulement les propriétés background-color et color :
<STYLE type= »text/css »>
P.Piancavallo{
border-color:blue;
border-style:solid;
border-width:1;
margin:30;
padding:5;
background-color:yellow;
color:green;
width:200;
text-align:justify;
}
P.ValGardena{
border-color:blue;
border-style:solid;
border-width:1;
margin:30;
padding:5;
background-color:pink;
color:blue;
width:200;
text-align:justify;
}
I{
color:black;
font-size:xx-small;
}
</STYLE>
- On créér un style sans nom de classe, avec toutes les propriétés, sauf les fameuses propriétés
background-color et color. Ensuite, on créer les deux classes
Piancavallo et ValGardena avec les couleurs d’arrière plan et du texte correspondantes :
<STYLE type= »text/css »>
P{
border-color:blue;
border-style:solid;
border-width:1;
margin:30;
padding:5;
width:200;
text-align:justify;
}
P.Piancavallo{
background-color:yellow;
color:green;
}
P.ValGardena{
background-color:pink;
color:blue;
}
I{
color:black;
font-size:xx-small;
}
</STYLE>
Evidement, la méthode la plus adaptée et la plus structurée est la deuxième. C’est celle que nous
allons utiliser.
Mais c’est bien beau de créer des classes, encore faut-il les utilisées. Rien de plus simple :
on va faire appelle à l’attribut commun
class. L’utilisation en est enfantine : il suffit
d’écrire le nom de la classe à utiliser à sa suite :
<HTML>
<HEAD>
<STYLE type= »text/css »>
P{
border-color:blue;
border-style:solid;
border-width:1;
margin:30;
padding:5;
width:200;
text-align:justify;
}
P.Piancavallo{
background-color:yellow;
color:green;
}
P.ValGardena{
background-color:pink;
color:blue;
}
I{
color:black;
font-size:xx-small;
}
</STYLE>
</HEAD>
<BODY>
<P class= »Piancavalo »>Au sommet de Piancavallo, une autre course commence. Dès les
premières rampes de l’ascension finale, longue de 12 km, le «Pirate» redevient
un aigle. Pavel Tonkov, qui a eu l’art de se cacher jusqu’alors, tente un moment de lui
emboîter le pas. Peine perdue.<BR>
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce
qu’il à besoin d’avoir «le cœur en paix ». La montagne lui manque. Il se
refuse à penser au lendemain, alors qu’il ferait mieux d’en garder sous la pédale pour le
contre-la-montre de Trieste. Mais il ne creuse pas d’écart monstrueux. Là-haut, il devance
de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur du Giro 1997, est écarté de la lutte.
Ses 5′ de retard sont le signe d’un virus impossible à guérir au beau milieu de la
course.<BR>
<I>Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar</I></P>
<P class= »ValGardena »>Tonkov attaque sur la Marmolada, le col le plus redoutable du
Giro. Pantani et Guerini le contrent. Les deux hommes parlement. Leurs intérêts convergent.
A l’un le maillot, à l’autre l’étape. Car Zülle est en perdition, sur, dit-il, «la côte
la plus dure de ma vie». La course va tellement vite à l’avant que 45 concurrents
rentrent à la maison, la plupart terminant hors délais; parmi eux Bartoli, Guidi, Edo,
Fontanelli, Gotti, Cipollini… Le Giro redouble d’intérêt : Pantani découvre le bonheur en
rose, mais Tonkov pointe à 30 », Guerini à 31 », Zülle à 1′. Le Suisse n’a perdu que le
bénéfice du contre-la-montre, pas encore le classement final. Il entend se refaire dès le
lendemain en montant à l’Alpe de Pampeago, mais Pantani lui coupe l’herbe sous le pied.
Ce n’est plus Guerini, mais Tonkov, qui tient son rythme. Le Russe devient l’ennemi numéro
un d’une Italie dont le cœur bat pour le «Pirate».<BR>
<I>Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar</I></P>
</BODY>
</HTML>
Au sommet de Piancavallo, une autre course commence. Dès les premières
rampes de l’ascension finale, longue de 12 km, le «Pirate» redevient un aigle. Pavel Tonkov,
qui a eu l’art de se cacher jusqu’alors, tente un moment de lui emboîter le pas. Peine perdue.
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce qu’il à besoin
d’avoir «le cœur en paix ». La montagne lui manque. Il se refuse à penser au lendemain,
alors qu’il ferait mieux d’en garder sous la pédale pour le contre-la-montre de Trieste. Mais il ne
creuse pas d’écart monstrueux. Là-haut, il devance de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur
du Giro 1997, est écarté de la lutte. Ses 5′ de retard sont le signe d’un virus impossible à guérir au
beau milieu de la course.
Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar
Tonkov attaque sur la Marmolada, le col le plus redoutable du Giro. Pantani
et Guerini le contrent. Les deux hommes parlement. Leurs intérêts convergent. A l’un le maillot, à l’autre
l’étape. Car Zülle est en perdition, sur, dit-il, «la côte la plus dure de ma vie». La course
va tellement vite à l’avant que 45 concurrents rentrent à la maison, la plupart terminant hors délais;
parmi eux Bartoli, Guidi, Edo, Fontanelli, Gotti, Cipollini… Le Giro redouble d’intérêt : Pantani
découvre le bonheur en rose, mais Tonkov pointe à 30 », Guerini à 31 », Zülle à 1′. Le Suisse n’a perdu
que le bénéfice du contre-la-montre, pas encore le classement final. Il entend se refaire dès le lendemain
en montant à l’Alpe de Pampeago, mais Pantani lui coupe l’herbe sous le pied. Ce n’est plus Guerini, mais
Tonkov, qui tient son rythme. Le Russe devient l’ennemi numéro un d’une Italie dont le cœur bat pour
le «Pirate».
Le Livre d’Or du Cyclisme 1998 – Jean François Quénet – Editions Solar
Utilisation de l’attribut STYLE
L’utilisation de l’attribut
syle n’est pas plus compliquée, en réalité, elle est même plus
simple. En fait, une rêgle de style inscrite dans un attribut ne s’appliquera que dans l’élement
au il se trouve, ce qui fait que tout les autres élements du document ne seront en rien affectés
par le contenu de cet attribut.
Vu que les rêgles ne vont s’appliquer qu’a un élement, il n’est plus utile de spécifier le nom de
l’élement. Les parenthéses deviennent donc inutiles. Voici un exemple permettant de modifier
le style de la source des textes :
<HTML>
<HEAD>
<STYLE type= »text/css »>
P{
border-color:blue;
border-style:solid;
border-width:1;
margin:30;
padding:5;
width:200;
text-align:justify;
}
P.Piancavallo{
background-color:yellow;
color:green;
}
P.ValGardena{
background-color:pink;
color:blue;
}
I{
color:black;
font-size:xx-small;
}
</STYLE>
</HEAD>
<BODY>
<P class= »Piancavalo »>Au sommet de Piancavallo, une autre course commence. Dès les
premières rampes de l’ascension finale, longue de 12 km, le «Pirate» redevient
un aigle. Pavel Tonkov, qui a eu l’art de se cacher jusqu’alors, tente un moment de lui
emboîter le pas. Peine perdue.<BR>
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce
qu’il à besoin d’avoir «le cœur en paix ». La montagne lui manque. Il se
refuse à penser au lendemain, alors qu’il ferait mieux d’en garder sous la pédale pour le
contre-la-montre de Trieste. Mais il ne creuse pas d’écart monstrueux. Là-haut, il devance
de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur du Giro 1997, est écarté de la lutte.
Ses 5′ de retard sont le signe d’un virus impossible à guérir au beau milieu de la
course.<BR>
<I style= »background-color:white; »>Le Livre d’Or du Cyclisme 1998 – Jean François
Quénet – Editions Solar</I></P>
<P class= »ValGardena »>Tonkov attaque sur la Marmolada, le col le plus redoutable du
Giro. Pantani et Guerini le contrent. Les deux hommes parlement. Leurs intérêts convergent.
A l’un le maillot, à l’autre l’étape. Car Zülle est en perdition, sur, dit-il, «la côte
la plus dure de ma vie». La course va tellement vite à l’avant que 45 concurrents
rentrent à la maison, la plupart terminant hors délais; parmi eux Bartoli, Guidi, Edo,
Fontanelli, Gotti, Cipollini… Le Giro redouble d’intérêt : Pantani découvre le bonheur en
rose, mais Tonkov pointe à 30 », Guerini à 31 », Zülle à 1′. Le Suisse n’a perdu que le
bénéfice du contre-la-montre, pas encore le classement final. Il entend se refaire dès le
lendemain en montant à l’Alpe de Pampeago, mais Pantani lui coupe l’herbe sous le pied.
Ce n’est plus Guerini, mais Tonkov, qui tient son rythme. Le Russe devient l’ennemi numéro
un d’une Italie dont le cœur bat pour le «Pirate».<BR>
<I style= »background-color:white; »>Le Livre d’Or du Cyclisme 1998 – Jean François
Quénet – Editions Solar</I></P>
</BODY>
</HTML>
Et voici le résultat :
Au sommet de Piancavallo, une autre course commence. Dès les premières
rampes de l’ascension finale, longue de 12 km, le «Pirate» redevient un aigle. Pavel Tonkov,
qui a eu l’art de se cacher jusqu’alors, tente un moment de lui emboîter le pas. Peine perdue.
On a retrouvé le vrai Marco Pantani, impossible à suivre en côte. Il donne tout, parce qu’il à besoin
d’avoir «le cœur en paix ». La montagne lui manque. Il se refuse à penser au lendemain,
alors qu’il ferait mieux d’en garder sous la pédale pour le contre-la-montre de Trieste. Mais il ne
creuse pas d’écart monstrueux. Là-haut, il devance de 13 » Tonkov et Zülle. Seul Ivan Gotti, le vainqueur
du Giro 1997, est écarté de la lutte. Ses 5′ de retard sont le signe d’un virus impossible à guérir au
beau milieu de la course.
Le Livre d’Or du Cyclisme 1998 – Jean François
Quénet – Editions Solar
Tonkov attaque sur la Marmolada, le col le plus redoutable du Giro. Pantani
et Guerini le contrent. Les deux hommes parlement. Leurs intérêts convergent. A l’un le maillot, à l’autre
l’étape. Car Zülle est en perdition, sur, dit-il, «la côte la plus dure de ma vie». La course
va tellement vite à l’avant que 45 concurrents rentrent à la maison, la plupart terminant hors délais;
parmi eux Bartoli, Guidi, Edo, Fontanelli, Gotti, Cipollini… Le Giro redouble d’intérêt : Pantani
découvre le bonheur en rose, mais Tonkov pointe à 30 », Guerini à 31 », Zülle à 1′. Le Suisse n’a perdu
que le bénéfice du contre-la-montre, pas encore le classement final. Il entend se refaire dès le lendemain
en montant à l’Alpe de Pampeago, mais Pantani lui coupe l’herbe sous le pied. Ce n’est plus Guerini, mais
Tonkov, qui tient son rythme. Le Russe devient l’ennemi numéro un d’une Italie dont le cœur bat pour
le «Pirate».
Le Livre d’Or du Cyclisme 1998 – Jean François
Quénet – Editions Solar
Les identificateurs et les commentaires
À la manière de n’importe quel langage qui se respecte, les feuilles de style permettent l’utilisation
des
commentaires, afin de faciliter la compréhension de tel ou tel rêgle de style ou bien
pour passer sous silence facilement (pour des tests par exemple) une portion de la feuille de style.
Les commentaires sont identiques à ceux utilisés en JavaScript et en C++ : le début commence par
/* et sa fin par
*/. Tout le texte écrit entre ces deux élements est ignoré :
<STYLE type= »text/plain »>
/* Ceci est un commentaire dans une feuille de style */
</STYLE>
Les
indentificateurs permettent d’appliquer un même style, mais à des élements pouvant être totalement
différents.
Par exemple, grâce aux identificateurs, on pourra écrire tout les textes écrits en gras, italiques,
soulignés, barré etc… d’une certaine façon, bien qu’il faille pourtant employer des balises
différentes.
Un identificateur ne comporte pas de nom de balise : il est seulement constitué du caractère
dièse (
#) et le nom de l’identificateur à la suite.
L’énonciation des rêgles de style quand elle ne change pas : il faut toujours utiliser les accolades.
Ensuite, pour utiliser l’identificateur, il suffira de mentionner son nom dans la balise par le
biais de l’attribut commun
id :
<HTML>
<HEAD>
<STYLE type= »text/css »>
#Ident{ /* Ident est l’identificateur */
color:yellow;
}
</STYLE>
</HEAD>
<BODY>
<I id= »Ident »>Ceci est un texte en italique</I><BR>
<B id= »Ident »>Ceci est un texte écrit en caractères gras</B><BR>
<U id= »Ident »>Ceci est un texte souligné</U><BR>
<STRIKE id= »Ident »>Ceci est un texte baré</STRIKE>
</BODY>
</HTML>
Résultat :
Ceci est un texte en italique
Ceci est un texte écrit en caractères gras
Ceci est un texte souligné
Ceci est un texte baré
Récapitulatif
Les possibilités offertes par la technologie des feuilles de style sont tellement vastes qu’il
est impossible de créer un exemple pour chaque propriété. C’est la raison pour laquelle j’ai
condensé le tout dans le tableau ci-dessous. Je pense que c’est assez explicite, mais si vous
n’avez pas saisi l’une ou l’autre chose, n’hésitez pas,
écrivez-moi.
Pour ce qui est de l’utilisation de toutes ces rêgles, la méthode est la même que celle détaillé
plus haut.
Récapitulatif des propriétés des feuilles de style
Propriétés |
Description |
Balises concernées |
Valeurs possibles |
|---|
background |
Permet de définir l’image, le positionnement, la répetition et la couleur d’arrière plan
d’une seule et unique fois |
Toutes les balises disposant d’un arrière-plan |
Voir les valeurs pour les autres propriétés de background |
background-attachment |
Définit si l’arrière plan doit être attaché au premier plan ou non |
Toutes balises disposant d’un arrière-plan |
2 valeurs :
- fixed : l’arrière plan reste fixe
- scroll : l’arrière plan est attaché au premier plan
|
background-color |
Fixe la couleur d’arrière-plan d’un élement |
Toutes balise disposant d’un arrière-plan |
Reportez-vous à la partie sur les couleurs |
background-image |
Attribut une image d’arrière-plan à un élement |
Toutes les balises disposant d’un arrière-plan |
Une URL, attribuée ainsi : background-image:URL(http://www.monurl.com/monimage.jpg); |
background-position |
Définit la position de l’image d’arrière-plan définie par la propriété background-image
sur l’arrière-plan |
Toutes les balises disposant d’un arrière plan |
Valeur en pixel, en pourcentage, ou un ou deux des 6 mots-clefs suivants :
- bottom en bas
- center au centre
- left à gauche
- right à droite
- top en haut
Utilisez deux mots-clefs pour positionner l’image verticalement et horizontalement. Séparez
les alors par un espace |
background-repeat |
Définit si l’image d’arrière-plan fixée par la propriété background-image doit être
répetée ou non (mosaïque) |
Toutes les balises disposant d’un arrière-plan |
4 valeurs :
- no-repeat : pas de répetition
- repeat : répetition de l’image horizontalement et verticalement
- repeat-x : répetition de l’image horizontalement seulement
- repeat-y : répetition de l’image verticalement seulement
|
border-style |
Définit l’aspect de la bordure d’un élement |
Toutes |
9 valeurs possibles :
- dashed : tirets
- dotted : pointillés
- double : doubles traits
- groove : creux
- inset : 3D en arrière
- none : pas de bordure
- outset : 3D en avant
- ridge : saillie
- solid : continue
|
border-color |
Définit la couleur de la bordure |
Toutes |
Se référer à la partie traitant des couleurs |
border-width |
Définit l’épaisseur de la bordure |
Toutes |
Valeur en pixels, en pourcentages ou un des 3 mots clefs suivants :
- medium : moyenne
- thick : large
- thin : mince
|
border-bottom |
Définit à l’aide de 3 valeurs l’épaisseur, le style et la couleur de la bordure basse |
Toutes |
Les 3 valeurs doivent être séparées par des espaces ainsi : border-bottom:epaisseur style
couleur; |
border-left |
Définit à l’aide de 3 valeurs l’épaisseur, le style et la couleur de la bordure gauche |
Toutes |
Les 3 valeurs doivent être séparées par des espaces ainsi : border-left:epaisseur style
couleur; |
border-right |
Définit à l’aide de 3 valeurs l’épaisseur, le style et la couleur de la bordure droite |
Toutes |
Les 3 valeurs doivent être séparées par des espaces ainsi : border-right:epaisseur style
couleur; |
border-top |
Définit à l’aide de 3 valeurs l’épaisseur, le style et la couleur de la bordure haute |
Toutes |
Les 3 valeurs doivent être séparées par des espaces ainsi : border-top:epaisseur style
couleur; |
color |
Fixe la couleur de premier-plan, c’est à dire la couleur du texte d’un élement |
Toutes balises disposant de texte |
Reportez-vous à la partie sur les couleurs |
float |
Permet de faire flotter un élement, c’est à dire que celui-ci peut être entouré
par du texte. |
Toutes |
3 valeurs sont possibles :
- left : flottaison à gauche
- none : pas de flottaison
- right : flottaison à droite
|
font-family |
Définit le type de police à utiliser |
Toutes les balises disposant de texte |
Un nom de police entre guillemets (« ) |
font-size |
Taille du texte |
Toutes les balises disposant de texte |
Valeurs numérique, en pourcentages ou une des 9 valeurs suivantes :
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- larger : plus grande
- smaller : plus petite
|
font-style |
Inclinaison du texte |
Toutes les balises disposant de texte |
3 valeurs :
- italic : italique
- normal : pas d’inclinaison
- oblique : inclinaison oblique
|
font-variant |
Application d’un style différent à du texte |
Toutes les balises disposant de texte |
2 valeurs :
- normal : pas de changement
- small-caps : affichage en petites capitales
|
font-weight |
Définition du niveau de gras d’un texte |
Toutes les balises disposant de texte |
4 valeurs :
- normal
- bold
- lighter : plus léger
- bolder : plus gras
|
height |
Hauteur d’un élement |
Toutes |
Valeur en pixels ou en pourcentages |
letter-spacing |
Espace entre les lettres dans un texte |
Toutes balises disposant de texte |
Valeurs en pixels |
line-height |
Définit la hauteur de l’interligne |
Toutes les balises disposant de texte |
Valeur numérique représentant un multiple de la hauteur normale : 2 pour le double, 3 pour le triple… |
list-style-image |
Permet d’afficher une image à la place de la puce dans une liste |
Balises <UL>, <OL> et <DL> |
Une URL, attribuée ainsi : list-style-image:URL(http://www.monurl.com/monimage.gif); |
list-style-position |
Définit le type de retrait d’une liste |
Balises <OL>, <UL> et <DL> |
3 valeurs :
- inside : alignement sur la marge gauche
- outside : indentation
|
list-style-type |
Détermine le type et la forme d’affichage de la tête de chaque élement d’une liste |
Balises <OL> et <UL> |
Pour <UL> :
- circle : cercle
- disc : point
- none : pas de puce
- square : carré
Pour <OL> :
- decimal : numérotation décimale
- lower-alpha : lettres minuscules
- lower-roman : chiffres romains en minuscules
- none : pas de numéro
- upper-alpha : lettres majuscules
- upper-roman : chiffres romains en majuscules
|
margin |
Définit les marges externes au bloc de l’élement. Les marges sont définies selon le nombres
de valeurs spécifiées. |
Toutes |
Valeurs en pixels ou en pourcentages. Accepte jusqu’à 4 valeurs séparées par des espaces.
Dans ce dernier cas, les marges sont définies ainsi : margin:haut droite bas gauche; |
margin-bottom |
Définit la marge entre le bord bas du cadre et l’élement le plus prêt |
Toutes |
En pixels ou en pourcentages. |
margin-left |
Définit la marge entre le bord gauche du cadre et l’élement le plus prêt |
Toutes |
En pixels ou en pourcentages. |
margin-right |
Définit la marge entre le bord droit du cadre et l’élement le plus prêt |
Toutes |
En pixels ou en pourcentages. |
margin-top |
Définit la marge entre le bord haut du cadre et l’élement le plus prêt |
Toutes |
En pixels ou en pourcentages. |
padding |
Définit la marge interne d’un élement, c’est à dire l’espace qui le sépare des bords du
cadre de son bloc et son contenu. |
Toutes |
Valeurs en pixels ou en pourcentages. Accepte jusqu’à 4 valeurs séparées par des espaces.
Dans ce dernier cas, les marges sont définies ainsi : padding:haut droite bas gauche; |
padding-bottom |
Définit la marge entre le bord bas du cadre et son contenu |
Toutes |
En pixels ou en pourcentages. |
padding-left |
Définit la marge entre le bord gauche du cadre et son contenu |
Toutes |
En pixels ou en pourcentages. |
padding-right |
Définit la marge entre le bord droit du cadre et son contenu |
Toutes |
En pixels ou en pourcentages. |
padding-top |
Définit la marge entre le bord haut du cadre et son contenu |
Toutes |
En pixels ou en pourcentages. |
text-align |
Définit l’alignement du texte |
Toutes les balises pouvant afficher du texte |
4 valeurs :
- center : alignement au centre
- left : alignement à gauche
- justify : justification du texte
- right : alignement à droite
|
text-decoration |
Permet de « décorer » du texte (soulignement, surlignement…) |
Toutes les balises pouvant afficher du texte |
5 valeurs :
- blink : clignotement (seulement sous Netscape)
- line-through : barré
- none : aucune mise en forme
- overline : surlignement (seulement sous Internet Explorer)
- underline : soulignement
|
text-indent |
Permet d’effectuer une indentation ou un retrait du texte de la première ligne d’un paragraphe |
Toutes les balises pouvant afficher du texte |
Valeurs négatives ou positives en pixels ou en pourcentages |
text-transform |
Transforme la casse d’un texte |
Toutes les balises pouvant afficher du texte |
4 valeurs :
- capitalize : le première lettre de chaque mot est mise en majuscules
- lowercase : toutes les lettres de chaque mot sont mises en minuscules
- uppercase : toutes les lettres de chaque mot sont mises en majuscules
- none : aucune transformation
|
vertical-align |
Définit l’alignement vertical d’un élement par rapport à son élement conteneur (contenu des cellules d’un tableau
par exemple) |
Toutes |
Valeur en pourcentages ou une des 8 suivantes :
- baseline : alignement par rapport aux lignes de base
- bottom : aligenement le plus bas sur la ligne
- sub : alignement en indice par rapport à la ligne normale
- super : alignement en exposant par rapport à la ligne normale
- text-top : alignement le plus haut possible
- text-bottom : alignement le plus bas possible
- top : alignement en haut de la ligne
|
white-space |
Définit l’aspect des tabulations et des espaces |
Toutes balises disposant de texte |
3 valeurs :
- normal : les espaces et tabulations sont interprétés normalement
- pre : les espaces et tabulations sont affichés comme dans la balise <PRE>
- nowrap : effet identique à pre, mais les lignes trop longues sont mises à la ligne
|
width |
Largeur d’un élement |
Toutes |
En pixels ou en pourcentages |
Normalement, tout est dans ce tableau. Mais le Web (et donc l’HTML) évolue tellement vite!
Une balise particulière : <A>
La balise
<A> est particulière dans le sens où celle-ci peut prendre plusieurs états : normal,
actif, survolé…
Il est donc tout a fait possible de définir plusieurs rêgles de style pour chacun de ces états.
Il existe 4 états :
- LINK : lien
- ACTIVE : lien actif
- VISITED : lien visité
- HOVER : lien survolé
Ainsi, pour un lien rouge normalement devenant bleu quand on le survole, on écrira :
<HTML>
<HEAD>
<STYLE type= »text/css »>
A{
text-decoration:none;
color:red;
}
A:HOVER{
color:blue;
}
</STYLE>
</HEAD>
<BODY>
<A href= »http://www.cybwarrior.com »>Cliquez ici pour aller sur Cyb Warrior</A>
</BODY>
</HTML>
Attention! Pour l’instant, Netscape ne reconnait pas
HOVER!
Résultat :
Cliquez ici pour aller sur Cyb Warrior
Français