Tutoriel : Feuille de style externe

Transcription

1 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>,, <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

2 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=" alt="logo de Cerise" src="images/logoceri.gif"></a> <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 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

3 L'ouverture du deuxième style se fait après l'image retour.gif..texte h2 {margin:2em 0 2em 1%; padding: em; 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">< Maj /CP</p> <p class="bas"><img alt="logo de l'urfist au format PNG" src="images/urfist.png"> Cerise Copyright 1999 </p> 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

4 Taponot Céline Urfist Paris 4/5

5 Taponot Céline Urfist Paris 5/5