Cours gratuits: les
feuilles de style
Le principe:
Une feuille de style est
constituée d'une suite de règles pouvant s'appliquer à différents niveaux d'un
document HTML. Soit à toutes les balises d'un type donné (on peut spécifier, par
exemple, que tout ce qui est contenu dans une balise <H2> ou <H3> sera
affiché en rouge), soit à une classe d'éléments définis à l'aide de l'attribut
CLASS=, soit encore uniquement à une certaine balise repérée par un identificateur
(attribut ID). Voici un exemple:
| Exemple:
TheCoolPage
TheCoolPage c'est un site cool qui explique tout pour créer sa propre page Web et la référencer!
|
Dans cette feuille de style on définit deux règles. La
première indique que les titres en <H2> seront centrés et affichés en rouge avec
une police ariale black. La seconde demande que tous les mots en italique
<I>...</I> soient affichés avec une police Courier New en vert. Mais, dans la
dernière phrase on décide que les mots "et laférencer" ré soient afficher en
bleu et non pas en vert!
Les propriétés:
Les propriétés d'une feuille de style sont comparablesaux
attributs des balises HTML. Elles s'attachent à différents éléments du document HTML:
structure, mise en page, présentation...
Les blocs: tout élément HTML peut être considéré
comme placé dans un bloc rectangulaire pouvant être entouré par une bordure. celle-ci
est décomposé en deux zones: margin (la plus extérieur) et padding (la plus proche du
bloque en lui même). Ces zones peuvent avoir un fond de couleur différent ou
transparent, ce qui permet de créer facilement des marges dans les quatre directions. Les
bordures proprement dites peuvent affecter différentes formes et, en particulier, donner
une apparence de creux ou de relief. La notion de bloc est une extension de
ALIGN="left" et ALIGN="right" qui permettaient, utilisés avec la
balise HTML, d'incruster une image dans du texte. Ici, on peut même incruster du texte
dans du texte ou faire des recouvrements de blocs de texte.
Les images:La position d'une image dans une page peut
être contrôlée de façon absolue ou relative par un système de coordonnées
rectangulaires, ce qui permet une mise en page précise.
Le texte et les polices de caractères: le texte est le
contenu le plus important d'une page Web c'est donc lui qui a été privilégié par les
feuilles de style. Grâce aux feuilles de style on peut naturellement choisir la police et
la couleur de celle-ci mais on peut aussi contrôler l'espacement entre caractères et
leur alignement horizontal par rapport à la ligne de base normale. Entre une police
normale et une police grasse il y a maintenant plusieurs degrés d'épaisseurs de
caractères. De plus il est possible de contrôler l'indentation positive ou négative
d'un paragraphe, de faire clignoter un mot ou un groupe de mots et enfin de créer des
lettrines (première lettre d'un paragraphe en une taille plus grosse que le reste du
texte.
Les listes: pour les listes on peut utiliser des images
au lieu de la classique puce (point noir)
Voici un exemple tout simple de feuille de style
utilisé sur ce site Web:
Il permet de définir une couleur quand on passe la
souris sur un lien...
Cliquez là pour un exemple plus compliqué!
ClickFR Reseau Publicitaire Francophone
|
L'actualité
Les jeux PC
Copyright TheCoolPage©2000