CSS veut dire "Cascading Style Sheet", soit "Feuille de Style en Cascade". Il s'agit donc de style, c'est à dire de mise en page. De mise en page de pages web, plus exactement.
Lorsque vous "Allez sur un site web", que faites-vous plus exactement ? Vous lancez un programme, plus exactement, un "Navigateur", comme Internet Explorer, FireFox, Google Chrome, Opéra, ou Safari. Ce sont tous des programmes (gratuits) qui permettent "d'aller sur internet"
Une fois que vous avez cliqué sur votre navigateur, vous allez sur un site web. Vous tapez l'adresse (www.vivelesjouets.com par exemple), et vous appuyez sur la touche ENTER. Vous avez donc sous les yeux, la page d'accueil du site.
Bienvenue sur le site "Vive les jouets".
Vous trouverez sur ce site des poupées, des maquettes, et plein d'autres choses
En fait cette page est codée en HTML. C'est à dire qu'il y a des codes et des balises. Si vous allez dans le menu Page/Afficher la source, vous y verrez à peu près ceci :
<html>
<head>
<title>
Vive les jouets
</title>
</head><body> <p>Bienvenue sur le site "Vive les jouets".</p> <p>Vous trouverez sur ce site des poupées, des maquettes, et plein d'autres choses</p> </body></html>
La page html commence donc par la balise <html> et se termine par </html>. A l'intérieur de ces deux balises, il y a deux sous-sections : <head> et <body>.
Dans la section <head>, nous trouverons des informations générales sur la page, telles que le titre <title>. Dans la section <body>, il y aura le texte "réel" de la page, ce qui apparaîtra dans votre navigateur.
A l'intérieur de la section <body>, on constate que les phrases sont encadrées par une balise <p>, qui veut dire "paragraph". Chaque phrase (ou plus exactement chaque paragraphe, doit être encadré par ces balises <p> et </p>.
Pour résumer de A à Z : le webmaster responsable du site www.vivelesjouets.com va créer chez lui une page web qu'il va nommer index.htm. Ce sera la page d'accueil du site, elle s'appelle toujours index.htm. Pour ce faire, il ne va pas utiliser Word, mais plutôt un programme spécialisé dans la création de sites web. Dans mon cas, j'utilise Adobe DreamWeaver CS3, mais il en existe bien d'autres. Une fois sa page terminée, il va la transférer sur le serveur qui héberge son site. Oui, quand on a un site web, il faut bien qu'il soit sur un ordinateur allumé 24H sur 24, sans risque de panne. Notre webmaster a donc réservé un nom de domaine (vivelesjouets.com), et il a associé ce nom de domaine avec son hébergeur. Ensuite, il a créé sa page web avec son programme spécialisé, et l'a transféré sur son serveur, via un programme FTP (File Transfer Protocol). Si vous êtes débutants en création de site web, je me doute bien que tout ceci peut vous paraître chinois, mais nous sommes dans un didacticiel CSS, et non pas dans un guide "Comment créer son site web".
Ce paragraphe théorique me paraît nécessaire pour comprendre la chose suivante : lorsque le webmaster travaille dans son programme spécialisé, tel que DreamWeaver, il fait les choses tout bien : polices de caractères, couleurs, tailles, images, sa page commence a "avoir de la gueule".
Bon, ça c'est dans DreamWeaver.
Maintenant, il va transférer sa page sur son serveur, et attendre que les visiteurs viennent la visiter !
Et c'est là qu'on peut se poser des questions... Tous les utilisateurs n'ont pas le même équipement ! Certains ont des ordinateurs très rapides, et d'autres plus lents... Certains ont de très grands écrans, et, en plus, utilisent une très haute résolution. D'autres auront un écran de taille modeste et, peut-être qu'en plus, ils demanderont de gros caractères.
Du coup, comment être certain que la belle mise en page va s'afficher correctement chez tout le monde ?
En plus, les gens utilisent des navigateurs différents. Moi, j'utilise Google Chrome. Et vous ? Ah, vous utilisez Internet Explorer ! Et votre fils, lui, utilise FireFox !
Aïe ! Mais est-on certain que ces différents navigateurs interprètent les balises HTML de la même manière ?
Comment ? Ah ! Votre grand-mère utilise un Mac ! Et votre frère qui habite en Afrique utilise une toute vieille version d'Internet Explorer dans un cybercafé !
Eh oui ! le parc informatique mondial est composé d'une quantité incroyable de combinaisons d'ordinateurs possibles ! Et notre pauvre webmaster va devoir, en codant sur sa seule machine, faire en sorte que son travail ne soit jamais défiguré.
Et si tout ceci ne suffisait pas, il faut encore savoir qu'il existe plusieurs versions de CSS : CSS 1, CSS 2 et CSS 3. Chacune de ces versions de CSS étant plus ou moins bien supportée par certaines versions des différents navigateurs.
Bonne chance !
Bien. Maintenant que j'ai réussi à vous dégoûter de la conception de sites web :-), parlons de CSS !
Nous avons donc le code source suivant (J'ai volontairement éradiqué tout le reste de la page web pour une question de clarté):
<p>Bienvenue sur le site "Vive les jouets".</p>
<p>Vous trouverez sur ce site des poupées, des maquettes, et plein d'autres choses</p>
Comment cette page va-t-elle s'afficher ? ... En caractères noirs, de taille modeste, avec une police de caractère "normale", sur fond blanc,
Déjà ici, on peut se poser des questions ! Pourquoi en noir sur fond blanc ? Et quelle taille exactement ? Et quelle police ??? Ce sont des valeurs par défaut, prédéfinies dans le navigateur... Mais déjà là, imaginez le désordre si Internet Explorer affichait les caractères en gris foncé sur fond gris clair, et que le navigateur Safari qui tourne sur Mac, affiche, lui des caractères bleus sur fond blanc, mais en gras !
Heureusement, tous les navigateurs s'entendent "à peu près plus ou moins en gros" sur les valeurs par défaut !
Prenons le code suivant :
<p>un deux trois quatre cinq six</p>Ca va donner :
un deux trois quatre cinq six
Bien que le code soit écrit sur deux lignes, le résultat sera écrit sur une seule ligne.
A contrario, regardons ce code :
<p>un deux trois</p> <p>quatre cinq six</p>Va donner :
un deux trois
quatre cinq six
Et cette fois, le résultat apparaît sur deux lignes, bien que dans la source, on a tout écrit sur une seule ligne. En fait, le texte encadré par <p> et </p> prend forcément la place d'une ligne complète.
<p> est donc une balise dite de block.
Ce qui veut dire qu'il y a des balises de "pas block". Ce sont des balises dites inline.
Dans le cas de <p>, qui veut dire "paragraphe", c'est bien évident que c'est un block. Mais admettons qu'on veut mettre un bout de texte en gras par exemple. On a pas forcément envie de mettre toute une ligne complète en gras. Gras en anglais se dit strong.
Regardons cet exemple :
<p>un deux trois
<strong>quatre
</strong>
cinq
six</p>Le texte est donc encadré par les balises <p> et </p>, mais, à l'intérieur, il y a une sorte de sous-balise : <strong>. C'est une balise inline. C'est à dire que quatre ne sera pas isolé sur une ligne, comme ceci :
un deux trois quatre cinq six
Vous trouverez donc des balises de type block et des balises de type inline.
Vous pourriez me dire que strong, en anglais, ça ne veut pas vraiment dire "gras". ça veut plutôt dire "fort" ! Et vous auriez raison ! Du coup, quand on encadre un texte en "strong", il pourrait apparaître en grand, ou en rouge ! Pourquoi en gras ??? parce que tout le monde, y compris ceux qui conçoivent les navigateurs, estiment que strong, c'est gras !
Et c'est ici qu'interviennent les styles CSS. Admettons que vous, personnellement, vous estimez que ce qui est <strong>, doit être écrit en rouge.
Vous écririez ceci :
un deux
<strong style="color:#FF0000">trois</strong>
quatre
</strong>
Qui donnerait :
un deux trois quatre cinq six
Quatre est alors écrit en gras, car c'est ce qui est défini par défaut, et, en plus, en rouge, car c'est ce que vous venez de définir.
<strong> ou <p> sont des BALISES qui contiennent des SELECTEURS (strong et p)
style est un PARAMETRE
color est un ATTRIBUT
#FF0000 est une VALEUR (Ce code veut dire Rouge en HexaDécimal).
Les balises <p> et <strong> sont des balises connues de HTML, qui contiennent des mises en forme prédéfinies (un certain espacement entre les paragraphes <p>, et la mise en gras pour <strong> par exemple.
Il est possible d'utiliser deux balises neutres, qui ne contiennent aucune prédéfinition de style. <span> est une balise inline neutre, et <div> est une balise block neutre.
<p>Pomme</p><p>Fraise</p>
<div>Poire</div><div>Ananas</div>
<span>Mangue</span>
<span>Cerise</span>
Donne ce résultat :
Pomme
Fraise
Il y a donc un peu plus d'espace entre les <p> qu'entre les <div>, et les <span> ne contiennent pas de saut de ligne.
L'idée est de mettre en forme les balises <div> et <span> à notre goût. Nous allons les colorer avec l'attribut background-color.
<div>Poire</div>
<div style="background-color:#FF6">Ananas</div>
<div style="background-color:#3F6">Pomme</div>
<span style="background-color:#F9F">Mangue</span>
<span style="background-color:#F33">Cerise</span>
On constate que la coloration du fond d'un <div> s'étale sur toute la page (car c'est une balise de bloc - block), alors que dans le cas d'un <span>, ça s'arrête au niveau des mots (car c'est une balise inline).
Il n'est pas forcément intelligent de se livrer à ce genre d'exercice, mais c'est juste pour mieux comprendre cette histoire de block et inline. C'est l'attribut display qui va entrer en ligne de compte.
La coloration du fond est ici uniquement destinée à mieux étudier les différentes lignes.
<div>Poire</div>
<div style="display:inline">Ananas</div>
<div style="display:inline">Pomme</div>
<p style="display:inline">poire</p>
<p>ananas</p>
<span style="display:block">mangue</span>
<span>Cerise</span>
poire
ananas
mangue CeriseL'intérêt, avec les CSS, est de définir les styles des balises en haut de la page HTML , afin de les réutiliser à l'envi.
Pour ce faire, nous allons utiliser une balise <style>, dans la section <head>, comme ceci :
<html>
<head>
<title>
Les fruits et les couleurs
</title>
<style type="text/css">
</style>
</head>
<body> <div>Banane jaune</div>
<p>Pomme verte</p>
<div>Citron jaune</div>
<p>Cerise rouge</p>
<div>Ananas Jaune</div>
<p>Poire verte</p>
</body></html>
Ca donne ceci :
Pomme verte
Cerise rouge
Poire verte
Admettons que tous les <div> doivent avoir un fond jaune, et tous les <p> un fond vert, nous ferions ceci :
<html>
<head>
<style type="text/css">
div { background-color:#FF6 }
p { background-color:#3F6 }
</style>
</head>
<body> <div>Banane jaune</div>
<p>Pomme verte</p>
<div>Citron jaune</div>
<p>Cerise rouge</p>
<div>Ananas jaune</div>
<p>Poire verte</p>
</body></html>
Qui donnerait :
Pomme verte
Cerise rouge
Poire verte
Ainsi, si on a 500 paragraphes <div>, ils auront un fond vert, tous les 500. Et si on change le code couleur dans la zone <style>, tous les <div> changeront instantanément de couleur.
On perçoit ainsi immédiatement l'intérêt immense de ces CSS !
Maintenant, nous aimerions juste changer la couleur de fond de la Cerise Rouge, en lui mettant un fond... rouge !
Mais juste ce paragraphe-là, exceptionnellement. Les autres, on n'y touche pas.
Nous allons exploiter le concept de "Cascade". CSS veut dire "Cascading Style Sheet" (Feuilles de style en cascade).
C'est à dire que nous allons laisser le style défini de <p> en fond vert "pleuvoir" sur tous les paragraphes <p> présents, mais nous allons, au niveau local, redéfinir la couleur de fond d'un seule paragraphe <p> : celui de la cerise, comme ceci :
<html>
<head>
<style type="text/css">
div { background-color:#FF6 }
p { background-color:#3F6 }
</style>
</head>
<body> <div>Banane jaune</div>
<p>Pomme verte</p>
<div>Citron jaune</div>
<p style="background-color:#F33">Cerise rouge</p>
<div>Ananas jaune</div>
<p>Poire verte</p>
</body></html>
Qui va donner :
Pomme verte
Cerise rouge
Poire verte
Nous avons empêché la cascade de la propriété background-color.
Maintenant, imaginons que le fond vert ne nous gênait pas. Nous aurions plutôt voulu, en plus du fond vert, pour la cerise uniquement, écrire en rouge. Nous aurions procédé ainsi :
<html> <head> <style type="text/css"> div { background-color:#FF6 }
p { background-color:#3F6 } </style> </head> <body> <div>Banane jaune</div>
<p>Pomme verte</p>
<div>Citron jaune</div>
<p style="color:#F33"> Cerise rouge</p>
<div>Ananas jaune</div>
<p>Poire verte</p> </body></html> Qui donne :
Pomme verte
Cerise rouge
Poire verte
La Cerise rouge est à la fois définie en fond vert par la section <style>, et nous lui avons ajouté une écriture rouge. Nous ne parlons pas ici de cascade, mais d'héritage.
C'est à dire que la Cerise "Accepte" la prédéfinition "Fond vert", mais y ajoute son style local personnel : "Ecriture rouge".
Notre manière d'intercaler des <div> et des <p> selon que l'on veuille des fonds jaunes ou verts n'est vraiment pas recommandée ni pratique.
Nous avons la possibilité de créer ce qu'on appelle des classes.
C'est à dire, des "sortes" de <div> ou des "sortes" de <p>. Dans notre exemple, nous n'allons utiliser que des div dans les styles.
Ca se fait comme ceci :
<head> <style type="text/css">
div.fondjaune { background-color:#FF6 }
div.fondvert { background-color:#3F6 } </style>< </head> <body> <div class="fondjaune">Banane jaune</div>
<div class="fondvert">Pomme verte</div>
<p class="fondjaune">Citron jaune</div>
<div class="fondrouge">Cerise rouge</div>
<div class="fondvert" style="background-color:#99F>Ananas jaune</div>
<div class="fond vert">Poire verte</div> </body>Donne ceci :
Pomme verte
Il faut rester très attentif avec les majuscules et les minuscules, comme ceci :
<head> <style type="text/css"> div.fondcouleur { background-color:#FF0 }
div.FondCouleur { background-color:#0F0 } </style>< </head> <body> <div class="fondcouleur">
tout en minuscule
</div>
<div class="FondCouleur">
Première lettre en minuscule
</div>
<div class="fondcouleuR">
style inexistant (R majuscule à la fin)
</div>
</body>
Donne :
Première lettre en majuscule
Il est possible de définir des propriétés pour une balise, et également des propriétés pour une classe de la balise, comme ceci :
<head> <style type="text/css"> div { background-color:#FF6 }
div.fondvert { background-color:#3F6 } </style>< </head> <body> <div>Banane jaune</div>
<div class="fondvert">Pomme verte</div>
<div class="tralala">Citron jaune</div>
</body>Donne :
Pomme verte
Il est possible d'attribuer deux ou plusieurs classes à une même balise, comme ceci :
<head> <style type="text/css"> div.fondjaune { background-color:#FF6 }
div.fondvert { background-color:#3F6 }
div.ecriturerouge {color:#F00 } </style>< </head> <body> <div class="fondjaune ecriturerouge">Banane jaune</div>
<div class="ecriturerouge fondvert">Pomme verte</div>
<div class="fondjaune fondvert">Ananas</div>
<div class="fondvert fondjaune">Citron</div>
</body>On constate qu'il y a un conflit lorsqu'on demande à appliquer à la fois fondjaune et fondvert sur une même balise. Le résultat est imprévisible, et il vaut mieux évidemment éviter un tel cas de figure.
Pomme verte
on peut avoir une balise avec plusieurs classes, comme on vient de le voir, mais on peut également avoir une balise avec une classe qui est composée de plusieurs propriétés, comme ceci (Notez le ; de séparation, ainsi que la présenttaion possible sur une ligne, ou sur plusieurs lignes, pour une simple question de lisibilité.) :
<head> <style type="text/css"> div.jaunebleu {background-color:#FF0;color:#009 }div.rougevert
{
background-color:#F00;
color:#0F0
} </style>< </head> <body> <div class="bleujaune">Banane</div><div class="rougevert">Pomme</div>
</body> Donne :
Que se passe-t-il si on définit plusieurs fois la même classe de manières différentes, comme ceci :
<head> <style type="text/css"> div.fondcouleur { background-color:#FF0 }
div.fondcouleur { background-color:#0F0 ; color:#F00}
</style>< </head> <body> <div class="fondcouleur">Banane</div>
</body>C'est évidemment une erreur à ne pas commettre, mais ça peut arriver par erreur, et le navigateur ne vous signalera pas d'erreur. Il va simplement utiliser la première définition, ignorant totalement l'autre (même si la couleur rouge est définie en plus), comme ceci :
Imaginons deux classes : fondjaune et fondvert. Les deux classes doivent écrire le texte en bleu. Plutôt que d'écrire :
<head> <style type="text/css"> div.fondjaune {background-color:#FF0;color:#009 }
div.fondvert {background-color:#3F6;color:#009 }</style>< </head> Nous préférerons :
<head>
<style type="text/css">
div.fondjaune, div.fondvert {color:#009 }
div.fondjaune {background-color:#FF0 }
div.fondvert {background-color:#3F6 }
</style> </head> <body> <div class="fondjaunejaune">Banane</div><div class="fondvert">Pomme</div>
</body>Constatez la virgule entre div.fondjaune et div.fondvert. Qu'on choisisse l'un ou l'autre de ces deux définitions de classes, le résultat sera :
Imaginez que vous ayez non pas seulement deux classes fondjaune et fondvert, mais en plus, fondrose, fondgris, fondbeige, etc. Si vous devez à chaque fois répéter color:#009, c'est lourd, c'est sujet à faire des erreurs et c'est malpratique.
Mieux vaut donc largement utiliser cette dernière technique qui consiste à regrouper les définitions communes.
Admettons que nous désirions que tous les fonds de toutes les balises soient jaunes (toute la page web, du coup !). On fait comme ça (étoile *) :
<head> <style type="text/css">
div.fondvert {background-color:#3F6 }
* {background-color:#FF0 }
</style>
</head> <body> <div>Banane</div><div class="fondvert">Pomme</div>
<div>Citron</div>
<p>Ananas</p>
</body>Toute la page sera jaune, sauf "Pomme", puisque sa définition est plus "spécifique" :
Ananas
Il est maintenant possible de restreindre quelque peu cette définition un peu trop large !
Par exemple, on voudrait que tous les textes de classe ecriturerouge soient écrits en rouge, qu'il s'agisse de <p>, <div>, <span>, ou n'importe quelle autre balise.
Plutôt que d'écrire de manière fastidieuse :
<head> <style type="text/css"> div.ecriturerouge, span.ecriturerouge,
p.ecriturerouge
{ color:#F00 }
</style>< </head> On écrirait de manière plus simple, tout en évitant d'oublier d'autres balises.
On peut utiliser l'étoile (*) ou pas (en mettant simplement un point (.), ça veut dire la même chose.
Ca veut dire que, quelle que soit la balise utilisée, si elle est de classe ecriturerouge ou ecriturebleu, le texte sera écrit en rouge ou en bleu.
<head> <style type="text/css"> *.ecriturerouge
{ color:#F00 }
.ecriturebleu { color:#03C }
</style> </head> <body> <div>Banane</div>
<div class="ecriturerouge">Fraise</div>
<p class="ecriturebleu">Raisin</p>
<div class="ecriturebleu">Un
<span class="ecriturerouge">Deux</span>
Trois</div>
</body>On constate que nous avons une balise <span> imbriquée dans une balise <div>. Ca donne :
UnDeuxTrois
On peut très bien imbriquer des balises dans d'autres balises, comme ceci :
<head> <style type="text/css"> div.fondjaune { background-color:#FF0 }
div.fondvert { background-color:#0F0 }
span.rougebleu { background-color:#0CF ; color:#F00; }
</style> </head>
<body>
<div class="fondjaune">
Banane
<div>
Ananas
</div>
<div class="fondvert">
Pomme
<span class="rougebleu">
Cerise
</span>
</div>
</div>
</body>
Qui donne :
Jusqu'ici, nous avons simplement abordé la théorie des CSS de manière un peu restrictive, puisque nous nous sommes bornés à parler de fruits avec fondjaune, fondvert, ecriturerouge, ...
Dans la réalité, les classes CSS évoquent plutôt la structure de la page, plutôt que sa mise en forme !
Continuons à parler de fruits.
Nous allons maintenant scinder notre page web en deux parties : l'en-tête de la page, et le texte général de la page, comme ceci :
<body>
<div class="entete">
bienvenue
cher visiteur !
</div>
<div class="textegeneral">
Les fruits sont : banane, ananas, cerise, raisin, citron, tomate
</div>
</body>
Il suffit de définir les mises en forme div.entete et div.textegeneral pour obtenir un résultat intéressant.
Ainsi, on comprend mieux le code HTML lorsque les classes s'appellent entete ou textegeneral que fondbleu ou ecriturerouge.
Maintenant, admettons que le mot "Visiteur" et le mot "Cerise" soient des mots importants, et qu'il faille donc les mettre en valeur.
Nous écrirons alors ceci :
<head> <style type="text/css"> span.important { color:#FF0; background-color:#F00 } </style> </head>
<body> <div class="entete"> bienvenue
cher <span class="important">visiteur</span> ! </div> <div class="textegeneral"> Les fruits sont : banane, ananas, <span class="important">cerise</span>, raisin, citron, tomate </div> </body> Ce qui donne :
Maintenant, imaginons que tous les <span> de classe "important" doivent être écrits en rouge sur fond jaune LORSQUE cette balise se trouve imbriquée DANS le <div class="entete">
ET QUE
Tous les <span> de classe "important" doivent être écrits en bleu et en gras (En anglais Bold - sans fond particulier) lorsque nous nous trouvons IMBRIQUES dans <div class="textegeneral">, nous procéderions comme ceci :
div.entete ESPACE span.important {color : #FF0; background-color:#F00 }
<head> <style type="text/css"> div.entete span.important { color:#FF0; background-color:#F00 }
div.textegeneral span.important { color:#00F; font-weight:bold } </style> </head> <body> <div class="entete"> bienvenue
cher <span class="important">visiteur</span> ! </div> <div class="textegeneral"> Les fruits sont : banane, ananas, <span class="important">cerise</span>, raisin, citron, tomate </div> </body>La mise en forme de la classe important est ainsi complètement différente selon le contexte.
On dit que span.important est un descendant de div.texte general, et également de div.entete.
A ce stade de votre lecture, si vous débutez en CSS, vous pourriez penser que ça devient bien compliqué, et est-il bien nécessaire de recourir à de telles finesses ? - Dans le cadre d'un petite site web de quelques pages, c'est bien entendu inutile, mais dans le cas d'un site web comprenant des centaines de pages, ces possibilités deviennent confortables, voire indispensables..
Il y a une nuance entre un descendant et un enfant.
Comme on peut imbriquer les balises à l'infini, il peut être utile de savoir si telle ou telle balise est un ENFANT ou un DESCENDANT de telle ou telle balise.
Prenons cet exemple (un peu bateau, mais c'est juste pour expliquer le principe) :
</body>
<div class="Maison">
Une famille vit ici.
<div class="Chambre">
C'est la pièce ou Jessica dort
<div class="Armoire">
Je suis pourvue de deux grandes portes
<div class="Tiroir">
Il y a des chaussettes ici.
</div>
</div>
</div>
</div>
</body>
Maison a 3 descendants . Chambre, Armoire et Tiroir. Chambre est son Descendant direct.
Ainsi, on dit que l'enfant de Maison est Chambre.
En suivant le même principe, Chambre a deux descendants (Armoire et tiroir), et Armoire est son enfant.
Armoire n'a qu'un enfant : Tiroir. Armoire a un parent : Chambre, et deux ascendants : Chambre et Maison.
Le principe est le même que dans un arbre généalogique.
Prenons l'exemple d'une maison pourvue d'un placard à l'entrée, d'un rez de chaussée et d'un étage. Au rez, il y a une pièce, et à l'étage, il y a une autre pièce. Dans chacune d'entre elle, il y a un placard :
</body>
<div class="maison">
<div class="placard">
</div>
<div class="rez">
<div class="piece">
<div class="placard">
</div>
</div>
</div>
<div class="etage">
<div class="piece">
<div class="placard">
</div>
</div>
</div>
</div>
<body>
Voici le même schéma, avec quelques textes dans les différentes sections :
</body> <div class="maison">
Je suis à la porte d'entrée de la maison
<div class="placard">
Chaussures dans le placard de l'entrée de la maison
</div> <div class="rez">
Vestibule de l'entrée
<div class="piece">
Cuisine du rez-de chaussée
<div class="placard">
Casseroles
dans le placard de la cuisine
</div> </div> </div> <div class="etage">
Je suis sur le palier de l'étage
<div class="piece">
Je suis dans la chambre, à l'étage
<div class="placard">
Chaussettes dans le placard de la chambre, à l'étage
</div> </div> </div> </div> <body> Voici quelques exemples de mise en forme (remplissage du fond en jaune) :
Tout ce qui est à l'étage devient jaune (La chambre et le placard de l'étage deviennent jaune par héritage) :
div.etage { background-color:#FF0 }
div.placard { background-color:#FF0 }
Dans ce cas, on aurait aussi également pu écrire :
div.maison div.placard { background-color:#FF0 } (puisque tous les placards se trouvent par définition dans la maison)
C'est maintenant que nous allons voir la différence entre "Descendant" et "Enfant". Dans l'exemple qui suit, nous allons colorer en jaune tous les placards qui sont directement "enfants" de la maison, grâce au signe ">"
div.maison>div.placard { background-color:#FF0 } Dans l'exemple qui suit, rien n'est coloré en jaune, puisqu'il n'y a pas d'enfant direct "placard" à l'étage :
div.etage>div.placard { background-color:#FF0 } Voici plusieurs manières de colorer le contenu des placards de l'étage :
div.etage div.placard { background-color:#FF0 }
div.maison div.etage div.placard { background-color:#FF0; }
div.maison>div.etage div.placard { background-color:#FF0; }
div.maison>div.etage>div.piece>div.placard { background-color:#FF0; } Il est possible de mettre en forme une balise/classe à la condition qu'elle suive une autre balise/classe spécifique.
Prenons cet exemple :
</body>
<div class="andre">
Je m'appelle André Agassi
</div>
<div class="bernard">
Je m'appelle Bernard Lavilliers <div class="daniel">
je m'appelle Daniel Guichard
</div>
</div>
<div class="charles">
Je m'appelle Charles Pasqua
</div>
<div class="bernard">
Je m'appelle Bernard Henry-Lévy
</div>
<body>
Voyons comment se suivent et s'imbriquent les styles. Nous avons :
Créons maintenant des styles pour cette structure.
Cette première définition montre l'utilisation basique du signe +.
div.andre+div.bernard { background-color:#FF0 }
C'est à dire que tous les <div class="bernard"> qui suivent un <div class="andre"> seront mis en forme avec un fond jaune, comme ceci :
Dans cet exemple, rien ne sera mis en vert, car il n'y a aucun style div.charles qui suit un div.andre.
div.andre+div.charles { background-color:#0F0 }
div.bernard+div.daniel { background-color:#3FF } Si on avait voulu mettre en forme div.daniel lorsqu'il est imbriqué dans div.bernard, nous aurions dû écrire :
div.bernard div.daniel { background-color:#3FF }
div.bernard+div.charles+div.bernard { background-color:#F9F }
Il est possible de créer des classes, qui sont utilisables autant de fois qu'on veut dans une page HTML, et on peut également créer des ID qui fonctionnent strictement de la même manière que les classes, mais les ID sont censés n'être représentés qu'une seule fois dans la page. Or, il n'y a aucune erreur si on utilise plusieurs fois le même ID.
Pour qu'une classe soit un ID, on remplace le point (.) par #, et class par ID, comme ceci :
<head> <style type="text/css">
.classevert{background-color:#3F0}
#identitejaune{background-color:#FF0}
</style> </head> <body>
<div class="classevert">Pomme</div>
<div class="classevert">Raisin</div>
<div class="identitejaune">Banane</div>
<div id="classevert">Poire</div>
<div id="identitejaune">Citron</div>
<div id="identitejaune">Ananas</div> </body>Donne :
Assez étrangement, Ananas accepte de s'écrire en jaune bien que ce soit la 2ème fois qu'on utilise identitejaune dans cette page. On pourrait conclure que la création d'ID sert juste de "conseil".
On poeut ainsi imaginer une page web avec trois sections, représentées par des ID au lieu de classes. Par exemple div#entete, div#corps et div#piedpage, qui contiendraient des "classes sous-sections", comme ceci par exemple :
Un tableau de base, en HTML, s'encadre par <table> et </table>.
Avant
<table>
Pomme
</table>
Après
Ne donne pas un résultat satisfaisant ("Pomme" est écrit à côté de "Avant")
A l'intérieur de notre tableau, nous allons devoir insérer un ou plusieurs <tr> (Table Row - Ligne de tableau), comme ceci :
Avant
<table>
<tr>
Pomme
</tr>
</table>
Après
Le résultat n'est pas mieux qu'avant ::
Afin de pouvoir écrire dans le tableau, il faut y insérer non pas des <tc> (Table Column) - comme on pourrait s'y attendre - mas des <td> (Table Data), comme ceci :
Avant
<table>
<tr>
<td>
Pomme
</td>
</tr>
</table>
Après
Enfin, cette fois, "pomme" est bien écrit :
| Pomme |
Ainsi, on comprend que la table est composée d'un certain nombre de lignes (<tr>), qui contiennent un certain nombre de données/colonnes (<td>).
Voici un tableau composé d'une seule ligne, mais de 2 colonnes :
Avant
<table>
<tr>
<td>
Pomme
</td>
<td>
Noix de coco
</td>
</tr>
</table>
Après
En l'absence de quelconques mesures, la taille des cellules s'adaptent au contenu.
| Pomme | Noix de coco |
Voici maintenant un tableau de trois lignes et deux colonnes. La première ligne contient une seule colonne :
Avant <table>
<tr>
<td> Fruits et couleurs </td></tr>
<tr>
<td> Pomme </td>
<td> Verte </td>
</tr>
<tr>
<td> Banane </td>
<td> Jaune </td>
</tr>
</table> Après | Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Maintenant, on peut y appliquer des styles CSS. Encadrons tout le tableau en rouge, avec un fond rose :
<head>
<style type="text/css">
table {
border-style:solid;
border-color:#FF0000;
border-width:3px;
background-color:#F37AA8;
}
</style>
</head>
<body>
Avant <table> <tr>
<td> Fruits et couleurs </td></tr> <tr>
<td>Pomme</td> <td>Verte </td> </tr> <tr>
<td>Banane </td> <td>Jaune </td> </tr> </table> Après
</body> | Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Maintenant, ajoutons une bordure bleue foncé et un fond bleu clair à la balise de ligne <tr> :
<style type="text/css">
table {
border-style:solid;
border-color:#FF0000;
border-width:3px;
background-color:#F37AA8;
}
tr {
border-style:solid;
border-width:3px;
border-color:#2E0DCA;
background-color:#BAC9FC;
} </style>
On constatera que la bordure n'est pas prise en compte, et ça n'a rien à voir avec le fait que <table> a déjà une bordure. On ne peut simplement pas encadrer les <tr>, c'est comme ça.
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Encadrons et colorons maintenant les <td> en jaune :
table {
border-style:solid;
border-color:#FF0000;
border-width:3px;
background-color:#F37AA8;
}
tr {
border-style:solid;
border-width:3px;
border-color:#2E0DCA;
background-color:#BAC9FC;
}
td {
border-style:solid;
border-width:3px;
border-color:#99931A;
background-color:#FFFF00;
} On constate que la définition du <td> écrase complètement celle du <tr>. Il n'y a plus de trace de bleu, nulle part. Du coup, on peut se demander l'utilité de mettre en forme les <tr>...
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Jusqu'ici, nous avons laissé le tableau se dimensionner naturellement selon la largeur du texte. Admettons que le tableau doive mesurer la moitié de la largeur de la page :
Avant <table width="50%"> <tr> <td> Fruits et couleurs </td></tr> <tr> <td>Pomme</td> <td>Verte </td> </tr> <tr> <td>Banane </td> <td>Jaune </td> </tr> </table> Après
Le tableau mesure bien la moitié de la page, mais les cellules ne mesurent pas chacune la moitié du tableau. On dirait qu'il proportionne les cellules selon la taille des contenus ("Fruits et couleurs" est large - donc, la colonne de gauche est proportionnellement large.
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
On peut utiliser indiféremment l'attribut HTML width, ou l'attribut CSS width, comme ceci :
Avant <table width="50%"> <tr> <td>Pomme</td> <td>Verte </td> </tr></table> Entre deux <table style="width:50%"> <tr> <td>Pomme</td> <td>Verte </td> </tr></table> Après
| Pomme | Verte |
| Pomme | Verte |
Si la taille du tableau dépasse la taille de la fenêtre, ça ne dérange personne :
Avant <table width="1000px"> <tr>
<td> Fruits et couleurs </td></tr> <tr>
<td>Pomme</td> <td>Verte </td> </tr> <tr>
<td>Banane </td> <td>Jaune </td> </tr> </table> Après
On confirme là notre intuition : en l'absence de mesures spécifiques, la première colonne reste proportionnellement plus large que la deuxième.
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Si nous désirons imposer des tailles aux contenus du tableau, c'est possible. Il est inutile de donner des tailles aux <tr>, puisque les <tr> ont de facto la même taille que le tableau. Essayons quand même :
Avant <table> <tr width="1000px"> <td> Fruits et couleurs </td></tr> <tr> <td>Pomme</td> <td>Verte </td> </tr> <tr> <td>Banane </td> <td>Jaune </td> </tr> </table> Après
Le tableau s'affiche comme si on n'avait rien spécifié comme largeur :
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
On peut moduler la largeur des cellules <td> elles-mêmes : Dans ce premier exemple, nous imposons la largeur de 1000 pixels à une quelquonque cellule de gauche :
Avant <table> <tr>
<td> Fruits et couleurs </td></tr> <tr>
<td>Pomme</td> <td>Verte </td> </tr> <tr>
<td width="1000px">Banane </td> <td>Jaune </td> </tr> </table> Après
Lorsque nous avions défini <table width="1000px">, il avait accepté de déborder de la page. Dans cet exemple, le tableau doit s'adapter à la taille de la fenêtre (ou, dans le cas de ce didacticiel, à l'élément parent - ce cadre avec une bordure bleue large en haut qui simule une fenêtre). Il prend donc un maximum de largeur en laissant juste la place aux textes de la 2ème colonne de s'afficher correctement :
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Et si on essaie, au contraire, de définir une largeur vraiment trop étroite ? Disons 2 pixels, qui est tellement étroit, qu'il n'y a même pas la place pour écrire une seule lettre :
Avant <table> <tr>
<td> Fruits et couleurs </td></tr> <tr>
<td>Pomme</td> <td>Verte </td> </tr> <tr>
<td width="2px">Banane </td> <td>Jaune </td> </tr> </table> Après
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Que se passe-t-il si on définit plusieurs tailles incompatibles comme ceci :
Avant <table> <tr>
<td width="2px"> Fruits et couleurs </td></tr> <tr>
<td width="1000px">Pomme</td> <td>Verte </td> </tr> <tr>
<td width="2px">Banane </td> <td>Jaune </td> </tr> </table> Après
Ce n'est ni la première mesure ni la dernière mais ... La plus grande ! Il faut le savoir ! Et comme la plus grande dépasse la taille de la fenêtre, elle s'adape.
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Inutile de dire que si on se laisse aller à de telles fantaisies, on va vite attraper la migraine. Autant faire un effort de cohérence dans la construction de nos tableaux.
La balise <table> accepte les margin, mais pas les padding dans tous les cas :
Avant <table style="margin:20px; padding:50px;"> <tr> <td> Fruits et couleurs </td></tr> <tr> <td>Pomme</td> <td>Verte </td> </tr> <tr> <td>Banane </td> <td>Jaune </td> </tr> </table> Après
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Afin de se rendre compte des effets des margin et padding, voici un tableau qui mixe un peu tout :
Avant <table style="margin:20px; padding:20px;"> <tr style="margin:20px; padding:20px;"> <td style="margin:20px; padding:20px;"> Fruits et couleurs </td></tr> <tr> <td style="margin:20px; padding:20px;">Pomme</td> <td>Verte </td> </tr> <tr> <td>Banane </td> <td>Jaune </td> </tr> </table> Après
On se rend compte que :
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Pour obtenir une marge inter-cellules, on ne peut pas utiliser CSS, mais la propriété cellspacing de la balise <table> :
<table cellspacing="20px">
Mais on ne peut ainsi pas définir plusieurs espacements différents.
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Ce tableau, copié de cette page, résume les limitations des différentes balises :
Admettons qu'on veuille écrire "Fruits et couleurs" au dessus des deux autres cellules :
Avant <table> <tr> <td colspan="2"> Fruits et couleurs </td></tr> <tr> <td>Pomme</td> <td>Verte </td> </tr> <tr> <td>Banane </td> <td>Jaune </td> </tr> </table> Après
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
On peut également fusionner deux (ou plusieurs) cellules l'une en dessous de l'autre, mais c'est plus compliqué car un tableau se construit ligne par ligne. Du coup, comme la cellule fusionnée du bas (Banane) n'a plus lieu d'exister, il faut l'enlever :
Avant <table> <tr> <td> Fruits et couleurs </td></tr> <tr> <td rowspan="2">Pomme et Banane </td> <td>Verte </td> </tr> <tr> <td>Banane </td> <td>Jaune </td> </tr> </table> Après
| Fruits et couleurs | |
| Pomme et Banane | Verte |
| Jaune |
Avant <table style="border-collapse:collapse"> <tr> <td> Fruits et couleurs </td></tr> <tr> <td>Pomme</td> <td>Verte </td> </tr> <tr> <td>Banane </td> <td>Jaune </td> </tr> </table> Après
La bordure interne des cellules prend le pas sur la bordure du tableau lui-même. Il peut y avoir des conflits au niveau des border-collapse. Cette page en parle en détails.
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
Il est inutile de définir border-collapse pour les éléments interne à la table, comme ceci :
Avant <table style="border-collapse:collapse"> <tr style="border-collapse:separate> <td style="border-collapse:separate> Fruits et couleurs </td></tr> <tr style="border-collapse:separate"> <td style="border-collapse:separate">Pomme</td> <td style="border-collapse:separate">Verte </td> </tr> <tr> <td>Banane </td> <td>Jaune </td> </tr> </table> Après
On a beau vouloir redédinir le border-collapse en separate, le border-collapse de <table> prime sur tout :
| Fruits et couleurs | |
| Pomme | Verte |
| Banane | Jaune |
La seule manière de mélanger des border-collapse différents est d'imbriquer une table dans une autre :
Avant <table style="border-collapse:collapse"> <tr> <td>Exemple sous table</td></tr> <tr> <td>Un</td> <td>Deux</td> </tr> <tr> <td>Trois</td>
<table style="border-collapse:separate">
<tr>
<td>
AAA
</td>
<td>
BBB
</td>
</tr>
<tr>
<td>
CCC
</td>
<td>
DDD
</td>
</tr>
</table>
</tr> </table> Après
| Un | Deux | ||||
| Trois |
|
Sans border-collapse :
| dashed 1px | dashed 3px | dashed 5px |
| dotted 1px | dotted 3px | dotted 5px |
| double 1px | double 3px | double 5px |
| groove 1px | groove 3px | groove 5px |
| none 1px | none 3px | none 5px |
| inset 1px | inset 3px | inset 5px |
| outset 1px | outset 3px | outset 5px | ridge 1px | ridge 3px | ridge 5px |
| solid 1px | solid 3px | solid 5px |
Avec border-collapse :
| dashed 1px | dashed 3px | dashed 5px |
| dotted 1px | dotted 3px | dotted 5px |
| double 1px | double 3px | double 5px |
| groove 1px | groove 3px | groove 5px |
| none 1px | none 3px | none 5px |
| inset 1px | inset 3px | inset 5px |
| outset 1px | outset 3px | outset 5px |
| ridge 1px | ridge 3px | ridge 5px |
| solid 1px | solid 3px | solid 5px |
La balise <th> (table header) représente la première ligne du tableau. On peut s'en servir pour différencier la ligne d'entête dans la balse HTML, mais elle est facultative.Par défaut, elle affiche en gras. On peut même avoir plusieurs lignes d'entête, comme ceci :
Avant
<table>
<tr>
<th colspan="2">Tableau de fruits</th>
</tr>
<tr>
<th>Fruits</th>
<th>Couleurs</th>
</tr>
<tr>
<td>Pomme</td>
<td>Verte </td>
</tr>
<tr>
<td>Banane </td>
<td>Jaune </td>
</tr>
</table>
Après
| Tableau de fruits | |
|---|---|
| Fruits | Couleurs |
| Pomme | Verte |
| Banane | Jaune |
Il est possible de diviser son tableau en trois sections différentes, grâce aux balises <thead> (Table En-tête), <tfoot>(Table Pied) et <tbody>(Table Corps). Il est conseillé de mettre <tfoot> avant <tbody> pour que le rendu de longts tableaux se fasse mieux.
L'avantage de la technique des 3 sections est qu'il est possible de facilement définir des mises en forme grâce à CSS, comme ceci :
La légende se place n'importe où entre <table> et </table>. Elle s'affiche de toute façon au dessus du tableau, au dessus. L'attribut Summary ne s'affiche pas, mais peut être lu par des dispositifs de lecture orale pour non voyants.
Avant <table summary="Un tableau de fruits colorés">
<caption>Liste de fruits</caption> <tr> <td>Pomme</td>
<td>Verte </td> </tr>
<tr> <td>Banane </td>
<td>Jaune </td> </tr> </table> Après | Pomme | Verte |
| Banane | Jaune |
Voici le code pour centrer un tableau :
Avant <table style="margin-left:auto;margin-right:auto;"> <tr> <td>Pomme</td>
<td>Verte </td> </tr>
<tr> <td>Banane </td>
<td>Jaune </td> </tr> </table> Après | Pomme | Verte |
| Banane | Jaune |
Voyez cette autre page très complète sur l'utilisation des tableaux.