voici par exemple :
Comment appliquer un style ?Les possibilités sont variées et nuancées. On peut cependant distinguer 3 techniques de base, indispensables à connaître pour débuter.
1. Les élémentsOn peut agir directement sur un élément, équivalent à une balise du code HTML. Avec cet exemple, toutes les images s’afficheront sans bordure :
img {
border : 0;
}
et dans le code HTML
<img src="imgage1.gif" width="145" height="120" alt="image">
2. Les classesLes caractéristiques choisies peuvent s’appliquer à plusieurs éléments sur une page. Avec cet exemple, le texte entre toutes les balises comprenant l’attribut class="couleur" sera affiché en rouge :
.couleur{
background-color: White;
color: Red;
}
et dans le code HTML
<h1 class="couleur">Le titre en rouge</h1>
<p>Le texte du paragraphe dans la couleur principale</p>
<p class="couleur">Le texte du paragraphe en rouge</p>
3. Les identificateursLes caractéristiques choisies ne peuvent s’appliquer qu’à un seul élément sur une page. Avec cet exemple, les indications de position ne pourront s’appliquer qu’une seule fois, à l’image du logo :
#imglogo {
position: absolute;
top: 35px;
left: 30px;
z-index: 1;
}
et dans le code HTML
<img src="logo.gif" id="imglogo" width="50" height="30" alt="logo du club" >
Comment incorporer une feuille de style ?1. Pour l’ensemble du siteTous les styles sont listés dans un simple fichier texte portant l’extension.css, c’est la solution qui permet d’appliquer facilement un même style à toutes les pages d’un site. La feuille de style sera appelée par un lien placé dans l’en-tête de la page.
2. Pour une pageUn style peut aussi être ajouté directement dans l’entête d’une page, il sera compris entre les balises . Cette méthode est surtout intéressante pour un style particulier qui ne s’applique pas à l’ensemble du site, sans quoi le gain de poids des pages serait nul.
3. Pour un élémentEn affectant un attribut style à une balise, il est possible d’appliquer un style précis et différent du style global au contenu de cette balise. Cette possibilité est à utiliser avec parcimonie, sous peine de surcharger le code.
En pratique
Sur une même page, il est possible d’utiliser une seule de ces techniques ou de les associer.
La manière dont elles seront appliquées dépend de deux notions importantes :
- l’héritage : si, dans votre fichier .css, vous avez donné la valeur black à l’attribut color de l’élément body, le contenu de tous les éléments (titre, paragraphe, liste...) compris dans la balise body sera en noir
- la cascade : si vous donnez une autre valeur à l’attribut color dans une page, la dernière valeur indiquée aura la priorité sur celle du fichier global
Cet exemple montre comment utiliser les 3 possibilités :<html>
<head>
<title>Titre de la page</title>
<link rel="stylesheet" type="text/css" href="exemple.css">
<style type="text/css">
<!--
.couleur{
background-color: White;
color: Red;
}
-->
</style>
</head>
<body>
<img src="logo.gif" id="imglogo" width="50" height="30" alt="logo du club" >
<p>Le texte des paragraphes en noir</p>
<p class="couleur">Le texte de ce paragraphe en rouge</p>
<p>Le texte des paragraphes en noir</p>
<p class="couleur">Le texte de ce paragraphe en rouge et <span style="color:green;">ce mot en vert</span></p>
</body>
</html>
Dans la feuille de style exemple.css un identificateur détermine la position du logo, l’élément body a l’attribut color égal à noir. Le texte des paragraphes est donc en noir, à l’exception de ceux ayant l’attribut class="couleur". Parmi ces derniers, un style interne est affecté (dans une balise span) à une partie du texte, qui sera en vert.
RemarquesSoyez attentif à la syntaxe : les accolades, les espaces, le point-virgule.
Attention, la syntaxe est différente pour un style ajouté directement dans une balise :
p {
background-color: White;
color: Red;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
<p style="background-color:White; color:Red; font-family:Arial,Helvetica,sans-serif; font-size:1em">Le texte</p>
pour faciliter votre travail, il est préférable de choisir des noms significatifs pour les classes et les identificateurs (il est difficile de se souvenir que style1 = couleur, style2 = imglogo... !)
Un petit truc : quand vous devez positionner différents blocs sur votre page, attribuez leur une couleur de fond provisoire (background-color)... cela vous permettra de les visualiser et de corriger plus facilement une erreur.
Cette introduction ne vous dévoile pas tout, mais elle vous aidera sans doute à comprendre et bien utiliser les nombreux exemples disponibles sur le Web.
Sujet: Voila 
Ven 9 Fév 2007 - 12:44
Prochaine étapes : CSS et DHTML aaah!
