Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Bote outils

Allez hop, cascade!

De quoi s'agit-il ?

D'un outil de cration 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 trs pratique. L'outil est emporairement dsactiv pour mise jour. En attendant, vous pouvez utiliser celui qui est propos sur css.mammouthland.net

Cration d'une feuille de style

Deux possibilits pour formater un site l'aide des feuilles de styles :

  1. En intgrant le code directement l'intrieur des balises <HEAD></HEAD> de chaque page.
  2. En crant un fichier distinct qui sera simplement li dans chaque page.
A - Intgre directement dans une page web
1) Dans votre diteur html prfr, commencer en crivant le bloc de texte suivant. Il s'agit de la dclaration de la feuille de style :

<STYLE TYPE="TEXT/CSS">
<!--

2) Juste en-dessous de ces lignes, insrer, les uns la suite des autres, les blocs de dclarations que vous aurez crs l'aide de l'outil interactif.
3) Pour terminer, ajouter les deux lignes suivantes la suite du tout.

--->
</STYLE>

Voici un exemple du rsultat :

<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'intrieur des balises <HEAD></HEAD> dans votre page... et testez !
  B - Feuille de style indpendante, et simplement lie avec la page
1) Dans votre diteur html prfr, crer un nouveau fichier vide (aucune balise), dans lequel viendront s'insrer les blocs de dclarations les uns la suite des autres.
Ce qui devrait ressembler ceci (identique la version A, mais sans les dclarations de dbut 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, insrer la syntaxe suivante l'intrieur des balises <HEAD></HEAD> :

<link rel="stylesheet" href="mafeuille.css" type="text/css">

Cette solution est surtout intressante pour les sites qui comportent de nombreuses pages auxquelles ont veut appliquer le mme format. Une simple modification un paramtre dans le fichier mafeuille.css se rpercute automatiquement sur toutes les pages qui ont un lien qui pointe vers lui.
Des informations compltes sur le sujet sont galement proposes sur http://www.pompage.net/pompe/cssdezero-1/, et c'est en franais!

  
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011