<!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">
<div id="page2">
<!-- entête (top) -->
<div id="top"><img id="logo" src="img/jpg/logo4-5.jpg" alt="nom du site" width="680" height="128" />
<!-- 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">
<!-- Bloc1 (entourage) -->
<div class="entourage">
<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">
<ul id="second">
<li><a href="<?php dcInfo('rss'); ?>">Rubrique 5</a></li>
<li><a href="<?php dcInfo('rss'); ?>?type=co">Rubrique 6</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 sidebar -->
<!-- Début du contenu (main et content) -->
<div id="main">
<div id="content">
<h1><span>Initiation aux Feuilles de styles utilisateur (CSS)</span></h1>
<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>
<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>
<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="balises.html" 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>
<code>&lt;p&gt;Mon paragraphe&lt;/p&gt;</code> (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" 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>

A titre indicatif, voilà comment par défaut les navigateurs interprète le code (succession des balises utilisées) de cette page.
<a href="exemple2.html">Rendu par défaut de cette page</a><a href="code.html">Le code utilisé</a>

<!--
et le code html complet<br />
<code> &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>
</code>
-->
<p>
Donc, pour afficher une page web un navigateur lit un fichier
texte et mets en forme celui-ci (par défaut) en fonction des informations qu'il y
trouvera (balises).
</p>
<p>
Comme vous pouvez le voir, c'est vraiment le minimum et il existe une sacré différence
avec la mise en page actuelle, hé bien c'est la que les feuilles de styles interviennent.
</p>
<strong>Remarque:</strong>
<p> Une page web normalement constituée devrait utiliser ce type de balise,
mais encore beaucoup trop de webmaster ne s'en préocuppe pas ce qui
fait que votre feuille de style risque d'être en partie innopérationelle
sur des sites qui ne respecte pas certaines régles. Nous verrons plus
loin l'impact que cela peut avoir. </p>
<h2>La syntaxe d'une feuille de style (CSS)</h2>
<p><strong>Une page CSS est constituée de régles.</strong></p>
Exemple: <code> h1 { font-size:1.2em; color:#ffffff } </code>
<p><strong>Les régles sont constituées d'un sélecteur et d'un bloc de
déclaration.</strong></p>
<code><strong>h1</strong> /*le sélecteur*/ <br />
/*début du bloc de déclaration*/<br />
<strong>{ <br />
font-size:1.2em;<br />
color:#ffffff<br />
} <br />
</strong> /*fin du bloc déclaration*/<br />
</code>
<p><strong>Un bloc de déclaration est constitué de propriétés suivies
de leurs valeurs.</strong></p>
<code><strong> h1</strong> /*le sélecteur*/<br />
/*début du bloc de déclaration*/<br />
<strong>{<br />
font-size:1.2em;</strong> /*font-size est la propriété, 1.2em est sa valeur*/<br />
<strong>color:#ffffff</strong> /*color est la propriété, #ffffff est sa
valeur*/<br />
<strong>}</strong> <br />
/*fin du bloc déclaration*/ </code>
<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>
<h3>Les selecteurs:</h3>
<p> Il existeplusieurs 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 les balises html, vous vous rappelez, h1, ul, li... </p>
<ul>
<li>h1, h2 jusqu'à h6</li>
<li>ul</li>
<li>li</li>
<li>p</li>
<li>div</li>
<li>span</li>
<li>a</li>
</ul>
<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>
<ul>
<li>Background = couleurs de fond</li>
<li>color = couleurs de texte</li>
<li>font-size = taille du texte</li>
<li>font-style = type de police</li>
<li>border = bordures</li>
</ul>
<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>
<ul>
<li>Taille du texte: em, px, %</li>
<li>Couleur du texte ou du fond :#ffffff, white, (0,0,0)</li>
<li>Type de police: Arial, Verdana</li>
</ul>
<p> Donc nous avons vu comment fonctionne un navigateur pour mettre en
forme du texte et qu'il il était possible de lui appliquer des réglages
particuliers par l'intermédiaire d'une feuille de style. </p>
<h2>Ma première feuille de style</h2>
<p> Vous remarquerez sur les exemples 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, il suffit juste de lui indiquer ou se trouve
ce fichier texte pour que celui-ci puisse l'interpréter. </p>
<h3>Pour Internet Explorer</h3>
<p> Ouvrez le bloc-notes, copiez collez le code ci dessous et enregistrez
le document que vous nommerez ma_feuille.css (dans les options choisir
"document texte" et "codage ANSI"). </p>
<code> ul <br />
{<br />
background:#666666;<br />
color:#ffffff;<br />
}<br />
h1<br />
{<br />
background:#000000;<br />
color:#ffa421;<br />
} </code>
<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 indiquez l'emplacement ou se trouve "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 />
<strong>NT:</strong><br />
WINNT\Profiles\&lt;Nom Utilisateur&gt;\Application Data\Mozilla\Firefox\Profiles\&lt;nom
profil&gt;\chrome <br />
<strong>98, ME:</strong><br />
Windows\Application Data\Mozilla\Firefox\Profiles\&lt;nom profil&gt;\chrome
<br />
</p>
<p> Il devrait être présent un fichier userContent-example.css, renommé
le en userContent.css, copiez collez le même code et enregistrez. Si
ce fichier n'existe pas, créer le à l'aide du bloc-notes. Redemarrez
Firefox </p>
<p> Si vous revenez sur la page de test, vous vous apercevrez que des
changements on normalement eu lieu. </p>
</div>
<!-- Fin content -->
</div>
<!-- Fin main -->
<!-- Fin de la partie contenu -->
<!-- Pied de page -->
<p id="footer"><a href="http://www.dotclear.net/"> propuls&eacute; par DotClear</a><img id="coin-footer" src="img/jpg/coin-footer.jpg" alt="" width="62" height="94" /></p>
<!-- Fin footer -->
</div>
<!-- fin page2 -->
</div>
<!-- fin page -->


</body>
</html>