Feuille de style externe

Comme nous l'avons vue dans les précédents tuto, les éléments du style sont incluent directement dans la page elle même ( comme dans le code ci-dessous ) . Nous allons donc dissocier le " style " du reste de la page pour le mettre dans un fichier externe.

<html>
<head>
  <meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>Effets sur les liens</title> <style type="text/css"> .cadredumenugauche a:link {color: red ; text-decoration: underline overline ;} .cadredumenugauche a:hover {border: 1px solid #000000; color: #00FBFF} a:link {color: #000000 ; text-decoration: underline ;} a:visited {color: #FF6699 ; } a:hover { color: red ; text-decoration: underline overline ; } #moncadre { width:800px; margin:auto; padding:10px; background-color:#FFFF00; border-left:1px solid #000000; /* couleur du cadre */ border-right:1px solid #000000; border-bottom:1px solid #000000; border-top:1px solid #000000; } .cadredumenugauche { float:left; text-align:left; width:150px; padding:10px; background-color:#FBFBFF; border:1px solid #000000; /* cadre menu */ color:#666666; } .cadredumenudroite { float:right; text-align:left; width:150px; padding:10px; background-color:#FBFBFF; border:1px solid #000000; /* cadre menu */ color:#666666; } #cadrehaut { height:100px; background-color:#FFCCCC; margin-bottom:10px; } #cadrecentrale { margin-left:180px; min-height:150px; margin-right:180px; border-left:1px dashed #000000; /* couleur du cadre */ border-right:1px dashed #000000; border-bottom:1px dashed #000000; border-top:1px dashed #000000; background-color:#00FBFF; } </style> </head>   <body> <div id="moncadre"> <div id="cadrehaut"></div> <div class="cadredumenugauche"><a href="index.php">mon lien</a></div> <div class="cadredumenudroite"></div> <div id="cadrecentrale"></div> </div> </body> </html>

1: Créer un nouveaux fichier que vous appellez style.css dans lequel vous recopier tout les éléments du style ( sans les balises <style> ) .
2: Supprimez ensuite le style ( au complet ) de votre fichier html ou php en incluent la balise <style type="text/css"> à  </style> et remplacer le par <link type="text/css" href="style.css" rel="stylesheet"> .

Vous voila donc avec ce code + un fichier de style externe :

<html>
<head>
  <meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>Effets sur les liens</title> <link type="text/css" href="style.css" rel="stylesheet"> </head>   <body> <div id="moncadre"> <div id="cadrehaut"></div> <div class="cadredumenugauche"><a href="index.php">mon lien</a></div> <div class="cadredumenudroite"></div> <div id="cadrecentrale"></div> </div> </body> </html>

<link type="text/css" href="style.css" rel="stylesheet"> permet d'appeller le fichier de style externe nomé style.css . Votre code est ainsi plus lègé pour la navigation et vous permet d'intervenir que dans un seul fichier si vous avez besoins de modifier  l'apparence de votre site .

Voir/déposer un commentaire (0) | Signaler un problème