21-08-2008 : 21h32 min - Disconnected
Last modification : 12 August 2007
Vous pouvez poser
vos questions dans les forums.
A voir aussi :
Le XHTML est un langage dérivé du HTML duquel on a retiré toutes les balises spécifiques à la présentation de la page. Cette présentation est faite grâce aux feuilles de style (ou CSS pour Cascading Style Sheet). Ce sont des fichiers la plupart du temps externes à la page XHTML.
Un style peut être :
Les feuilles de styles permettent de s'économiser du travail, d'alléger et de rendre le code source plus lisible, d'améliorer l'esthétique des pages avec des éléments non utilisables directement en html, de donner la même apparence à toutes les pages, de modifier toutes les pages en une fois, ... et j'en oublis sûrement !
Les dernières versions du composeur de Mozilla et de Nvu intègrent un éditeur de feuilles de styles. Je vous ai aussi développé un générateur de feuille de styles css en ligne. C'est par là :
La mise en forme du texte qui compose ce paragraphe est faite d'après un style. Ce style se nomme "text" (c'est un nom qu'on invente, chacun met ce qu'il veut) et spécifie qu'un paragraphe de style "text" sera écrit en Arial avec une police de taille 1 em, de couleur noire et que la hauteur de ligne sera de 1,5 em.
Deux avantages à ce style :
On peut modifier le comportement de n'importe quelle balise HTML. Par exemple pour ce site j'ai modifié la balise <body> (celle qui ouvre le corps du texte de la page). J'ai donné une couleur de fond de page à la balise <body>, ainsi je n'ai plus à m'en préocupper. Toute nouvelle page aura automatiquemment la couleur spécifiée.
On peut aussi modifier l'apparence des liens. Si vous ne voulez pas du classique texte bleu souligné, vous pouvez mettre ce que vous voulez à la place. Sur ce site les liens sont bleus, mais pas soulignés. Il n'est pas conseillé de mettre quelque chose de trop farfelu car les internautes ont l'habitude que les liens soient bleus et soulignés.
Les balises qui permettent de modifier cela sont :
a:link :le lien avant qu'il soit cliqué
a:hover : lorsque la souris est au dessus du lien
a:active : lorsqu'on clique sur le lien
a:visited : repère les liens qu'on a déjà visité.
Il suffirait d'un éditeur de texte pour créer un style, mais le but de ce cours n'est pas de voir la syntaxe des styles css. Certains éditeurs vous permettent très simplement de gérer les styles (C'est le cas de Nvu, Dreamweaver, ...). Si vous n'en disposez pas, utilisez le générateur de style css de ce site. Il vous donnera le code source du style et vous n'aurez à faire qu'un copier/coller.
Vous pouvez créer trois types de styles :
Le style personnalisé permet de spécifier les caractéristiques de votre texte. Par exemple les caractéristiques du texte de ce paragraphe sont dans un style qui indique la police, l'alignement, la taille et la couleur du texte. Ainsi tous les paragraphes sont identiques sans avoir à les redéfinir à chaque fois.
Le deuxième type permet de modifier une balise html. Par exemple si vous voulez que tous les tableaux de votre site aient une bordure de deux pixels et un fond bleu, vous pouvez modifier la balise "<TABLE>" en conséquence.
Le troisième type de style ressemble au deuxième. Il permet de modifier une balise HTML mais à l'aide d'un attribut CLASS. Cela permet par exemple de ne modifier que certains tableaux. Lorsque vous voulez qu'un tableau ait l'apparence cité ci-dessus vous lui appliquez le style avec un attribut CLASS. De façon très similaire on peut aussi utiliser l'attribut "id". Il fonctionne sur le même principe que "class", sauf que "id" n'est utilisé que pour des styles uniques (c'est à dire utilisé une seule fois dans la page). On peut ainsi faire référence à ces styles avec des langages comme le Javascript. Voir plus bas pour savoir comment utiliser ces types de style.
Dans le cas des styles personnalisés vous pouvez l'appeler comme vous voulez, à condition de ne pas mettre d'accents, d'espaces et de signes de ponctuation. Vous pouvez utiliser le tiret haut (-) mais pas le tiret bas (_). Le nom doit obligatoirement commencer par un point. Si vous utilisez le générateur css de ce site ne mettez pas le point, le générateur s'en charge.
Pour modifier les balises HTML, le nom du style doit être le nom de la balise.
Pour modifier une balise HTML avec l'attribut CLASS il faut donner le nom de la balise suivi d'un point puis d'un nom personnalisé. Par exemple pour modifier la balise <TABLE> (tableau), on peut donner le nom : table.toto
Une fois le style créé il faut y faire référence dans vos pages. Il y a deux méthodes :
C'est la deuxième méthode qui est la plus intéressante, elle évite d'avoir à recopier les styles à chaque fois dans les pages. C'est cette méthode que nous allons étudier maintenant.
Imaginons que la feuille de styles soit créée et nommée style.css. Pour faire référence à cette feuille de styles dans une page avec Nvu il faut rajouter le code source suivant (entre les balises <head> et </head>):
<link href="style.css" rel="stylesheet" type="text/css" />
En guise d'exemple vous pouvez voir la feuille de style utilisée pour ce site : style.css. Au moment de la rédaction de cette page elle comportait 16 styles pour définir l'allure des titres, des paragraphes, la position des blocs, l'aspect des liens hypertextes.
Un des styles se nomme "text". Regardez le code, très simple, qui le compose (en cliquant sur le lien ci-dessus). Pour appliquer ce style à ce paragraphe on utilise l'attribut "class".
Sans style le code serait :
<p><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">Texte du paragraphe</font></p>
Avec un style on n'a pas besoin de spécifier tous ces paramètres, puisqu'ils sont définis dans la feuille de styles. On obtient :
<p class="text">Texte du paragraphe</p>
Il suffit donc de rajouter class="nom_du_style" à la balise qu'on veut modifier. Ici la balise de paragraphe <p>. Mais on aurait pu attribuer ce style à n'importe quelle balise. Par exemple
<table class="text">contenu du tableau</table>
modifie la police dans tout le tableau.
Dans Nvu, on peut aussi ajouter l'attribut "class" sans passer par le code source. Cela fonctionne avec les objets dont on peut afficher les propriétés (tableau, lien, image ...). Prenons l'exemple du tableau. Cliquez sur un tableau, puis sur l'icône "tableau" pour afficher les propriétés. Cliquez ensuite sur "Edition avancée". Sélectionnez "class" dans le menu déroulant du champ "Nom" et complétez le champ "valeur" par le nom du style que vous voulez utiliser.
On peut modifier ainsi toutes les balises. Voir le paragraphe "Montrer les balises HTML" plus bas.
Si vous utilisez les styles pour modifier une balise HTML il est inutile de rajouter quoi que ce soit dans le code. Si je modifie la balise <body> celle-ci sera modifiée dès que la feuille de styles sera rattachée à la page. Il n'y a pas d'attribut "class" à rajouter.
La procédure est à peu près la même que pour les styles personnalisés. La différence vient du nom du style. Si vous voulez modifier certains tableaux pour qu'ils aient un fond bleu vous pouvez créer un style pour cela. On ne va pas modifier la balise <table> car dans ce cas tous les tableaux auraient un fond bleu. On crée une sorte de "sous-balise" avec un style dont le nom sera balise.toto.
Par exemple pour le tableau cité dans le paragraphe ci-dessus le nom du style pourrait être : table.fondbleu
Par contre pour appliquer le style à un tableau on ne fera appel qu'à la deuxième partie du nom :
<table class="fondbleu"> Contenu du tableau </table>
Parfois on applique un style à un élément de la page, mais cela ne semble pas faire effet. Cela vient du fait que les attributs écrits dans le code source sont prioritaires par rapport aux styles.
Prenons l'exemple du style table.fondbleu cité ci-dessus. Il donne un fond bleu au tableau.
<table bgcolor="#FF9999" class="fondbleu"> Contenu du tableau </table>
Ce code ne donnera pas le résultat obtenu car l'attribut bgcolor est prioritaire sur le style. La couleur sera rose (#FF9999). Il faut supprimer cet attribut pour que le style fonctionne.
<table class="fondbleu"> Contenu du tableau </table> donnera l'affichage souhaité.
Résumons :
1) Créer plusieurs styles avec le générateur css et les coller dans une feuille de style (style.css)
2) Attacher la feuille de style à la page en rajoutant le code source :
<link href="style.css" rel="stylesheet" type="text/css">
3) Appliquer les styles aux balises en rajoutant l'attribut class="nom_du_style"
<p class="text">Texte du paragraphe</p>
Nvu intègre un éditeur de feuille de style. C'est dans le menu "outils, éditeur CSS". En voici une capture d'écran (version 0.5 de Nvu), après avoir cliqué sur le bouton "Lier feuille" :
Complétez cet écran en donnant un nom à la feuille de style dans le champ URL. Cette feuille de style peut déjà exister, auquel cas vous pouvez utiliser le bouton "parcourir" pour la récupérer. Mais cela peut aussi être une nouvelle feuille de styles que l'on veut rattacher à la page en cours. Pensez à enregistrer votre page web avant de rattacher la feuille de style. Cliquez ensuite sur "Créer la feuille de style" et celle-ci apparaît à gauche de l'éditeur css.
Ensuite nous allons créer un style dans cette feuille. Voici une capture d'écran :
Si le bouton "règle" est grisé, sélectionnez la feuille de style créée, puis cliquez sur "Recharger".
Dans l'écran ci-dessus, nous créons un style appelé "important". Il servira à mettre en forme un texte qui doit être mis en valeur. Par exemple en écrivant en rouge et en encadrant le texte. Après avoir mis le nom du style, cliquez sur "créer la règle de style" et éventuellement sur "recharger" pour que la règle de style apparaissent à gauche de l'éditeur.
Les onglets "texte", "fond", "bordure", ... deviennent alors actifs et vous pouvez paramétrer les différents éléments de votre règle de style.
Pour finir il reste à appliquer ce style à un élément de votre page. Ecrivez un texte important et donnez lui le style paragraphe (menu déroulant en haut à gauche), du genre "quel temps fera t-il demain :-)". Utilisez ensuite le menu déroulant juste en dessous du précédent, commençant par "pas de class". Vous y trouverez tous les styles personnalisés créés et rattachés à la page. Le style personnalisé s'appliquera à l'ensemble du paragraphe. Mais vous pouvez aussi appliquer un style à un mot en sélectionnant ce mot.
Exercice :
Créer une feuille de styles contenant 3 styles :
Créer une page qui utilise ces trois styles.
Correction : voici une page qui correspond à l'exercice.
On a découvert cet affichage au chapitre précédent. Il peut être utile pour les styles puisqu'il permet d'ajouter simplement l'attribut "class".
Dans l'affichage "Balises HTML", double-cliquez sur une balise, par exemple <p> (pour les paragraphes). On obtient la fenêtre suivante :
Il faut parfois cliquer sur "Edition avancée" avant d'atteindre cet écran. Cela dépend des balises. Complétez comme sur l'image ci-dessus pour affecter le style "text" au paragraphe sélectionné.
Voici encore quelques trucs et astuces avant de vous donner des liens qui vous expliqueront les feuilles de styles en détails :
Le flux d'une page est l'ordre d'affichage de la page. Les différentes balises sont affichées dans l'ordre où elles sont écrites dans le code source. Mais certaines règles CSS sortent les blocs du flux pour les placer n'importe où dans la page (float, position absolute, ...)
Dans le même ordre d'idée, une balise avec l'attribut "float" est sorti du flux. Sa taille n'est donc pas prise en compte dans le calcul de la hauteur de son parent.
Pour se placer, un bloc absolu ou fixé (donc un positionnement donné dans la page, hors flux) se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre.
Les éléments de type bloc se finissent par un passage à la ligne (paragraphe, liste à puces, ...)
Les éléments de type en-ligne (inline) s'affichent l'un derrière l'autre (les liens, les spans, ...)
On peut imbriquer les styles dans une feuille de style. Par exemple :
p em { contenu du style}
Ce style modifie les balises "em" du code source qui se trouve dans une balise "p".
Cette page n'est qu'une introduction aux feuilles de styles. Si vous souhaitez plus de détails, mes bibles sont OpenWeb, Alsacréations et pompage.net.
1) Créer un bloc de texte avec un fond vert, contenant un bloc jaune dans le coin supérieur droit.
2) Modifier les liens hypertextes pour qu'ils soient soulignés en-dessous et au-dessus du texte.
3) a) Créer un texte sur trois colonnes de tailles identiques et qui se redimensionne en fonction de la taille du navigateur.
b) Ajouter une bordure en pointillé gris aux colonnes ci-dessus.
4) Ecrire un texte dont certains mots sont surlignés.
Cours suivant : Insérer un formulaire