Les feuilles de style
Sommaire
Introduction
Le concept de feuilles de style est apparu en 1997 avec le browser Internet Explorer 3.0, puis
s'est généralisé avec les versions 4.0 d'Internet Explorer et de Netscape Navigator.
Navigateurs supportés:
- Microsoft Internet Explorer 3.0 (partiellement)
- Microsoft Internet Explorer 4.0
- Netscape Navigator 4.0x
Le concept de feuilles de style consiste à attribuer des caractéristiques de mise
en forme à tout un groupe d'éléments. On peut par exemple décider
de mettre les titres en police Arial, en vert et en italique.
On définit par un nom une caractéristique de mise en forme, il suffit ensuite
de l'appeler pour l'appliquer à un texte.
On les appelle feuilles de style en cascade ("Cascading Style Sheets")
car on peut en définir plusieurs, et en cas de redondance de style un ordre de priorité
est donné par le browser (navigateur).
Elles permettent:
- d'avoir une présentation homogène sur tout un site.
- de pouvoir changer l'aspect du site entier en modifiant quelques lignes.
- une plus grande lisibilité du HTML.
- le positionnement rigoureux des éléments.
- des chargements de page plus rapides
C'est une chose simple à faire:
balise {propriété de style: Valeur; propriété de style: Valeur ...}
Par exemple:
A {font-family=Verdana; font-size=18px; font-style=bold; font-color=yellow}
définit les liens comme ayant une police Verdana, en gras, de taille 18 pixels, et de couleur jaune.
 Incorporer les styles
