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
1. 2. Principe
Il y a 3 types de définition de style :
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...).
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...).
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.
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 : 01/10/2024
|
