|
|
|
|
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:
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éfinition d'un style |
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:
A l'intérieur des marqueurs <HEAD> |
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> |
A l'intérieur des marqueurs <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 propriété de style: Valeur; propriété de style: Valeur ... > ... < /BALISE > | ||
| </BODY> | ||
| </HTML> |
A l'extérieur du document (dans un fichier) |
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>
Les classes et les ID |
Les classes |
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 |
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>
Le marqueur <SPAN> |
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>
Le marqueur <DIV> |
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>