Récapitulatif : le code source des pages
Précédent Chapitre 10. Réalisation de la feuille de style du site Suivant

Récapitulatif : le code source des pages

La page d'accueil (xHTML)

Il y a peu de différence pour les deux autres pages. 

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
      <title>DG : La salcicophilie</title>
      <link rel="stylesheet" type="text/css" href="site-ecran.css" media="screen" />
      <link rel="stylesheet" type="text/css" href="site-imprime.css" media="print" />
   </head>
   <body>

      <h1>Bienvenue chez moi</h1>

      <p>
         Je m'appelle <span class="nom">Truc Bidule</span>, je suis en 
         <a href="http://grappa.univ-lille3.fr/polys/htmlcss/">Licence MIASHS</a>, 
         j'ai 99 ans.
      </p>

      <p>
         Mes loisirs préférés sont :
      </p>

      <ul>
         <li>la <a href="xsite02css.html">salcicophilie</a>,</li>
         <li>la <a href="xsite03css.html">pénidébarphilie</a>.</li>
      </ul>

      <p>
         Mon voisin s'appelle 
         <a href="http://grappa.univ-lille3.fr/~gonzalez"><span class="nom">Machin 
         Chose</span></a>.
      </p>

      <div class="signature"></div>     

      <div class="valid">
         <a title="Validation HTML du W3C : ces pages respectent la norme" 
          href="http://validator.w3.org/check/referer"><img style="border:0" 
          src="http://grappa.univ-lille3.fr/~gonzalez/images/validxhtml.png" 
          alt="Valid HTML 4.01!" /></a>
         <a title="Validation CSS du W3C : la feuille de style respecte la norme" 
          href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0" 
          src="http://grappa.univ-lille3.fr/~gonzalez/images/vcss.png" 
          alt="Valid CSS!" /></a>
      </div>
   </body>
</html>

La feuille de style pour l'écran

   BODY { 
      background:#FFDDDD;
      color:blue;
      font-size:130%;
      font-family: sans-serif;
   }
   H1 { 
      text-align:center;
      background:blue;
      color:white;
      border-style:solid;
      border-width:thin;
      border-color:white;
   } 
   SPAN.nom { 
      font-variant: small-caps;
      font-style: italic;
   } 
   LI { 
      list-style-type:square;
   }
   A:link { 
      color:green;
      background:inherit;
   }
   A:visited { 
      color:#FF9900;
      background:inherit;
   }
   A:hover, A:visited:hover { 
      color:red;
      background:inherit;
   }
   DIV.signature { 
      position: fixed;
      bottom: 10pt;
      right: 5pt;
      font-size:90%;
      color:gray;
      font-style:italic;
      background:inherit;
   }
   DIV.signature:before { 
      content:"C'est moi qui l'ai fait!";
   }
   DIV.retour { 
      background:yellow;
      position: fixed;
      top: 5pt;
      right: 5pt;
      font-size:90%;
      color:gray;
      font-variant:small-caps;
      border: red thin solid;
   }
   DIV.retour a:link,DIV.retour a:hover,DIV.retour a:visited { 
      text-decoration:none;
   }
   DIV.valid { 
      position: fixed;
      bottom: 10pt;
      left:5pt;
      border:none;
   }

La feuille de style pour l'impression

Elle sera presque identique à celle pour l'écran. 

   BODY { 
      font-family: serif;
      font-size:12pt;
   }
   H1 { 
      text-align:center;
      border-style:solid;
      border-width:thin;
      border-color:black;
      margin:2em;
      padding:2em;
   }
   SPAN.nom { 
      font-variant:small-caps;
      font-style:italic;
   }
   LI { 
      list-style-type:circle;
   }
   A:link,A:hover,A:visited { 
      text-decoration:none;
      color:black;
   }
   DIV.signature { 
      position: fixed;
      bottom: 10pt;
      right: 5pt;
      font-size:90%;
      color:gray;
      font-style:italic;
   }
   DIV.signature:before { 
      content:"C'est moi qui l'ai fait!";
   }
   .cacher { 
      visibility: hidden;
   }
   DIV.valid, DIV.retour { 
      display:none;
   }
Précédent Niveau supérieur Suivant
La feuille de style pour l'écran Sommaire Partie III. CSS, plus loin