Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe
Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU.
Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche ?
Ensuite ouvrez Notepad2 dont vous devriez trouver le dossier sur le bureau de votre ordinateur.
Faites enregistrez-sous et choisissez le format CSS Style Sheets. En nom de fichier écrivez style.
Eliminez dans le code html de votre page cerise.htm tout ce qui n'est pas nécessaire : <font>,
<br>, &nbsp;, <center>, <b>, <div>, les attributs de la balise body (text et link par exemple).
Quand vous aurez fait ce premier nettoyage enlevez aussi toutes les balises table, td, tr et tbody et
les images blank.gif.
Ceux sont tous ces éléments que nous allons remplacer par la feuille de style que vous avez créée
préalablement.
Enregistrez votre feuille et fermez Notepad2, vous allez utiliser un peu maintenant l'éditeur de CSS
de NVU.
Dans NVU allez dans Outil > Editeur CSS Cliquez sur feuille liée :
–
–
–
dans URL allez chercher votre feuille de style,
dans liste des médias écrivez all,
Titre notez Feuille de style de Cerise et faites créer votre feuille de style
Cliquez sur Règle et choisissez l'option style appliqué à tous les éléments correspondant d'un type.
A la place d'écrire une balise, vous allez utiliser le sélecteur universel * que vous souhaitez
appliquer à votre page la police arial et la couleur noire :
* { font-family: "arial",verdana,lucida,sans-serif;color: rgb(0, 0, 0) ;}
Dans un deuxième temps, nous allons définir l'arrière plan de la page et la taille de la police par
défaut qui sont des éléments décris dans la balise body.
Dans l'onglet fond vous pourrez intégrer l'image fond2.gif en arrière plan qui se trouvent dans le
dossier images.
Laissez les réglages par défaut. Pour la taille de la police, choisissez 0.9em.
body { background-image: url(Images/fond2.gif);font-size:0.9em}
Nous allons ensuite revenir à la page html en positionnant les balises paragraphes et donnant au
titre « Comment débuter une recherche » la valeur H2.
Nous allons créer un cadre commun que nous appellerons #source car,il a pour vocation d'être
unique, on l'utilisera donc comme un identifiant unique ou id.
Le cadre nous aidera par la suite à positionner les différents blocs que nous allons créer.
#source {margin:0px 2px 0px 0px;padding:0;}
Conseil : quand vous serez dans l'éditeur de CSS choisissez style appliqué à tous les éléments du
sélecteur mais n'oubliez pas d'écrire le dièse.
Les marges sont à zéro à l'exception de la marge de droite que nous avons voulu dès l'origine avec
un retrait de 2 px ou 2 pixels.
Taponot Céline – Urfist Paris
1/5
Ce cadre dans le code HTML se traduira par l'ouverture d'une balise <div id=”source”> juste après
la balise body et la fermeture de la balise après </body>
Pour positionner les images comme nous le souhaitons, nous allons utiliser un bloc, c'est à dire la
balise div, allié avec un élément de type class.
Conseil : vous allez pouvoir enfin tester la règle style nommé. Toutefois, il n'est pas nécessaire
comme pour les id d'ajouter le « . » devant votre nom de style, il est automatiquement ajouté.
.colonne {width:14%;float:left;}
Ce bloc nous l'appellerons colonne, il aura pour largeur 14% de l'écran et générera une boîte de
bloc qui flotte à gauche. C'est ce qui nous permet d'aligner les images à gauches.
#cerise {margin: 0 ;position:absolute;} (correspond à l'image logoceri.gif)
L'id Cerise que nous allierons aussi à un bloc (div), a une marge de zéro puisque nous souhaitons
accoler le logo à la marge de gauche.
Le position absolute permet que mon bloc se situe hors du flux normal. Ainsi, il n'a aucune
influence sur la mise en forme des autres éléments.
Dans le code HTML, cela se traduit :
<div id="source">
<div class="colonne">
<div id="cerise">
<a href="http://www.ccr.jussieu.fr/urfist/cerise/index.htm"><img alt="Logo de Cerise"
src="Images/logoceri.gif"></a></div>
</div>
<div class="texte">
#retour {position:absolute;padding: 0em 0 0 1em;margin:0;} (correspond à l'image
retour.gif)
On retrouve les mêmes propriétés que que pour le premier logo, à l'exception de l'espacement
interne de 1 em à gauche pour le centré au milieu de la colonne.
Dans le code HTML, cela se traduit :
<div class="colonne">
<div id="retour"><a href="#0" onclick="javascript:history.back()"><img
style="border: 0px solid ; width: 72px; height: 53px;"
alt="Retour vers la page précédente" src="Images/retour.gif"></a>
</div>
</div>
<div class="texte”>
Nous allons maintenant créer le cadre, nous permettant de positionner le texte central par rapport
au style .colonne.
.texte {margin: 0% 10% 2em 130px;padding: 0;}
Nous l'utiliserons deux fois, il est donc préférable d'en faire une classe : pas de marge interne mais
une marge de droite de 10% la taille de l'écran, une marge de 2 em en bas et une marge de 130
pixel à gauche.
On obtient dans le HTML, l'ouverture d'une balise div class="texte", juste après la fermeture de l'id
cerise et sa fermeture après la balise hr.
Taponot Céline – Urfist Paris
2/5
L'ouverture du deuxième style se fait après l'image retour.gif.
.texte h2 {margin:2em 0 2em 1%; padding:0 0 0 1em;
background: url(file:Images/pict1gm.gif) 0% 0% no-repeat;}
H2 étant contenu dans la balise texte et souhaitant lui appliquer une image devant, il nous faut
donc lui intégrer un style particulier.
Positionnement du titre dans le bloc :
Une marge de 2 em sur le haut, de 2 em sur le bas et de 1% à gauche pour aligner le titre dans le
bloc. Une marge interne de 1em sur la gauche sera nécessaire pour aligner en plus, le titre sur
l'image.
Pour intégrer l'image, nous allons ruser en l'appliquant en tant qu'arrière plan.
Quand on spécifie une image d'arrière-plan, les propriétés 0% 0% indique la position initiale de
celle-ci. La paire de valeur indique ici, un positionnement sur le coin en haut et à gauche de l'image
et aligné sur celui du bord de l'espacement de la boîte.
.bas {font-size:0.7em;}
Nous voulons que le texte en bas de page soit plus petit, il nous faut donc appliquer une police
moins importante pour indiquer la source du document, ici 0.7 em.
En HTML :
<div class="texte">
<p class="bas"><http://www.ccr.jussieu.fr/urfist/cerise/p1.htm> Maj
29-09-04/CP</p>
<p class="bas"><img alt="Logo de l'Urfist au format PNG"
src="Images/URFIST.png"> Cerise Copyright &copy; 1999 </p>
</div>
hr {margin-top:2em;}
Souhaitant insérer un espace entre le texte et la balise hr, nous intégrons une marge de 2em sur le
haut.
a:link {color: #000000;text-decoration:underline}
a:visited {color: #525252;text-decoration:underline;}
a:hover {background: #ffffce;text-decoration:underline;}
Pour personnifier les liens, nous donnons aux liens lorsqu'ils sont actifs, visités ou surlignés des
couleurs différentes mais, ils restent soulignés.
Pour que les images n'aient pas de bordures lorsqu'elles servent de liens. Créez une règle de style,
qui supprime les bordures des images :
img { border-style: none;border-width: 0px; }
Mais comme les images sont des liens actifs lors du survol du curseur, leurs fonds changent de
couleur. Pour que cela soit plus discret, nous allons lui appliquer un fond blanc.
a:hover img {background:rgb(255, 255, 255);}
Une fois terminé, validez votre feuille de style et votre page web.
Taponot Céline – Urfist Paris
3/5
Taponot Céline – Urfist Paris
4/5
Taponot Céline – Urfist Paris
5/5