CyBWarrior

Accueil > HTML > HTML – Les feuilles de style

HTML – Les feuilles de style

25/03/2002 cybwarrior Commenter Allez aux commentaires

This entry is part 18 of 23 in the series HTML - Tutoriel

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 :

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 :

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 :

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 :

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 :

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 !):

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

Series Navigation«HTML – Formatage poussé du texteHTML – Les couleurs»

Categories: HTML Tags:

Commentaires (0) Trackbacks (0) Commenter Trackback

Pas encore de commentaire

Pas encore de trackbacks

HTML – Et le reste… HTML – Tableaux

HTML – Les feuilles de style

Théorie

Utilisation d’une feuille de style

Fichier externe (balise <LINK>)

La balise <STYLE>

L’attribut STYLE

Exemples

Utilisation de l’attribut STYLE

Les identificateurs et les commentaires

Récapitulatif

Une balise particulière : <A>

Categories

Recent Posts

Blogroll

Archives

Meta

CyBWarrior

HTML – Les feuilles de style

Théorie

Utilisation d’une feuille de style

Fichier externe (balise <LINK>)

La balise <STYLE>

L’attribut STYLE

Exemples

Utilisation de l’attribut STYLE

Les identificateurs et les commentaires

Récapitulatif

Une balise particulière : <A>

Categories

Recent Posts

Mots-clefs

Blogroll

Archives

Meta