Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

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. L'outil est emporairement désactivé pour mise à jour. En attendant, vous pouvez utiliser celui qui est proposé sur css.mammouthland.net

Création d'une feuille de style

Deux possibilités pour formater un site à l'aide des feuilles de styles :

  1. En intégrant le code directement à l'intérieur des balises <HEAD></HEAD> de chaque page.
  2. 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 le sujet sont également proposées sur http://www.pompage.net/pompe/cssdezero-1/, et c'est en français!

 
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011