<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1" 
/>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" 
media="screen" />
<!--[if gte IE 5]>
<link rel="stylesheet" href="styleie.css" type="text/css" 
media="projection, screen, tv" /> 
<![endif]-->
</head>

<body> <!-- Blocs permettant le centrage du site (page et page2) page2 est présent uniquement pour des questions de décor --> <div id="page"> <a href="" name="haut"></a> <div id="page2"> <!-- entête (top) --> <div id="top"><a id="logo" href="index.html" title="Retour à l'accueil de Web en berry"><img src="img/gif/logo3.gif" alt="Web en berry, design, standards et accessibilité web" width:"344" height:"123"/></a> <!-- Menu accessibilité (prelude) --> <ul id="prelude"> <li><a href="accessibilite.php">Aide</a></li> <li><a href="#main">Aller au contenu</a></li> <li><a href="#sidebar">Aller au menu</a></li> <li><a href="#search">Aller &agrave; la recherche</a></li> </ul> <!-- Fin prelude --> </div> <!-- Fin top --> <!-- Bloc gauche (sidebar) --> <div id="sidebar"> <!-- Intérieur bloc gauche (sidebar) --> <div id="interieur-sidebar"> <!-- Bloc1 (entourage) --> <div class="entourage"> <h2>Catégories</h2> <ul id="premier"> <li><a href="<?php dcInfo('rss'); ?>">Rubrique 1</a></li> <li><a href="<?php dcInfo('rss'); ?>?type=co">Rubrique 2</a></li> <li><a href="<?php dcInfo('atom'); ?>">Rubrique 3</a></li> <li><a href="<?php dcInfo('atom'); ?>?type=co">Rubrique 4</a></li> </ul> </div> <!-- Fin entourage --> <!-- Bloc2 (entourage) --> <div class="entourage"> <h2>Articles</h2> <ul id="second"> <li><a href="<?php dcInfo('rss'); ?>"> Il ne vous est jamais arrivé de tomber sur un site web ou il est trés difficile pour vous de naviguer...</a></li> <li><a href="<?php dcInfo('rss'); ?>?type=co">"Feuilles de styles" est la traduction de l'anglais "Cascading style sheet" ou "CSS"...</a></li> <li><a href="<?php dcInfo('atom'); ?>">Rubrique 7</a></li> <li><a href="<?php dcInfo('atom'); ?>?type=co">Rubrique 8</a></li> </ul> </div> <!-- Fin entourage --> <!-- Bloc3 (entourage) --> <div class="entourage"> <p> Il ne vous est jamais arrivé de tomber sur un site web ou il est trés difficile pour vous de naviguer et lire l'information pour diverses raisons </p> </div> <!-- Fin entourage --> </div> <!-- Fin intérieur sidebar (interieur-sidebar) --> </div> <!-- Fin sidebar --> <!-- Début du contenu (main et content) --> <div id="main"> <div id="content"> <h1>Initiation aux Feuilles de styles utilisateur (CSS)</h1> <p id="cartouche">Par: <a href="#auteur">Moi</a> le: 23/12/06 Mots-clés: <a href="#mots_cles">Css</a>, <a href="#accessibilite">Accessibilité</a></p> <p> "Feuilles de styles" est la traduction de l'anglais "Cascading style sheet" ou "CSS". </p> <p> Ces feuilles de styles, que l'on repère généralement à l'extension .css, permettent de mettre en forme le contenu d'une page web comme la couleur du texte, sa taille, la couleur de fond d'une page..., ainsi que le placement graphique des différents blocs constituant cette page, elles sont habituelement utilisée par des créateurs de sites web mais chose moins connnue, elle peuvent également servir à l'internaute et c'est ce que nous allons voir. </p> <div id="toc"> <strong>Sommaire:</strong> <ul> <li><a href="#css_utilisateurs_mangez-en">CSS utilisateurs mangez-en</a></li> <li><a href="#Le_navigateur_et_le_code_html">Le navigateur et le code html</a></li> <li><a href="#Le_navigateur_et_les_feuilles_de_styles">Le navigateur et les feuilles de styles</a></li> <li><a href="#La_syntaxe_d'une_feuille_de_style">La syntaxe d'une feuille de style</a></li> <li><a href="#Creation_et_prise_en_compte_de_ma_feuille_de_style">Création et prise en compte de ma feuille de style</a></li> <li><a href="#Ma_première_feuille_de_style">Ma première feuille de style</a></li> </ul> </div> <a href="" name="css_utilisateurs_mangez-en"></a> <h2>CSS utilisateurs mangez en</h2> <p> Donc, une des caractéristiques méconnues des feuilles de styles est de permettre à l'internaute en les utilisants via son navigateur, de définir lui même la maniére dont sera afficher un site web et non pas comme le webmaster l'aura décidé. </p> <p> Il ne vous est jamais arrivé de tomber sur un site web ou il est trés difficile pour vous de naviguer et lire l'information pour diverses raisons (texte trop petit, un type de police illisible, un contraste insuffisant, des images et textes clignotants et ou défilants qui vous gènent) que malheureusement vous ne trouviez l'info que sur ce site et que vous soyez obligé d'y rester malgré le mal de tête que cela vous donne, hé bien ne souffrez plus, facilitez vous la tâche avec les CSS utilisateurs. </p> <p> Vous ne savez pas comment faire et si cela vous sera vraiment utile? Suivez ce petit tutoriel, faites quelques tests et je pense que vous vous apercevrez vite de l'interêt que l'on peux avoir un jour ou l'autre de savoir se servir de ces feuilles de styles même pour un utilisateur. </p> <p> Alors n'hésitez pas, les CSS utilisateurs mangez en c'est bon pour la santé. </p> <strong>Remarque:</strong> <p> La mise au point de CSS utilisateurs, même si c'est quelque peu technique, vous sera largement simplifiée si le webmaster du site ou des sites que vous visitez respectent certaines régles en matiére de création de page web standards </p> <a href="" name="Le_navigateur_et_le_code_html"></a> <h2>Le navigateur et le code html</h2> <p> Imaginez vous sous word en train de rédiger et de mettre en forme un document, hé bien le code html c'est à peu près la même chose, c'est mettre en forme du texte mais par l'intermédiaire de <a href="http://xhtml.le-developpeur-web.com/" title="en savoir plus sur les balises">balises html</a> qui entourent le texte voulu. </p> <strong>Exemple de balises html (ici une balise paragraphe et son texte):</strong> <pre>&lt;p&gt;Mon paragraphe&lt;/p&gt;</pre> (On ouvre le paragraphe, on écrit le texte, on ferme le paragraphe) <p> Quand vous désirez avoir une liste sous word vous utilisez le bouton puces et le logiciel les crées automatiquement. En html pour indiquer au navigateur de faire la même chose, au lieu d'appuyer sur un bouton il faut lui écrire clairement "ici je veux une liste" ou "ici je veux un paragraphe", en utilisant la balise html appropriée et le navigateur comme le logiciel word saura par défaut comment mettre le texte en forme. </p> <p> A titre indicatif, voilà comment les navigateurs interprètent le code (succession des balises utilisées) de cette page. <a href="exemple2.html">Rendu par défaut de cette page</a> et <a href="code.html">Le code utilisé</a> </p> <!-- et le code html complet <pre> &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; <br> &lt;html&gt; <br> &lt;head&gt; <br> &lt;title&gt;Youplaboum&lt;/title&gt; <br> &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt; <br> &lt;link rel=&quot;stylesheet&quot; href=&quot;habillage.css&quot; type=&quot;text/css&quot; media=&quot;projection, screen, tv&quot; /&gt; <br> &lt;/head&gt; <br> &lt;body&gt; <br> &lt;div id=&quot;global&quot;&gt; <br> &lt;div id=&quot;header&quot;&gt; <br> &lt;h1&gt;&lt;img src=&quot;banniere_noel.jpg&quot; width=&quot;760&quot;&gt;&lt;/img&gt;&lt;/h1&gt; <br> &lt;/div&gt; <br> &lt;div id=&quot;menu&quot;&gt; <br> &lt;h2&gt;Rubrique2&lt;/h2&gt; <br> &lt;ul&gt; <br> &lt;li&gt;&lt;a href=&quot;lien1&quot;&gt;Lien 1 &lt;/a&gt;&lt;/li&gt; <br> &lt;li&gt;&lt;a href=&quot;lien2&quot;&gt;Lien 2 &lt;/a&gt;&lt;/li&gt; <br> &lt;li&gt;&lt;a href=&quot;lien3&quot;&gt;Lien 3 &lt;/a&gt;&lt;/li&gt; <br> &lt;/ul&gt; <br> &lt;/div&gt; <br> &lt;div id=&quot;centre&quot;&gt; <br> &lt;h2&gt;Titre de niveau 2&lt;/h2&gt; <br> &lt;p&gt; &amp;laquo;Un principe fondamental de l'accessibilit&eacute; Web est la flexibilit&eacute; <br> qui consiste &agrave; r&eacute;pondre &agrave; des besoins, &agrave; des situations et &agrave; des pr&eacute;f&eacute;rences <br> vari&eacute;s. Cette flexibilit&eacute; b&eacute;n&eacute;ficie &agrave; toute personne utilisant le Web, y compris <br> celles qui sans avoir de d&eacute;ficience font face &agrave; diff&eacute;rentes situations, comme <br> une connexion &agrave; faible d&eacute;bit ou une incapacit&eacute; temporaire (telle qu'une fracture <br> au bras). Les personnes plus &acirc;g&eacute;es peuvent &eacute;galement b&eacute;n&eacute;ficier de cette flexibilit&eacute;.&amp;raquo; <br> &lt;/p&gt; <br> &lt;/div&gt; <br> &lt;div id=&quot;bloc_droit&quot;&gt; <br> &lt;h2&gt;Rubrique3&lt;/h2&gt; <br> &lt;ul&gt; <br> &lt;li&gt;&lt;a href=&quot;lien1&quot;&gt;Lien 1 &lt;/a&gt;&lt;/li&gt; <br> &lt;li&gt;&lt;a href=&quot;lien2&quot;&gt;Lien 2 &lt;/a&gt;&lt;/li&gt; <br> &lt;li&gt;&lt;a href=&quot;lien3&quot;&gt;Lien 3 &lt;/a&gt;&lt;/li&gt; <br> &lt;/ul&gt; <br> &lt;/div&gt; <br> &lt;/div&gt; <br> &lt;/body&gt; <br> &lt;/html&gt; <br> </pre> --> <p> Donc, pour afficher une page web un navigateur lit un fichier texte (code html) et mets en forme celui-ci (par défaut) en fonction des informations qu'il y trouvera (balises). </p> <a hre="" name="Le_navigateur_et_les_feuilles_de_styles"></a> <h2>Le navigateur et les feuilles de styles</h2> <p>Vous remarquerez sur l'exemple au dessus que le rendu par défaut d'un navigateur n'est pas très attractif, pas de couleur, fond blanc, écriture en noire, hé bien c'est là qu'interviennent donc les CSS, elles permettent comme pour le code html de dire au navigateur par l'intermédiaire d'un fichier texte (pour rappel avec l'extension .css exemple:ma_feuille.css) ce que l'on veux exactement </p> <p>Voici à titre indicatif, <a href="style.css">la feuille de style de cette page</a>.</p> <p> On explique clairement au navigateur qu'une balise html devra avoir tel ou tel rendu (couleur de fond, type de police, taille de la police, couleur de la police...) en déclarant ces caractéristiques dans la feuille de style. </p> <p><strong>Exemple:</strong></p> <pre> h2 {color:#ff0000;}</pre> <p> On demande que les titres de niveau 2 (h2) aient une couleur rouge (color). (Nous verrons la syntaxe et la maniére de créer une feuille de style dans le chapitre suivant.) </p> <strong>Remarque:</strong> <p> On commence à entrevoir ici l'importance de l'utilisation de certaines balises par les webmasteurs comme par exemple les balises titres, votre feuille de style sera innopérante sur un site n'en possédant pas mais qui aura maquillé une balise autre pour le faire croire. On effleure ici ce que l'on apelle la sémantique d'un document, c'est à dire donner un sens à celui-ci avec les balises html adéquates en les utilisants pour ce qu'elles sont. </p> <p><strong>Cette exemple utilise une balise neutre (&lt;div&gt;) qui ne donne aucun sens au document</strong></p> <pre> &lt;div&gt;Chapitre 1 : Les feuilles de style et les utilisateurs&lt;/div&gt; &lt;div&gt;Leur utilisation est m&eacute;connue&lt;/div&gt; </pre> <a href="exemple3.html">Voir le rendu par défaut du navigateur</a> <p> <strong> Cette exemple utilise une balise de titre (&lt;h2&gt;) et une balise de paragraphe (&lt;p&gt;)qui donnent un sens au document. </strong> </p> <pre> &lt;h2&gt;Chapitre 1 : Les feuilles de style et les utilisateurs&lt;/h2&gt; &lt;p&gt;Leur utilisation est m&eacute;connue&lt;/p&gt; </pre> <a href="exemple4.html">Voir le rendu par défaut du navigateur</a> <p><strong>Appliquons maintenant le style utilisé en exemple</strong></p> <pre>h2 {color:#ff0000}</pre> <p>On demande donc au navigateur que les titres de niveau 2 (&lt;h2&gt;) de la page ressortent en rouge.</p> <a href="exemple5.html">Résultat avec une balise neutre maquillée</a> <br /> <a href="exemple6.html">Résultat avec une balise titre</a> <p> Vous remarquerez dans le premier résulat que votre demande n'est pas prise en compte et que le texte est toujours bleu et de la même taille sur tout le document comme l'a voulu le webmaster. C'est normal le navigateur n'as pas trouvé la balise &lt;h2&gt; mais juste une balise neutre maquillée. Ce type de situtation se reproduira à chaque fois que le webmaster n'aura pas utilisé les balises html adéquates pour donner du sens à son document.</p> <a href="" name="La_syntaxe_d'une_feuille_de_style"></a> <h2>La syntaxe d'une feuille de style (CSS)</h2> <p><strong>Une page CSS est constituée de régles.</strong></p> Exemple: <pre> h1 { font-size:1.2em; color:#ffffff } </pre> <p><strong>Les régles sont constituées d'un selecteur (ou plusieurs) et d'un bloc de déclarations.</strong></p> <pre> <strong>h1</strong> /*le selecteur*/ /*début du bloc de déclarations*/ <strong>{ font-size:1.2em; color:#ffffff } </strong> /*fin du bloc déclarations*/ </pre> <p><strong>Un bloc de déclarations est constitué de propriétés suivies de leurs valeurs.</strong></p> <pre> <strong> h1</strong> /*le sélecteur*/ /*début du bloc de déclarations*/ <strong>{ font-size:1.2em;</strong> /*font-size est la propriété, 1.2em est sa valeur*/ <strong>color:#ffffff</strong> /*color est la propriété, #ffffff est sa valeur*/ <strong>}</strong> /*fin du bloc déclarations*/ </pre> <p> Cela signifie que je demande au navigateur d'agir sur la mise en forme des titres de niveau 1 (h1) d'une page web, que je veux que le texte soit en blanc (#ffffff) et que sa taille soit de 1.2em </p> <strong>Remarque:</strong> <p>Chaque déclaration doit être terminée par un point virgule, toutefois, la dernière peut eventuellement ne pas en avoir.</p> <h3>Les selecteurs:</h3> <p> Il existe plusieurs types de selecteurs, mais ici je n'en aborderai qu'un car ce tuto est avant tout une premiére initiation, si vous avez envie d'approfondir il existe une multitude de sites vous le permettant. Donc pour l'instant, les seuls selecteurs que nous allons utliliser sont des balises html.</p> <dl> <dt>h1</dt> <dd>Un titre de niveau 1</dd> <dt>h2</dt> <dd>Un titre de niveau 2</dd> <dt>h3</dt> <dd>Un titre de niveau 3</dd> <dt>ul</dt> <dd>Bloc liste</dd> <dt>li</dt> <dd>Elément d'un bloc liste</dd> <dt>p</dt> <dd>Un paragraphe</dd> <dt>a</dt> <dd>Un lien hypertext</dd> <dt>pre</dt> <dd>Affichage de code non interpré dans une page</dd> </dl> <h3>Les Propriétés</h3> <p> De même que pour les selecteurs, il existe une multitude de propriétés, mais pour des raisons de simplicité je n'utiliserais que certaines, plus particulièrement celles concernant les couleurs de fond, les couleurs de texte, la taille du texte, le type de police utilisée, les bordures. </p> <dl> <dt>Background-color</dt> <dd>La couleur de fond</dd> <dt>color</dt> <dd>La couleur du texte</dd> <dt>font-size</dt> <dd>La taille du texte</dd> <dt>font-family</dt> <dd>Type ou famille de police à utiliser</dd> <dt>border</dt> <dd>Les bordures d'un élément</dd> </dl> <h3>Les valeurs</h3> <p> Il existe de multiples possibilités de valeurs pour une même propriété, couleur, unité de taille, type de police, donc même combat, je vais en aborder que certaines qui nous seront utiles pour l'exemple. </p> <dl> <dt>em</dt> <dd>La taille du texte</dd> <dt>#ffffff</dt> <dd>Couleur du texte, du fond, des bordures (valeur hexadécimale)</dd> <dt>Arial</dt> <dd>Type de police</dd> </dl> <a href="" name="Creation_et_prise_en_compte_de_ma_feuille_de_style"></a> <h2>Création et prise en compte de ma feuille de style</h2> <p> Donc nous savons comment fonctionne un navigateur pour mettre en forme du texte par défaut grâce aux balises html écritent dans le code, qu'il il était possible d'appliquer des réglages particuliers à ces balises par l'intermédiaire d'une feuille de style et de quoi elle était constituée(sélecteurs, propriétés, valeurs). </p> <p>Avant de commencer à travailler sur l'exemple concret d'une feuille de style complète, il faut savoir comment créer cette feuille et dire aux navigateurs qu'il faut utiliser cette feuile de style et pas celle du webmaster.</p> <h3>Pour Internet Explorer</h3> <p>Ouvrez le bloc-notes, copiez collez le code ci dessous et enregistrez quelquepart sur votre disque dur le document que vous nommerez ma_feuille.css (dans les options choisir "document texte" et "codage ANSI").</p> <pre>/* Ma première feuille de style */</pre> (les /* et */ au début et à la fin permettent d'insérer un commentaire qui ne sera pas lu par le navigateur). <p> Ouvrez Internet Explorer, et faites: </p> <p> Outils > Options Internet > Accessibilité, une fenêtre comme celle-ci doit s'ouvrir. </p> <img src="img/jpg/tutocss1.jpg" alt="capture d'écran de la fenêtre d'accessibilité d'Internet Explorer" align="center"> <p>Cochez la derniére case et en faisant "parcourir" indiquez ou se trouve la feuilles de style "ma_feuille.css", puis fermez chaque fenêtres en faisant Ok</p> <h3>Pour Firefox</h3> Allez dans le repertoire chrome de votre profil. <p> <strong>XP:</strong><br /> Documents and Settings\&lt;Nom Utilisateur&gt;\Application Data\Mozilla\Firefox\Profiles\&lt;nom profil&gt;\chrome<br /> </p> <p> <strong>NT:</strong><br /> WINNT\Profiles\&lt;Nom Utilisateur&gt;\Application Data\Mozilla\Firefox\Profiles\&lt;nom profil&gt;\chrome </p> <p> <strong>98, ME:</strong><br /> Windows\Application Data\Mozilla\Firefox\Profiles\&lt;nom profil&gt;\chrome </p> <p> Il devrait être présent un fichier "userContent-example.css", faites une copie de ce fichier et renommé le en "userContent.css", éditez ce nouveau fichier à l'aide du bloc note (clic droit "ouvrir avec") supprimé tout ce qui est déjà présent dans cette feuille et copiez collez le même code que précedemment et enregistrez. </p> <p> Si ce fichier n'existe pas, suivre la même démarche qu'avec Internet Explorer mais n'oubliez pas de nommez le fichier "userContent.css" au lieu de "ma_feuille.css". </p> <p> Dans les deux cas, redemarrez Firefox. </p> <a href="" name="Ma_première_feuille_de_style"></a> <h2>Ma première feuilles de style</h2> <p>Maintenant que l'on en connais un peu plus sur les feuilles de styles, passons à la pratique et créons notre première "css user" (feuille de style utilisateur) comme disent les geeks</p> <p>Voilà normalement <a href="index2.html">le résultat final attendu</a></p> <strong>Remarque:</strong> <p> Vous verrez que toutes les déclarations sont terminées par <strong>!important</strong> je n'en ai pas parlé jusqu'à présent mais c'est ce qui permet d'imposer vos réglages sur ceux du navigateur par défaut et ceux du webmaster. Si vous l'oubliez, votre déclaration ne sera pas prise en compte. </p> <p>Nous allons donc prendre les élements constituants normalement une page web un par un et leur donner l'apparence que l'on désire. </p> <h3>Le sélecteur universel</h3> <p>C'est le seul sélecteur autre qu'une balise html dont on vas se servir dans la feuille de style, il est très utile car il permet d'appliquer une ou plusieurs règles à tous les éléments d'une page html</p> <p>Nous allons donc demander que tous les éléments de la page aient un fond noir et que leurs textes soient blancs</p> <p>Editez votre feuille de style précedemment enregistrée (ma_feuille.css pour IE et userContent pour firefox) et copiez collez ce code, enregistrez à nouveau le document. </p> <p>Redémarrez le navigateur à chaque fois pour que les changements soient pris en compte</p> <pre> * { font-size:1.em!important; background:#000000!important; color:#ffffff!important; font-family: 'Trebuchet MS'!important; filter:none!important; } </pre> <p> <strong>*:</strong> On selectionne tous les éléments de la page web </p> <p> <strong>font-size:</strong> On donne une taille au texte, en l'occurence 1em. </p> <p> <strong>background:</strong> On donne une couleur de fond aux élements en l'occurence noir (#000000, code héxadécimal) </p> <p> <strong>color:</strong> On donne une couleur au texte, en l'occurence blanc (#ffffff, code héxadécimal) </p> <p> <strong>font-family:</strong> On choisit, une police de caractères en l'occurence 'Trebuchet MS' (les guillemets simple sont obligatoire si le nom de la police comporte des espaces) </p> <p> <strong>filter:</strong> C'est une propriété exclusivement présente pour Internet Explorer et non standard qui permet de désactiver certains filtres prioritaires de ce navigateurs (pour afficher certaines images par exemple). </p> <strong>Remarque:</strong> <p> Il existe plusieurs propriétés pour le fond d'un élément , background-color dont j'ai parlé mais également background-image qui permet de mettre non pas une couleur mais une image de fond, background-position qui permet de positionner une image de fond par exemple. background employé seul est une manière raccourci de prendre en compte toutes les propriétés possibles. </p> <p>Au lieu d'écrire:</p> <pre> * { background-color:#ffffff; background-image: url(mon_image_de_fond.jpg); background-position: top left; background-repeat: no-repeat; } </pre> <p>L'on peux très bien écrire: </p> <pre>* { background: #ffffff url(mon_image_de_fond.jpg) top left no-repeat; } </pre> <p>Cela aura exactement le même résultat.</p> <h3>Les titres</h3> <p>Ici nous allons définir les 3 premiers niveaux de titre, pour rappel il en existe 6 (h1 à h6)</p> <p><strong>Code html:</strong></p> <pre> &lt;h1&gt;Mon titre&lt;/h1&gt; </pre> <p><strong>La feuille de style:</strong></p> <pre> h1 { background-color:#000000!important; color:#00ffff!important; } h2 { font-family: Hevetica, Arial, sans-serif!important; background-color:#000000!important; color:#00ffff!important; } h3 { font-family: Hevetica, Arial, sans-serif; background-color:#cccccc!important; color:#000000!important; } </pre> <h3>Les listes et éléments de listes</h3> <p>Les listes sont constituées de 2 choses, un bloc (balise &lt;ul&gt;) et dans ce bloc, plusieurs éléments (balise &lt;li&gt;)</p> <p><strong>Code html:</strong></p> <pre> &lt;ul&gt; &lt;li&gt;texte1&lt;/li&gt; &lt;li&gt;texte2&lt;/li&gt; &lt;/ul&gt; </pre> <p>La feuille de style:</p> <pre> ul { #background-color:#ffffff!important; } li { #background-color:#ffffff!important; } </pre> <h3>Les liens</h3> Un lien possède plusieurs positions: <ul> <li>Au repos</li> <li>Visité</li> <li>Survolé</li> <li>Actif</li> </ul> <p><strong>Code html:</strong></p> <pre> &lt;a href="adresse.html" title="informatiions complémentaires"&gt;Mon titre&lt;/a&gt; </pre> <p><strong>La feuille de style:</strong></p> <p>En CSS ces différentes positions sont matérialisé par des <a href="http://wiki.media-box.net/documentation/css#pseudo-elements_et_pseudo-classes">"Pseudo-classes"</a></p> <p>Ici nous utiliserons:</p> <ul> <li>link (au repos)</li> <li>visited (visité)</li> <li>hover (survolé)</li> <li>active (actif)</li> </ul> <pre> a:link { background-color: #bbbbbb!important; } a:visited { background-color: #bbbbbb!important; } a:hover { background-color: #bbbbbb!important; } a:active { background-color: #bbbbbb!important; } </pre> <h3>Affichage des codes</h3> <p>On utilise la balise pre, elle permet par exemple de garder l'indentation d'un code (décalage)</p> <p><strong>Code html:</strong></p> <pre> &lt;pre&gt; Mon code La suite... &lt;/pre&gt; </pre> <p><strong>La feuille de style:</strong></p> <pre> pre { background-color:#000000!important; color:#ffffff!important; } </pre> </div> <!-- Fin content --> <div id="retour_haut_page"> <p><a href="#haut">Haut de page</a></p> </div> </div> <!-- Fin main --> <!-- Fin de la partie contenu --> <!-- Pied de page --> <div id="footer"> <p><a href="http://www.dotclear.net/"> Propulsé par DotClear</a> - <a href="mentions.html">Mentions légales</a> - Hébergement: <a href="#">Nikozen</a></p> <img id="coin-footer" src="img/jpg/coin-footer3.jpg" alt="" width="161" height="90" /> </div> <!-- Fin footer --> </div> <!-- fin page2 --> </div> <!-- fin page -->

</body> </html>