Cours XHTML/CSS - A l'abordage des CSS

Cours XHTML/CSS : A l'abordage des CSS

2 commentaires

Voilà déjà deux chapitres que nous ne faisons que parler du XHTML. Vous connaissez désormais la structure d'une page Web, la structure des balises XHTML et la signification d'une grande partie de ces balises. En théorie, en me lisant, vous devriez vous dire :

Bon, en gros t'es en train de me dire que je connais l'XHTML et que je n'ai plus grand chose à apprendre... pourtant, si je regarde les pages que j'arrive à créer, ce n'est franchement pas brillant !

Hé oui, par exemple, vous pouvez créer un site sur les plantes carnivores très facilement en utilisant une structure du genre :

Code :

<!DOCTYPE html PUBLIC "-//W3 //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>Titre du site</title>

       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

   </head>

   <body>

        <h1 id="haut">Titre du site</h1>

           <p>Slogan du site</p>



        <h2>Menu</h2>

          <a href="" title="">Lien n°1</a> | 

          <a href="" title="">Lien n°2</a> | 

          <a href="" title="">Lien n°2</a>



        <h2>Titre n°1</h2>

          <p>Paragraphe n°1</p>



        <h2>Titre n°2</h2>

          <p>Paragraphe n°2</p>



<p>Copyright - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>

   </body>

</html>

Voir le résultat

Il ne vous reste plus qu'à remplir le site avec le contenu que vous voulez :

Code :

<!DOCTYPE html PUBLIC "-//W3 //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>Les plantes caaarnivores</title>

       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

   </head>

   <body>

        <h1 id="haut">Les plantes caaarnivores</h1>

           <p>Parce que la nature aussi est cruelle</p>



        <h2>Menu</h2>

          <a href="accueil.html" title="Accueil de Caaarnivores">Accueil</a> | 

          <a href="lexique.html" title="Lexique sur les plantes carnivores">Lexique</a> | 

          <a href="livreOr.html" title="Livre d'or pour laisser vos impressions">Livre d'or</a>



        <h2>Mais pourquoi caaarnivores ?</h2>

          <p>Non pas à nous, Éternel, non pas à nous, mais à ton nom donne gloire, a cause de ta bonté, à cause de ta fidélité ! Pourquoi les nations diraient-elles : où donc est leur Dieu ? Notre Dieu est au ciel, il fait tout ce qu'il veut. Leurs idoles sont de l'argent et de l'or, elles sont l'ouvrage de la main des hommes. Elles ont une bouche et ne parlent point, elles ont des yeux et ne voient point, elles ont des oreilles et n'entendent point, elles ont un nez et ne sentent point, elles ont des mains et ne touchent point, des pieds et ne marchent point, elles ne produisent aucun son dans leur gosier. Ils leur ressemblent, ceux qui les fabriquent, tous ceux qui se confient en elles. Israël, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Maison d'Aaron, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Vous qui craignez l'Éternel, confiez-vous en l'Éternel ! Il est leur secours et leur bouclier. L'Éternel se souvient de nous : il bénira, il bénira la maison d'Israël, il bénira la maison d'Aaron, il bénira ceux qui craignent l'Éternel, les petits et les grands ; l'Éternel vous multipliera ses faveurs, a vous et à vos enfants. Soyez bénis par l'Éternel, qui a fait les cieux et la terre ! Les cieux sont les cieux de l'Éternel, mais il a donné la terre aux fils de l'homme. Ce ne sont pas les morts qui célèbrent l'Éternel, ce n'est aucun de ceux qui descendent dans le lieu du silence ; mais nous, nous bénirons l'Éternel, dès maintenant et à jamais. Louez l'Éternel !</p>



        <h2>Je peux participer ?</h2>

          <p>Louez l'Éternel, car il est bon, car sa miséricorde dure à toujours ! Louez le Dieu des Dieux, car sa miséricorde dure à toujours ! Louez le Seigneur des seigneurs, car sa miséricorde dure à toujours ! Celui qui seul fait de grands prodiges, car sa miséricorde dure à toujours ! Celui qui a fait les cieux avec intelligence, car sa miséricorde dure à toujours ! Celui qui a étendu la terre sur les eaux, car sa miséricorde dure à toujours ! Celui qui a fait les grands luminaires, car sa miséricorde dure à toujours ! Le soleil pour présider au jour, car sa miséricorde dure à toujours ! La lune et les étoiles pour présider à la nuit, car sa miséricorde dure à toujours ! Celui qui frappa les Égyptiens dans leurs premiers-nés, car sa miséricorde dure à toujours ! Et fit sortir Israël du milieu d'eux, car sa miséricorde dure à toujours ! A main forte et à bras étendu, car sa miséricorde dure à toujours ! Celui qui coupa en deux la mer Rouge, car sa miséricorde dure à toujours ! Qui fit passer Israël au milieu d'elle, car sa miséricorde dure à toujours ! Et précipita Pharaon et son armée dans la mer Rouge, car sa miséricorde dure à toujours ! Celui qui conduisit son peuple dans le désert, car sa miséricorde dure à toujours ! Celui qui frappa de grands rois, car sa miséricorde dure à toujours ! Qui tua des rois puissants, car sa miséricorde dure à toujours ! Sihon, roi des Amoréens, car sa miséricorde dure à toujours ! Et Og, roi de Basan, car sa miséricorde dure à toujours ! Et donna leur pays en héritage, car sa miséricorde dure à toujours ! En héritage à Israël, son serviteur, car sa miséricorde dure à toujours ! Celui qui se souvint de nous quand nous étions humiliés, car sa miséricorde dure à toujours ! Et nous délivra de nos oppresseurs, car sa miséricorde dure à toujours ! Celui qui donne la nourriture à toute chair, car sa miséricorde dure à toujours ! Louez le Dieu des cieux, car sa miséricorde dure à toujours !</p>



