Présentations des feuilles de style
Présentation, style :
régle = sélecteur {bloc de déclaration}= sélecteur{propriété: valeur;}
h1 {color: blue;}
Présentation, bloc de déclarations :
h1 {
color: blue;
text-align: center;
}
Insérer les styles dans l'entête :
<style type="text/css">
h1 {color: blue;}
</style>
Insérer avec link :
<!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>Titre évocateur pour le document</title>
<meta http-equiv=“Content-Type”
content=”text/html; charset=iso-8859-15” />
<link rel=”stylesheet” type=”text/css” href=”styles.css”
/>
</head>
<body>
<hl>Titre principal de la page</h1>
</body>
</html>
Insérer avec @import :
<style type=”text/css”>
@import url(styles.css)
</style>
Premiere feuille de styles:
h1 {
color: blue;
text-align: center;
}
a {
font-weight: bold;
}
Insérer dans la balise :
<h1 style="color: blue;">Titre de la page</hl>
Sélecteurs de balise :
p {
margin-top: 0;
margin-bottom: 0;
}
Sélecteur de classe :
.sommaire {
color:red;
}
<a href="#" class="sommaire">lien rouge</a>
<p> class="sommaire">un paragraphe de la même classe</p>
Multi classes :
.titre2 {
text-align:center;
}
<h2 class="sommaire titre2">titre de niveau 2 en rouge et centré</h2>
Sélecteurs d'identificateurs :
#encart {
background-color:yellow;
}
<div id="encart">contenu de l'élément</div>
Sélecteurs de pseudo-classes ou pseudo-éléments :
a:hover {
text-decoration:none;
}
<a href="#">texte du lien</a>
a.lien:hover {
text-decoration:none;
color:red;
}
<a class="lien" href="#">texte du lien</a>
Regroupement de sélecteurs :
.texte, p, h1, h2 {
margin-left: 0;
}
Regroupement de propriétés :
p {
font : italic bold 120%/140% Arial, sans-serif;
}
Arborescence :
a.toto {background-color: yellow}
<a class="toto" href="#">lien à fond jaune</a>
<p class="toto">paragraphe à fond jaune</a>}
<p class="toto"><a class="toto" href="#">lien à fond jaune ? </a>
Simplifier la hiérarchie :
<ul id="menu">
<li><a href="#">premier lien du menu</a></li>
<li><a href="#">deuxième lien du menu</a></li>
<li><a href="#">troisième lien du menu</a></li>
</ul>
#menu a {propriètès}
Mise en situation :
<body>
<ul id="menu">
<li><a href="#">Retour à l'accueil </a></li>
<li><a href="#">Présentationde la région </a></li>
<li><a href="#">Historique de l'Alsace</a></li>
<li><a href="#">Gastronomie locale</a></li>
<li><a href="#">Hôtels et gîtes</a></li>
<li><a href="#">Photographies</a></li>
</ul>
<h1><a href="photos.htm" title="photos d'Alsace">Bienvenue en Alsace</a></h1>
<h2>Une belle région française</h2>
<p>Paragraphe associé au sous-titre de niveau 2.
<a href="photos.htm" title="lien vers des photos d'Alsace">
<img src="image.jpg" alt="photographie" /></a></p>
<h2>Un patrimoine considérable</h2>
<p>Paragraphe associé à cet autre sous-titre de niveau 2.</p>
<p id="pied">Pied de page et <a href="#">Mentions légales</a></p>}