Boîte à outils |
Allez hop, cascade!
|
De quoi s'agit-il ?
D'un outil de création
de feuille de style. Les quelques instructions ci-dessous ainsi que
l'outil interactif vous permettront de vous initier facilement à cette technique
de mise en page très pratique.
Création d'une feuille de style
Deux possibilités pour formater un site à
l'aide des feuilles de styles :
- En intégrant le code directement à
l'intérieur des
balises <HEAD></HEAD> de chaque page.
- En créant un fichier distinct qui sera
simplement lié dans chaque page.
A - Intégrée directement dans une page web
| 1) |
Dans votre
éditeur html préféré, commencer en écrivant le bloc de texte suivant. Il
s'agit de la déclaration de la feuille de style :
<STYLE TYPE="TEXT/CSS">
<!--
|
| 2) |
Juste en-dessous
de ces lignes, insérer, les uns à la suite des autres, les blocs de déclarations que vous aurez créés
à l'aide de l'outil interactif. |
| 3) |
Pour terminer,
ajouter les deux lignes
suivantes à la suite du tout. |
|
--->
</STYLE>
|
|
Voici un exemple du résultat :
<STYLE TYPE="TEXT/CSS">
<!--
H1 {
font-family: Arial, sans-serif;
text-align: center;
color: #FFCC00;
}
P {
font-family: Verdana,Arial, sans-serif;
color: #000000;
}
--->
</STYLE>
|
| 4) |
Placer tout ce
bloc de texte à l'intérieur des balises
<HEAD></HEAD> dans votre page... et testez ! |
B - Feuille de style indépendante, et simplement liée avec la page
| 1) |
Dans votre
éditeur html préféré, créer un nouveau fichier vide (aucune balise),
dans lequel viendront s'insérer les blocs de déclarations
les uns à la suite des autres.
|
|
Ce qui devrait
ressembler à ceci (identique à la version A, mais sans les déclarations
de début et de fin) :
H1 {
font-family: Arial, sans-serif;
text-align: center;
color: #FFCC00;
}
P {
font-family: Verdana,Arial, sans-serif;
color: #000000;
}
|
| 2) |
Sauvegarder le
fichier avec l'extension .css. Par exemple, mafeuille.css. |
| 3) |
Sur chacune des
pages auxquelles vous souhaitez appliquer cette feuille de style, insérer
la syntaxe suivante à l'intérieur des balises <HEAD></HEAD>
:
<link rel="stylesheet"
href="mafeuille.css"
type="text/css">
|
|
Cette solution
est surtout intéressante pour les sites qui comportent de nombreuses
pages auxquelles ont veut appliquer le même format. Une simple
modification à un paramètre dans le fichier mafeuille.css se
répercute automatiquement sur toutes les pages qui ont un lien qui pointe
vers lui.
|
|
Des informations complètes sur les feuilles de styles sont fournies sur cet excellent site http://stylescss.free.fr/index.php, et c'est en français! |
|
|
Signer le Registre des visiteurs
|
Les causes que je supporte :
|
| |
|