<p>Copyright Caaarnivore - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>

   </body>

</html>

Voir le résultat

Mais c'est tout. Pourtant, tout est là... mais vous voudriez aussi pouvoir ordonner le texte, l'aligner à tel endroit, ajouter de la couleur ou des images de fond, que sais-je encore... Ce qui vous manque c'est la mise en page, le design. Ce qui vous manque, c'est le CSS bn_big_smile

Une petite ode aux CSS pour se mettre dans l'ambiance.
Par di13774n73

Où écrire du code CSS

Si on reprend notre page XHTML de tout à l'heure sur les plantes Caaarnivores, nous avons 3 manières de lui appliquer du code CSS. Une bonne et deux à n'utiliser qu'en cas d'extrême nécessité. Commençons par ces deux là...

Ajouter du CSS directement dans les balises XHTML

De la même manière que l'on a précédemment utilisé un attribut href pour préciser un lien hypertexte, ou un attribut title pour préciser un titre, on va maintenant se servir de l'attribut style pour appliquer du code CSS à une balise.
Donc si on prend l'exemple d'un paragraphe avec la balise <p> :
Code :

<p style="Mon code CSS">

Je lève mes yeux vers les montagnes... D'où me viendra le secours ? Le secours me vient de l'Éternel, qui a fait les cieux et la terre. Il ne permettra point que ton pied chancelle ; celui qui te garde ne sommeillera point.

</p>

On peut ainsi se servir de l'attribut style dans toutes les balises que l'on a vu précédemment.

Ajouter du CSS au début du fichier XHTML

On peut aussi ajouter du CSS dans le header du fichier XHTML, entre les balises <head></head> à l'aide de la balise <style>. Tout ce qui se situe entre <style> et </style> sera considéré et interprété comme du code CSS.
Code :

<!DOCTYPE html PUBLIC "-//W3 //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>Titre de la page</title>

       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

       <style type="text/css">

       <!--

       Mon code CSS

       -->

       </style>

   </head>

   <body>

   ...