|
Les styles peuvent être incorporés de trois manières diiférentes:
- Dans le corps (<BODY>)
- Dans l'en-tête (<HEAD>)
- Dans un fichier externe dont l'extension est .css
On les déclare grâce à la balise STYLE. L'attribut type="text/css" prévient qu'il
s'agit de feuilles de style en cascade (c'est actuellement la seule possibilité, mais les créateurs
de la norme prévoieront peut-être une extension). La balise de commentaire <!-- ... --> évite
que des browsers peu récents lisent ces informations.
| <HTML> |
|
|
| |
<HEAD> |
|
| |
|
<STYLE type="text/css"> |
| |
|
<!-- |
| |
|
BALISE1 {propriété de style: Valeur; propriété de style: Valeur ...}
BALISE2 {propriété de style: Valeur; propriété de style: Valeur ...}
|
| |
|
--> |
| |
|
</STYLE> |
| |
</HEAD> |
|
| <BODY> |
|
|
Cette façon de définir les feuilles de style est peu courante, et peu conforme au
but des feuilles de style.
Cela peut néanmoins servir pour définir une exception.
| <HTML> |
|
|
| |
<BODY> |
|
| |
|
<BALISE STYLE="propriété de style: Valeur; propriété de style: Valeur ... "> ... </BALISE> |
| |
</BODY> |
|
| </HTML> |
|
|
Le fait de pouvoir stocker la définition des feuilles de style à l'extérieur du document
est un "plus", car on peut, en modifiant le fichier contenant les feuilles de style, changer l'allure de toutes
les pages web s'y reférant.
Il faut d'abord créer un fichier texte contenant les feuilles de style et dont l'extension est .css par exemple style.css:
Puis créer le raccourci vers cette page dans la(les) page(s) web:
<HTML>
<HEAD>
<LINK rel=stylesheet type="text/css" href="style.css">
</HEAD>
- La balise <LINK> avertit le navigateur qu'il doit établir un lien
- rel=stylesheet précise qu'il s'agit d'une feuille externe
- type="text/css" avertit (une fois de plus) qu'il s'agit de feuilles de style en cascade
- href=" ... " définit l'emplacement de la feuille de style
|
Les Classes et les ID
|
Il peut s'avérer intéressant d'affecter des styles différents à des balises.
Pour cela on a introduit le concept de classe.
La définition des classes est aussi simple que celles des styles:
.classe {propriété de style: Valeur; propriété de style: Valeur ...}
Où "classe" représente le nom que vous donnez à la classe.
Remarquez le point avant le nom de la classe!
Pour appeler cette classe il suffit de rajouter un attribut à la balise:
<BALISE class="nom_de_la_classe"> ... </BALISE>
Créons par exemple la classe "important"
.important {font-type: arial; font-color: red; font-weight: bold}
Les ID servent à remplacer les classes lorsqu'il y a du JavaScript dans la page, car le JavaScript
emploie lui aussi la syntaxe nom.nom (nom-point-nom).
La syntaxe est alors:
#nom_ID { propriété de style: Valeur; propriété de style: Valeur ...}
On l'appelera de la manière suivante:
<BALISE ID="#nom_ID" > ... </BALISE>
On ne peut faire appel qu'à un seul même ID par page!
|
Les balises <SPAN> et <DIV>
|
Il faut pouvoir dans un même paragraphe appliquer des styles différents à des
morceaux de texte, c'est à cela que servent les balises <SPAN> et <DIV>
La balise <SPAN> sert à appliquer des styles à des morceaux de paragraphe.
Elle s'utilise aussi bien avec ID qu'avec CLASS.
Sa syntaxe est la suivante:
<SPAN class=important> Texte </SPAN>
L'idée est la même pour la balise DIV, cependant au lieu de s'appliquer à quelques
mots dans un paragraphe, elle s'applique sur plusieurs paragraphes.
Sa syntaxe est la suivante:
<DIV class=important> paragraphes </DIV>
Positionnement des éléments
|
Introduction
|
Il est possible grâce aux feuilles de style de positionner au pixel près
du texte ou des images grâce aux balises <SPAN> et <DIV>.
Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette
technique reste hasardeuse et montre encore quelques problèmes de compatibilité
Le positionnement absolu {position: absolute} se détermine par rapport au coin
supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un
point s'expriment alors de haut en bas (top) et de gauche à droite (left).
La position relative se fait par rapport à d'autres éléments,
comme une image, c'est-à-dire que les éléments contenus dans la balises
DIV ou SPAN seront positionnés à la suite des éléments
HTML après lesquels ils se trouvent.
|
Positionner des éléments
|
Positionnons le texte "Comment ça marche?" à 80 pixels du haut
de la fenêtre et à 100 pixels à gauche de la fenêtre:
<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">
Comment ça marche?
</SPAN>
</BODY>
</HTML>
Il y a d'autres façons de procéder, en voici une:
<HTML>
<HEAD>
<STYLE>
<!--
.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
Comment ça marche?
</DIV>
</BODY>
</HTML>
Positionnons l'image "test.jpg" à 80 pixels du haut
de la fenêtre et à 100 pixels à gauche de la fenêtre (l'image
fait 103x61):
<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
</BODY>
</HTML>
Il est important de spécifier la taille de l'image avec les feuilles de style,
pour des raisons de non-compatibilité des navigateurs.
|
Superpositionner des éléments
|
Superposons le texte "Comment ça marche?" à l'image
"test.jpg":
<HTML>
<BODY>
<SPAN style="position: absolute; top: 30 px; left: 80px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
<SPAN style="position: absolute; top: 50 px; left: 80 px;">
Comment ça marche?
</SPAN>
</BODY>
</HTML>
Il est ainsi possible de superposer des éléments de texte, ainsi
que des images.
Liste des Propriétés
| Type |
Proprié&té |
Valeur |
Description |
| Police |
font-family |
Police précise (Arial, Times, Verdana ...)
Famille (serif, fantasy, monospace) |
Définit un nom de police ou une famille |
| font-style |
normal, italic, oblic |
Définit le style d'écriture |
| font-weight |
- normal, bold, light, bolder, lighter
- valeur numérique |
Définit l'épaisseur de la police |
| font-size |
xx-small, x-small, small, medium, large, x-large,
xx-large
taille en points (pt), cm, % |
Définit la taille de la police |
| font-variant |
normale, small-caps |
Définit une variante |
| font |
{font: bold italic} |
Raccourci permettant de mettre toutes les
propriétés |
| Style |
text-align |
left, center, right |
Définit l'alignement du texte |
| text-indent |
en pouces (in), en cm, ou en % |
Définit un retrait |
| text-decoration |
blink, underline, line-through, overline ou none
(clignotant, souligné, barré, surligné ou aucune) |
Définit une décoration |
| text-transform |
uppercase, lowercase, capitalize (majuscule,
minuscule, première lettre en minuscules) |
Définit la casse du texte |
| color |
"#RRGGBB" |
Définit la couleur du texte |
| word-spacing |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Définit l'espace entre les mots |
| line-height |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Définit l'interligne |
| width |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Définit la longueur d'un élément de texte ou d'une
image |
| height |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Définit la hauteur d'un élément de texte ou d'une
image |
| white-space |
normal, pre, nowrap |
Espacement ou blanc |
| Arrière-plans |
background-color |
"#RRGGBB" |
Définit la couleur du fond |
| background-image |
URL |
Définit l'image d'arrière-plan |
| background-repeat |
repeat, repeat-x, repeat-y, no-repeat |
Définit la façon de répéter l'arrière-plan |
| background-attachment |
scroll, fixed |
Spécifie si l'image reste fixe avec les
déplacements de l'écran |
| background-position |
- top, center, bottom, left, center ou right
- En points (pt), pouces (in), en cm, en pixels (px), ou
en % |
Position de l'image par rapport au coin supérieur
gauche |
| background |
{background: test.jpg fixed repeat} |
Raccourci pour les propriétés d'arrière-plan |
| Marges |
margin-top |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Valeur de la marge supérieure |
| margin-right |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Valeur de la marge de droite |
| margin-bottom |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Valeur de la marge inférieure |
| margin-left |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Valeur de la marge de gauche |
| margin |
|
Raccourci pour les propriétés de marge |
| Bordures |
border-top-width |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Epaisseur du bord supérieur |
| border-right-width |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Epaisseur du bord droit |
| border-bottom-width |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Epaisseur du bord inférieur |
| border-left-width |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Epaisseur du bord de gauche |
| border-width |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Raccourci vers les propriétés d'épaisseur de trait |
| border-color |
"#RRGGBB" |
Couleur de la bordure |
| border |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Raccourci vers les propriétés de bordure |
| padding-top |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Ecartement entre l'élément et le bord supérieur |
| padding-right |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Ecartement entre l'élément et le bord droit |
| padding-bottom |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Ecartement entre l'élément et le bord inférieur |
| padding-left |
En points (pt), pouces (in), en cm, en pixels (px),
ou en % |
Ecartement entre l'élément et le bord gauche |
| padding |
|
Raccourci vers les propriétés d'écartment |
| Listes |
list-style-type |
disc, circle ou square |
Type de puces et de numérotation |
| list-style-image |
URL |
Permet de remplacer les puces par une image |
| list-style-position |
inside ou outside |
Spécifie si les puces sont à l'intérieur ou à
l'extérieur du texte |
| list-style |
|
Raccourci vers les propriétés de liste |
|
