Le web de Dominique Guebey – Bazar informatique

Page : http://www.dg77.net/tekno/html/html30.htm


   D o m i n i q u e   G u e b e y    J u n g l e      Bazar informatique

Tutorial HTML

Introduction aux CSS/Feuilles de style

Définition et avantages :

Feuilles de style en cascade : traduction de Cascading Style Sheets (CSS). Il s'agit d'un moyen commode de créer des groupes de propriétés applicables à un élément ou un bloc de lignes dans une page HTML. Pour illustrer l'intérêt et l'utilisation des CSS, le plus simple est de partir d'un exemple.

On souhaite, par exemple, que toutes les pages d'un site aient les mêmes attributs : - police de caractères : Helvetica ; - couleur de fonds : bleu pâle ; - titres : centrés et soulignés ; - paragraphes : commençant par un retrait de 12 pixels ; - marge générale de 10 pixels ; - espacement autour des tableaux et images de 8 pixels ; - certains paragraphes qu'on considère comme des annotations ou notes : en italique, taille des caractères diminuée à 70%.

En HTML, ces caractéristiques peuvent être codées à chaque endroit où elles apparaissent. Mais celà présente plusieurs inconvénients : - travail fastidieux et long ; - risque d'erreurs et d'omissions ; - si on veut modifier un élément de présentation, il faut reprendre tous les fichiers déjà existant, puis les remettre en ligne.

Les CSS simplifient le travail : tous les attributs communs à plusieurs fichiers HTML peuvent être déclarés une seule fois dans un fichier particulier, auquel il suffira de faire référence en tête de chaque page HTML. Toute modification de la "feuille de style" sera immédiatement appliquée partout où cette dernière est utilisée.

Mise en application :

La mise-en-place d'une feuille de style globale se fait en deux temps : - création d'un fichier-feuille de style, portant l'extension .css (par exemple : monstyle.css). - dans l'en-tête des fichiers html concernés, insérer la spécification faisant référence à la CSS :

7
<LINK REL="stylesheet" TYPE="text/css" HREF="monstyle.css" TITLE="monstyle">
et éventuellement spécifier les styles particuliers dans le corps (exemple ci-dessous : le style propre aux annotations).
<DIV class="listing">Ceci est une note</DIV>

Exécution de la CSS : les clauses de style s'appliquent essentiellement de deux façons : - sur des SELECTEURS : ce sont les balises html, indiquées dans la feuille de style ; - sur des IDENTIFIANTS : exemple des annotations : on donnera le nom de "note", précédé d'un point, aux parties concernées ; on définit ainsi une CLASSE, appliquée grâce aux balises DIV ou SPAN :

Style pour une seule page :

Outre la référence à une feuille de style externe, comme décrit ci-dessus, il est possible de décrire des clauses de style plus spécifiques au sein d'une unique page HTML. Les deux ne sont pas incompatibles, ce qui est un des avantages des CSS : étant en "cascade" on peut définir une hiérarchie de présentations, de la plus générale à la plus spécifique. Par exemple, si l'on veut dans une page une présentation particulière des tableaux (caractères blancs sur fond noir), on insèrera les lignes suivantes dans l'entête :

<STYLE type="text/css">
<!--
table { background-color: #000000 ; color: #ffffff }
-->
</STYLE>

La mise en commentaire est utile pour les navigateurs qui ignorent les feuilles de style.

Application concrête :

La feuille de style exemple (noter l'utilisation des accolades et points-virgules :

        body {  background-color: #EEEEFF ;
                font-family: Helvetica ;
                margin: 10 ;
                padding: 8 
                }
        p { text-indent: 12 }
        h1, h2, h3, h4, h5, h6 { text-align: center; text-decoration: underline }
        .note { font-size: 70% ; font-style: italic ; text-indent:12 }

Utilisation par une page HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<TITLE>Tutorial html 02</TITLE>
	<META id="description" content="HTML explique par etapes, exemple CSS">

	<META id="keywords" content="html,tutorial,CSS,exemple">
	<META id="generator" content="Jext">
	<META id="author" content="Dominique Guebey">
       	<META id="created" content="20020401">
<LINK REL="stylesheet" TYPE="text/css" HREF="tutorial.css" TITLE="tutorial">
<STYLE type="text/css">
<!--
table { background-color: #000000 ; color: #ffffff }
-->

</STYLE>
</HEAD>
<BODY >
<DIV class="page">
        <h3>CSS/Exemple</h3>.
        <p>
                Cette page html utilise la feuille de style "tutorial.css". 
                Notez le retrait au début de ce paragraphe. 
                Bla-bla-bla, bla-bla-bla ; bla-bla-bla, bla-bla-bla ; 
                bla-bla-bla, bla-bla-bla ; etc.
        </p>

        <p>
                <div class="listing">Voici une note…</div>
        </p>
        <br>
        <p>

        <table><tr><td>Les tableaux (balise "table") ont un attribut 
        particulier dans cette page. 
                (voir l'entete)</td></tr></table>
        </p>

        <A href="html30.htm#exemple">
                <IMG src="../../../images/previous.png" alt="retour" border=0></A>

</DIV>
</BODY>
</HTML>

Cliquer ici pour voir le résultat