On met le code CSS entre des balises de commentaires  pour éviter que les très vieux navigateurs (qui n'interprètent pas le CSS) n'affichent bêtement le code sur la page sans l'interpréter.

Inconvénients de ces deux méthodes

Je vous en ai rapidement parlé dans l'introduction de ce cours d'XHTML/CSS, mais l'intérêt d'utiliser deux langages de programmation est de séparer le contenu de la forme. En travaillant comme cela, si un jour on souhaite modifier la couleur de fond de notre site Internet, on aura juste à modifier la partie forme (le CSS) c'est-à-dire quelques lignes dans une ou deux pages grand maximum, sans s'occuper, ni modifier les 3 600 pages de contenus (le XHTML). Et ça, c'est particulièrement intéressant ! Lorsqu'un site augmente en taille, ce n'est même plus une question de flemmardise, c'est de la survie !

Je viens de faire un petit calcul : sans compter les pages du forum, la Bnbox compte, à l'heure où j'écris ces lignes, presque 1000 pages. Je vous laisse imaginer si je devais modifier à la main chacune de ces 1000 pages à chaque fois que je souhaite modifier mon design...

Or ce que nous avons fait dans les méthodes précédentes, c'est justement de mélanger le contenu et la forme. Du coup tout l'avantage d'utiliser deux langages de programmation disparait en fumée !

Je ne vous l'ai d'ailleurs pas dit, mais on peut mettre en page du texte avec du XHTML. Enfin plutôt avec du HTML. Avant que les CSS ne soient utilisées, on se servait de la balise font et des attributs align, color, ... pour faire le design d'un site Internet. Et on galérait ! Jusqu'à ce que l'on sépare contenu et forme...
Un autre avantage du CSS est de pouvoir créer un "patron". Par exemple, on peut écrire du code CSS permettant de mettre en valeur tous les titres de notre site. (avec image de fond, et tout le tralala ) On peut ensuite appliquer ce "patron" autant de fois que l'on veut dans notre fichier XHTML. Et pourtant on n'aura écrit qu'une seule fois du CSS.

Et la première méthode que je vous ai présenté ne tire pas avantage de ce potentiel énorme des CSS !

Je vous conseille donc de n'utiliser ces deux méthodes qu'en dernier recours ! Cela dit, on s'en sert parfois pour modifier le design d'un site d'une page à une autre à l'aide de PHP, ou d'un autre langage du même acabit.

La bonne méthode : le CSS dans un fichier séparé

La bonne méthode à utiliser est de placer le code CSS dans un fichier à part. Ce fichier aura pour extension .css (tout simplement bn_wink

) et contiendra tout le code CSS.
Par exemple :
Code :

@charset "iso-8859-1";

/* Auteurs : Flan, Barth, Blouhibou, BN, Yoshi */

/* Date de création : 30/06/07 */



/* Balises générales */

body {

    margin:0px;

    font-family:Tahoma, Verdana, Arial, sans-serif;

    font-size:0.8em;

}



a {

    color:#4EAC40;

    font-weight:bold;

    text-decoration:none;

}

    a:hover {

        text-decoration:underline;

    }

a img {

    border:0 none;

}

img.email {

    position:relative;

    top:4px;

}

Dans ce chapitre, ne vous inquiétez pas du code CSS en lui-même, comme d'habitude, je vous donne de vrais exemples que vous ne comprenez pas (forcément) pour l'instant, mais qui vous paraîtront plus clairs dans les prochains chapitres.

Pour ma part j'ai pris l'habitude de toujours commencer mes fichiers CSS de la même manière. Ce n'est pas obligatoire, même s'il est conseillé de préciser au moins le jeu de caractères. (voir chapitre 1 pour les jeux de caractères.)

Code :

@charset "iso-8859-15";

/* Auteur : BN */

/* Date de création : 12/01/09 */

Une petite parenthèse mini_bn

Il est possible d'ajouter une page CSS dans une autre à l'aide de la commande import des CSS. C'est parfois utile si vos fichiers CSS sont très volumineux et que vous souhaitez les partager en plusieurs petits morceaux.
Code :

@import url(nomDuFichierCSSAImporter.css);

Cela ne fonctionnera pas sur les vieux navigateurs.
Je ferme cette petite parenthèse qui vous servira peut-être un jour.

Maintenant, il ne reste plus qu'à relier nos pages XHTML à notre fichier CSS. Pour cela, on va utiliser la balise <link> dans notre page Web :
Code :

<link rel="stylesheet" type="text/css" media="screen" title="Titre du design" href="nomFichierCSS.css" />

On explique ainsi clairement à notre page XHTML quel fichier CSS elle doit suivre. Les attributs de cette balise sont un petit peu différents de d'habitude, mais les seuls qu'il est important de comprendre sont href et title (que vous connaissez déjà) et media (qui permet de préciser pour quel type d'affichage s'applique le fichier CSS : screen pour un affichage à l'écran, print pour l'impression... J'y reviendrai dans un autre chapitre.

Résumons

Résumons. Où peut-on écrire du code CSS ?

Dans un fichier à part. On a donc un fichier CSS :
Code :
@charset "iso-8859-15"; /* Auteur : BN */ /* Date de création : 12/01/09 */ balise { /* Ceci est un commentaire CSS */ propriétéCSS: valeur1; propriétéCSS: valeur2; ... }

Et un fichier XHTML dont l'entête contient :
Code :
<link rel="stylesheet" type="text/css" media="screen" title="Titre du design" href="nomFichierCSS.css" />
Directement dans une balise :
Code :
<p style="propriétéCSS: valeur1; propriétéCSS: valeur2;"></p>
Directement dans le fichier XHTML :
Code :
<style type="text/css">  </style>

Et voilà, vous savez désormais où est-ce que vous allez coder votre CSS, même si vous ne savez toujours pas écrire une seule ligne dans ce langage mini_bn

Ne vous inquiétez pas, ça ne va pas tarder !

Vos premières lignes en CSS

Appliquer du CSS sur des balises

Bon, depuis le début de ce cours on s'amuse à entourer nos textes avec des balises qui ne servent qu'à l'ordinateur, servons-nous en aussi un petit peu voulez-vous mini_bn

Avec le CSS on va pouvoir modifier le rendu à l'affichage de ce qui se situe entre des balises.
Par exemple pour centrer un paragraphe de texte entouré de la balise <p>, on écrira dans notre fichier CSS :
Code :

p {

text-align: center;

}

Pour rayer une phrase que l'on a préalablement entouré d'un <span> :
Code :

span {

text-decoration: line-through;

}

Ou pour positionner un bloc à droite en se servant de la balise <div> :
Code :

div {

float: right;

border: 1px solid black;

width: 50%;

}

On peut tester ces codes avec le fichier XHTML suivant :
Code :

<p><span>Rayez donc cette phrase</span>, et passons à la suite...</p>

<div>Louez l'Éternel ! Heureux l'homme qui craint l'Éternel, qui trouve un grand plaisir à ses commandements. Sa postérité sera puissante sur la terre, la génération des hommes droits sera bénie.</div>



<p>Il a dans sa maison bien-être et richesse, et sa justice subsiste à jamais. La lumière se lève dans les ténèbres pour les hommes droits, pour celui qui est miséricorDieux, compatissant et juste. Heureux l'homme qui exerce la miséricorde et qui prête.</p>

Voir le résultat

Bref, pour modifier le design de ce que contient une balise à l'aide du CSS, on utilise la structure suivante :
Code :

balise { /* Ceci est un commentaire */

propriétéCSS: valeur1;

propriétéCSS: valeur2;

...

}

Le point virgule ( ; ) de la dernière propriété n'est pas obligatoire. Cela dit, je vous conseille de le mettre, cela évite bien des erreurs d'inattentions par la suite mini_bn

So far, so good! (Jusqu'ici tout va bien bn_wink

)
Seulement, en agissant ainsi, vous allez centrer toutes vos balises <p>, rayer toutes vos balises <span>, et tous vos <div> se positionneront à droite. Et ce n'est pas toujours ce que vous voulez faire. Selon les cas vous allez vouloir appliquer un design sur une seule occurrence d'une balise, sur un petit groupe de balises, ou sur toutes les balises. Et c'est pour cela que l'on va se servir des attributs class et id de l'XHTML.

Appliquer du CSS avec les attributs `class` et `id`

On peut donc se servir des attributs class et id pour appliquer un design sur une ou plusieurs balises. Il suffit de connaître la bonne syntaxe.
Si j'ai trois paragraphes et que je souhaite mettre une bordure autour de deux d'entre eux. Je vais utiliser l'attribut class.
Code :

<p class="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>

<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>

<p class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</p>

On utilisera alors le code CSS suivant :
Code :

p.entoure {

border: 1px solid black;

}

Voir le résultat

Le point (.) dans p.entoure permet donc d'appliquer un design sur toutes les balises p ayant pour class "entoure". Le nom donné à la class n'a pas d'importance, cela dit, il ne doit pas contenir d'espace, évitez les caractères accentués de préférence, et, pour la compréhension, il est bon d'utiliser un nom correspondant à l'utilisation que l'on va en faire.
On pourrait aussi ne pas préciser le p dans le fichier CSS et dans ce cas, cela fonctionnerait pour toutes les balises ayant pour class "entoure". Le même exemple modifié :
Code :

<p class="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>

<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>

<div class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</div>

Code :

.entoure {

border: 1px solid black;

}

Voir le résultat

Il est aussi possible de préciser deux class dans un seul attribut class, il suffit de les séparer par des espaces.
Code :

<p class="entoure align">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>

<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>

<div class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</div>

Code :

.entoure {

border: 1px solid black;

}

.align {

text-align: center;

}

Voir le résultat

On peut agir de la même manière en utilisant l'attribut id et en remplaçant le point (.) par un dièse (#). A noter que la valeur d'un id ne peut commencer par un chiffre.
Code :

<p id="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>

<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>

On utilisera alors le code CSS suivant :
Code :

p#entoure { /* Ou #entoure directement */

border: 1px solid black;

}

Voir le résultat

Il existe cela dit une différence notable entre class et id ! Un id est unique, deux balises d'une même page ne pourront donc pas avoir le même attribut id. Par contre, une même class peut être commune à autant de balises que l'on veut.
Par conséquent, on utilisera en général id pour séparer les grandes parties d'une page (par exemple : header, corps, menu, footer) et class pour le reste.

Résumons

Résumons les différentes manières d'appliquer du code CSS à une page Web.

Directement sur les balises :
Code :
balise { /* Ceci est un commentaire */ propriétéCSS: valeur1; propriétéCSS: valeur2; ... }
En utilisant l'attribut id :
Code :
balise#id { /* Ou #id directement */ propriétéCSS: valeur1; propriétéCSS: valeur2; ... }

L'attribut id est unique.
La valeur de l'id ne peut commencer par un chiffre et ne doit pas contenir d'espace. De manière générale, évitez les caractères accentués.
Rappelons qu'id permet aussi d'utiliser des ancres. (voir le chapitre 3)
En utilisant l'attribut class :
Code :
balise.class { /* Ou .class directement */ propriétéCSS: valeur1; propriétéCSS: valeur2; ... }

La valeur de la class ne doit pas contenir d'espace, et de manière générale, évitez les caractères accentués.
Il est possible de préciser plusieurs class pour une même balise dans le XHTML : class=\"class1 class2 class3 ...\".

Et voilà, vous venez enfin de découvrir ce qu'était le CSS. Bientôt vous n'allez plus pouvoir vous en passer mini_bn

A partir de maintenant tout va aller très vite, on va faire plusieurs chapitres en ne s'intéressant qu'au CSS et seulement après je vous apprendrai de nouvelles choses en XHTML !

Quand je dit : tout va aller très vite, je ne parlais pas de l'écriture des prochains chapitres hein bn_heureux

ça, ça reste comme avant bn_tongue

Auteur : Bnmaster
Créé le : 10/03/2009
Modifié le : 06/08/2009
Vues : 1833 fois
2 commentaires

La Bnbox !

Menu

Mon compte

Recherche

Atelier Webmaster