Source : http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html?sesid=94f421f6ed281ffc4a24f903bb697a602393c000&sesmid=-3420#ss_part_1
Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes soient écrits par exemple en bleu / 18 pixels.
Comment faire pour que seulement certains paragraphes (ou certains titres, ou certaines citations) soient écrits d'une manière différente ?
On a la possibilité pour faire cela d'utiliser des attributs spéciaux qui fonctionnent sur toutes les balises :
- L'attribut class
- L'attribut id
-
Nous allons voir les choses suivantes dans l'ordre :
1. Ce que sont les class et id et comment s'en servir
2. Les balises dites "universelles" et leur utilité
3. Les imbrications de balises
4.
Que de réjouissances en perspective !!!
Class et ID
Que les choses soient claires dès le début : les attributs class et id sont quasiment identiques. Il y a seulement une petite différence que je vous dévoilerai plus bas.
Pour le moment et pour faire simple, on ne va s'intéresser qu'à l'attribut class.
Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image que etc...
<h1 class=""> </h1>
<p class=""></p>
<img class="" />
Oui mais que met-on comme valeur à l'attribut class ?
En fait, vous mettez un nom. Ce que vous voulez.
Les class vous permettent de définir un style personnalisé.
Supposons que vous vouliez définir un style appelé "important" qui écrive le texte en rouge / 18 pixels. Vous rajouterez l'attribut class="important" à chacune des balises que vous voulez modifier.
Sur cet exemple j'ai rajouté un attribut class à un paragraphe et à la citation :
Code : HTML
<!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" >
<head>
<title>Page d'exemple pour tester le CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Essai 2" href="essai2.css" />
</head>
<body>
<h1>Découverte du CSS</h1>
<p>
Bonjour !<br />
Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour les tutoriaux du <a href="http://www.siteduzero.com">Site du Zér0</a>
</p>
<h2>Ce n'est que du blabla</h2>
<p>
Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q class="important">C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
J'aime la choucroute en conserve.<br />
Vive les frites !
</p>
<p class="important">
Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
</p>
</body>
</html>
Comment faire à partir de là pour dire dans le CSS : "Je veux que toutes mes balises qui ont la class "important" soient écrits en rouge / 18 pixels" ?
C'est très simple : au lieu de mettre le nom de la balise avant les accolades (comme p ou encore h1), vous devez écrire un point suivi du nom de la class, comme par exemple :
.important
Ce qui nous donnerait le CSS suivant :
Code : CSS
.important
{
color: red;
font-size: 18px;
}
Testez maintenant la page XHTML précédente, et voyez comment la class "important" que nous avons créée modifie le texte :
Pratique, n'est-ce pas ?
Et l'attribut id alors ?
Lui, il fonctionne exactement de la même manière que class, à un détail prêt : il ne peut être utilisé qu'une fois.
Quel intérêt ? Il y en a assez peu pour tout vous dire, cela vous sera utile si vous faites du Javascript plus tard pour reconnaître certaines balises. D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens (pour réaliser des ancres).
En pratique, nous ne mettrons des "id" que sur des éléments qui sont uniques sur votre page, comme par exemple le logo :
<img src="images/logo.png" alt="Logo du site" id="logo" />
Dans le CSS, ce n'est pas un point que vous devez mettre avant le nom de l'id, mais un dièse (#) :
Code : CSS
#logo
{
/* Mettez les propriétés CSS ici */
}
Je ne vous propose pas de le tester, parce que de toute façon ça fonctionne exactement comme class.
Si vous vous emmêlez les pinceaux entre class et id (il ne devrait pas y avoir de raison, mais on sait jamais ), vous pouvez utiliser tout le temps des class car ça marchera toujours.
Pour ma part, il se peut que j'utilise des id dans la suite de ce cours. J'ai pris l'habitude de mettre un id plutôt qu'une class quand je sais que je ne m'en servirai qu'une fois.
Les balises universelles
Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id mais c'est plus rare) à certains mots qui ne sont pas entourés par des balises.
En effet, le problème des class c'est qu'il s'agit d'un attribut, vous ne pouvez donc en mettre que sur une balise.
Par exemple, si je veux modifier uniquement "Neil Armstrong" dans le paragraphe suivant :
Code : HTML
<p>Comme l'a dit Neil Armstrong un certain 20 juillet 1969...</p>
Ca serait facile à faire s'il y avait une balise autour de "Neil Armstrong", malheureusement il n'y en a pas.Heureusement, on a inventé la balise-qui-sert-à-rien
En fait, on a inventé 2 balises qui ne servent à rien, avec une petite (mais importante !) différence entre les deux :
- <span> </span> : c'est une balise de type inline. Vous vous souvenez ce qu'est une balise inline ? C'est une balise qui se met à l'intérieur d'un paragraphe, comme <strong>, <em>, <q>. Cette balise s'utilise donc au milieu d'un paragraphe, et c'est celle dont nous allons nous servir pour colorer Neil Armstrong.
- <div> </div> : c'est une balise de type block. Comme <p>, <h1> etc... Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne. C'est une balise très très utilisée pour faire un design. Nous lui dédierons d'ailleurs 2 chapitres entiers dans la partie III du cours pour vous aider à construire le design de votre site web.
Pour le moment donc, nous allons utiliser plutôt la balise <span>.On la met autour de Neil Armstrong, on lui rajoute une class, on crée le CSS et puis basta
Code : HTML
<p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</p>
Code : CSS
.nom
{
color: blue;
commenter cet article …
