<!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 à 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><p>Mon paragraphe</p></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> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<br>
<html> <br>
<head> <br>
<title>Youplaboum</title> <br>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"> <br>
<link rel="stylesheet" href="habillage.css"
type="text/css"
media="projection, screen, tv" /> <br>
</head> <br>
<body> <br>
<div id="global"> <br>
<div id="header"> <br>
<h1><img src="banniere_noel.jpg" width="760"></img></h1>
<br>
</div> <br>
<div id="menu"> <br>
<h2>Rubrique2</h2> <br>
<ul> <br>
<li><a href="lien1">Lien 1 </a></li>
<br>
<li><a href="lien2">Lien 2 </a></li>
<br>
<li><a href="lien3">Lien 3 </a></li>
<br>
</ul> <br>
</div> <br>
<div id="centre"> <br>
<h2>Titre de niveau 2</h2> <br>
<p> &laquo;Un principe fondamental de l'accessibilité
Web est la flexibilité <br>
qui consiste à répondre à des besoins, à
des
situations et à des préférences <br>
variés. Cette flexibilité bénéficie
à
toute personne utilisant le Web, y compris <br>
celles qui sans avoir de déficience font face à différentes
situations, comme <br>
une connexion à faible débit ou une incapacité
temporaire
(telle qu'une fracture <br>
au bras). Les personnes plus âgées peuvent également
bénéficier de cette flexibilité.&raquo;
<br>
</p> <br>
</div> <br>
<div id="bloc_droit"> <br>
<h2>Rubrique3</h2> <br>
<ul> <br>
<li><a href="lien1">Lien 1 </a></li>
<br>
<li><a href="lien2">Lien 2 </a></li>
<br>
<li><a href="lien3">Lien 3 </a></li>
<br>
</ul> <br>
</div> <br>
</div> <br>
</body> <br>
</html> <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\<Nom Utilisateur>\Application Data\Mozilla\Firefox\Profiles\<nom
profil>\chrome <br />
<strong>NT:</strong><br />
WINNT\Profiles\<Nom Utilisateur>\Application Data\Mozilla\Firefox\Profiles\<nom
profil>\chrome <br />
<strong>98, ME:</strong><br />
Windows\Application Data\Mozilla\Firefox\Profiles\<nom profil>\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é 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>