CSS : on reprend tout à zéro ! (épisode 8)

Par Joe Gillespie

Cet article est le huitième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.

Huitième étape : des div sur mesure

Qu'est-ce qu'une id ?

Lorsque vous créez des boîtes CSS avec des définitions personnalisées, il n'existe pas d'éléments HTML pouvant y faire appel. Il vous faut les inventer.

Comme il y aura sans doute plusieurs, voire beaucoup de boîtes CSS (des « div ») dans une page donnée, il faut leur trouver des noms. Pour ce faire, on leur attribue des « identités », qu'on appelle id en abrégé. Une id fournit à une boîte CSS une identité qui lui est propre, qui vous permet à vous de bien la repérer et au navigateur de l'afficher correctement.

Prenons un exemple simple : vous voulez diviser une page en trois parties horizontales. Un « en-tête » en haut présente un logo et les liens de navigation. La partie du milieu contient le texte et les images. Tout en bas, vous pouvez aussi avoir un « pied de page » donnant des informations de copyright, et peut-être une répétition de la navigation du haut de page.

Dans cet exemple, plus précisément, vous trouverez cinq boîtes horizontales, les deux supplémentaires servant pour le logo et la barre de navigation, entre l'en-tête et la zone de texte.

Présentation simple

Remarquez que la colonne de droite est plus étroite que celle de gauche, ce qui permet de compenser visuellement l'espace supplémentaire dû à l'aspect crénelé de la partie droite du texte, sans quoi celui-ci paraîtrait décentré.

Dans les définitions de style, nous collons un signe dièse (#) devant le nom que nous voulons donner à la boîte, ce qui en fait une « identité ».

#en-tete {...}
#navigation {...}
#logo {...}
#milieu {...}
#pied-de-page {...}

Puis nous devons lier les définitions aux boîtes CSS elles-mêmes, tout simplement en renvoyant à leurs identités (id) comme ceci :

<div id="en-tete">...</div>
<div id="navigation">...</div>
<div id="logo">...</div>
<div id="milieu">...</div>
<div id="pied-de-page">...</div>

Si l'on a déjà indiqué, par exemple, une police d'écriture dans la déclaration de styles pour la partie body, alors nos boîtes vont « hériter » de ces styles. Mais toute définition de style ajoutée aux définitions des boîtes prendra le pas sur la définition du body, qui est plus large. C'est le principe même de la « cascade ».

Qu'est-ce qu'une class ?

Vous aurez parfois besoin d'utiliser la même boîte plusieurs fois sur une même page. Imaginons que vous voulez séparer la partie du milieu en deux boîtes distinctes, ou plus. Dans ce cas, il vous faut une boîte « réutilisable » et non pas unique. Une boîte réutilisable s'appelle une class. Tout comme on a des « classes » de fleurs ou d'insectes, une class désigne une même boîte mais avec un contenu différent. Pour montrer que nous voulons une class réutilisable au lieu d'une id unique, nous utilisons le point (.) au lieu du signe dièse.

.milieu {} peut désormais être utilisé aussi souvent qu'on le veut, et sur la div elle-même, on précise :

<div class="milieu">...</div>
<div class="milieu">...</div>
<div class="milieu">...</div>

Qu'est-ce qu'un span ?

Les class, contrairement aux id, peuvent s'appliquer au niveau du texte. Si on veut simplement mettre quelques mots en rouge, on peut créer une class spéciale, appelons-la .texterouge :

.texterouge { #cOO }
<span class="texterouge">Ce texte est rouge!</span>

Au lieu d'entourer le texte que l'on veut en rouge d'un <div>...</div>, on utilise <span>...</span>. On dit que ce style est inline, c'est-à-dire en ligne, parce qu'il s'applique à un morceau de texte lui-même déjà contenu dans un <div>...</div>.

Utilisez <span>...</span> dès que vous voulez marquer sur du texte une variation par rapport aux indications générales. Il peut s'agir de couleur, de police d'écriture, de taille, de poids, etc.

Donc, en CSS, il y a des éléments dits block qui sont constitués de boîtes rectangulaires, dotées soit d'id uniques, soit de class réutilisables. Et nous avons aussi des éléments dits inline, qui traitent le texte au caractère près.

On commence à aborder les choses sérieuses !

Épisode 9 »

Fiche technique

À propos de l'auteur

Joe Gillespie est un web designer qui partage ses passions pour le design, les CSS et la typographie depuis 8 ans sur son site Web Page Design for Designers. Il a pris sa retraite du Web cette année, au terme de 80 publications mensuelles. Dommage pour nous !

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

CSS

© 2001-2014 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site