Présentation du CSS




  1. Que sont les styles et à quoi ça sert ?



  1. 1. Présentation

Les feuilles de styles permettent aux concepteurs de pages web de regrouper les options de présentations de textes, et même d'allez beaucoup plus loin qu'avec le HTML standard.
Vous pouvez par exemple ajouter une bordure à du texte, définir la taille, préciser le soulignement des liens, modifier l'aspect des titres (H1, H2...)...
L'un des autres intérêts majeurs est de pouvoir regrouper toutes les options dans un fichier ou dans l'en-tête du fichier HTML, et ainsi changer, par exemple, toutes les couleurs des liens en une seule manipulation...
Le principe est le même que pour les "styles" dans un traitement de texte (Claris, Word,...)

Définition
  • Style : caractéristiques du texte affiché, par exemple "Gras", "Italique", "Souligné", Sur fond bleu, ...
  • Feuille de style : code qui regroupe des définitions de styles


  1. 2. Principe

Il y a 3 types de définition de style :
  • les feuilles de styles internes
  • les feuilles de styles externes
  • les définitions de styles en balises

Dans les trois cas, la syntaxe est du même principe. La différence se trouve dans la portée de la définition des styles.
Une feuille de styles interne n'est utilisable que dans le fichier en cours
Une feuille de styles externe est utilisable dans plusieurs fichiers à la fois
Les définitions de styles en balises ne sont utilisable que sur la balise en cours

Chaque système a donc son principe et par conséquent ses intérêts. La feuille de styles externe permet de définir des styles qui seront utilisés par plusieurs documents, il est donc très simple de mettre à jour tout un site (par exemple passer tous les liens en vert au lien de bleu).

  2. Exemples des 3 types



  2. 1. Exemple de définition et d'utilisation de styles en balises

Pour pouvoir utiliser la définition des styles dans une balise, il suffit d'utiliser la propriété "Style" de la balise.
La majorité des balises proposent cette propriété (font, a, span, td...).
CodeRésultat
<a href="exemples.php" style="color:red;font-weight:bold">Lien</a> Lien
<div style="font-style:italic;border-style:solid;border-top-width:20px"> Trait au dessus du texte, et juste pour la première ligne</div>
Trait au dessus du texte, et juste pour la première ligne


  2. 2. Exemple de définition et d'utilisation de feuilles de style interne

Contrairement à la définition en balises, la définition et l'utilisation se font ici en 2 étapes. On doit d'abord définir la feuille de style dans le fichier HTML en utilisant la balise <style> en début de fichier (par coutume plus que pour des raisons techniques). Il existe 2 types de définition : les définitions globales (utilisées pour toutes les balises identiques) et les définitions par nom (utilisables seulement si c'est précisé...). Il est alors nécessaire de définir un nom pour la définition des styles. Les noms de ces styles ne doivent contenir que des caractères alphanumériques (a, b, C, 4...).
CodeRésultat
<HTML>
<HEAD>
<Style>
a {color:red} /* sera utilisé par toutes les balises <a> */
.mien {color:green} /* sera utilisé seulement si c'est précisé */
</Style>
</HEAD>
<BODY>
<a href="exemples.php">Lien standard</a><br>
<a href="exemples.php" class="mien">Lien vert</a>
</BODY>
</HTML>
Lien standard
Lien vert
Une petite explication est nécessaire : pourquoi y a-t-il un "." dans un cas et pas dans l'autre ?
Le "a" n'a pas de point car il s'agit de la balise HTML "<a>", et par conséquent, elle est directement reconnue par les navigateurs. Le "mien" a un point, car il s'agit de la définition d'une "classe" et n'est pas associé à une balise précise. On peut ainsi définir une balise dont les propriétés seraient "Gras" et "Rouge", et l'appliquer aussi bien à un lien ("<a>") qu'à un bloc de texte ("<span>") ou encore un paragraphe ("<p>").


  2. 3. Exemple de définition et d'utilisation de feuilles de style externe

De même que pour la définition de feuilles de style interne, on doit découper le travail en 2 étapes. La première étape concerne la définition des feuilles de styles, la deuxième, son utilisation.
Il est d'abord nécessaire de créer un fichier qui portera, dans notre exemple, le nom "styles.css". L'extension css permet de stipuler que le fichier contient une définition du style, le nom "styles" peut quand a lui être modifié comme tout nom de fichier.
Ensuite, il faut préciser l'appel au fichier "styles.css" dans le document HTML pour pouvoir utiliser les styles définis dans la feuille de style.
CodeRésultat
/* Tout d'abord la création du fichier de style */
/* Enregistrer ce texte dans un fichier appelé "styles.css" */
a {color:red} /* sera utilisée par toutes les balises <a> */
.mien {color:green} /* sera utilisé seulement si c'est précisé */

/* Créer un fichier appelé "style.html" contenant le code suivant */
<HTML>
<HEAD>
<link rel="STYLESHEET" type="text/css" href="styles.css">
</HEAD>
<BODY>
<a href="exemples.php">Lien standard</a><br>
<a href="exemples.php" class="mien">Lien vert</a>
</BODY>
</HTML>
/* Afficher le fichier "style.html", vous obtiendrez : */

Lien standard
Lien vert

Actuellement, vous vous dites peut-être que cette dernière solution est nettement moins pratique... Maintenant, imaginez que vous ayez 200 fichiers avec la définition de balises "mien", puis que vous décidiez de changer le vert en bleu !!! Vous faites cela en UNE manipulation, alors que sinon, il vous faut le faire 200 fois !!!.
Tous les fichiers qui utilisent le fichier "styles.css" doivent contenir la ligne
"<link rel="STYLESHEET" type="text/css" href="styles.css">".
Cette ligne définie l'utilisation de la feuille de style.
Comme partout, le "href" défini le chemin d'accès à la feuille de styles, et donc on peut aussi bien mettre un chemin relatif qu'une URL...
Cette ligne doit être mise en entête du document, dans la partie "<HEAD>" de la page.




Page modifiée le : 24/07/2003
Site modifié le : 16/05/2016


Valid XHTML 1.0 Transitional