L'exercice
L'objet de cet exercice est de se familiariser avec la notion de feuille de styles de type CSS, et la syntaxe utilisée.Pour cela nous allons créer le fichier de règles CSS permettant de présenter ce fichier html sous cette forme contestable.
Les feuilles de styles, une syntaxe qui s'appuie sur l'arborescence html
- Préalable : Installer sur votre navigateur les outils développeur Web (par exemple pour firefox), ils permettent de valider vos documents css & html et offrent des outils de débuggage et de visualisation.
- Copier le fichier source html dans votre espace de fichiers.
- Ajouter une feuille de styles
- Dessiner l'arborescence html.
- Créer le fichier feuille de styles.
- Comment indiquer au navigateur les règles de styles à utiliser ?
- Lier vos fichiers css & html.
Des règles de styles pour construire la présentation
Suivre les consignes suivantes pour écrire la feuille de styles du fichier html. Vous pouvez vous appuyer sur les différentes pages du w3c et sur ce résumé.
Héritage
Le fond d'écran possède la couleur #666666 et la couleur du texte est #80C0C0.
Pseudo-classes
Les liens possèdent les caractéristiques suivantes: couleur d'un lien (#FF8080), couleur d'un lien visité (#F70), couleur d'un lien actif (#A05050).
Une seule exception, le lien de la ligne du copyleft qui possède un fond vert.
Pseudo-éléments
La première ligne de tous les paragraphes est en rouge, sauf celui qui commence par: "Un Exemple absolument fabuleux..."
Celui-ci possède deux particularités (à identifier) dont les attributs sont les suivants:
Pour la première: :
Sélecteur contextuel
Un élément dans une double liste possède les caractéristiques suivantes:
Classes et héritage
Seuls les titres de la classe de Les supers tops.... auront les caractéristiques suivantes:
On utilisera un raccourci pour spécifier les propriétés des éléments suivants: h1, h2, div.class5, blockquote. Les propriétés sont:
Le numéro ISBN possède une couleur rouge et une taille de 24pt.
Cascade et héritage
On désire garantir que les propriétés d'un titre de niveau 6 seront:
Le fond d'écran possède la couleur #666666 et la couleur du texte est #80C0C0.
Par défaut, tous les éléments hérités (les enfants) posséderont ces couleurs.
Pseudo-classes
Les liens possèdent les caractéristiques suivantes: couleur d'un lien (#FF8080), couleur d'un lien visité (#F70), couleur d'un lien actif (#A05050).
Une seule exception, le lien de la ligne du copyleft qui possède un fond vert.
Pseudo-éléments
La première ligne de tous les paragraphes est en rouge, sauf celui qui commence par: "Un Exemple absolument fabuleux..."
Celui-ci possède deux particularités (à identifier) dont les attributs sont les suivants:
Pour la première: :
- style: gras
- couleur: aqua
- taille de la police: x-large
- couleur: #FFFFFF
Sélecteur contextuel
Un élément dans une double liste possède les caractéristiques suivantes:
- taille de la police: x-large
- style: italique
Classes et héritage
Seuls les titres de la classe de Les supers tops.... auront les caractéristiques suivantes:
- couleur du texte: vert
- hauteur de ligne: 50px
- taille de la police: 32px
- police: courier, taille de police: 36 pt, hauteur de la ligne: 40pt (voir règle font)
- variante: small-caps
- police: verdana, ou à défaut, sans-serif
- couleur du texte: 100% de rouge, 100%de vert, et 0% de bleu
On notera la surcharge en ce qui concerne la couleur du texte par rapport à BODY, et le raccourci permettant de sélectionner le même style pour plusieurs classes différentes.
On utilisera un raccourci pour spécifier les propriétés des éléments suivants: h1, h2, div.class5, blockquote. Les propriétés sont:
- couleur du fond: #000080
- police: arial, taille de police :12pt
- fond: blanc, image (logo), répétition en x, position fixe en haut et à
droite
Le numéro ISBN possède une couleur rouge et une taille de 24pt.
Cascade et héritage
On désire garantir que les propriétés d'un titre de niveau 6 seront:
- couleur: rouge
- taille de la police: xx-small
Attention aux règles non utilisées, elles sont consomatrices au niveau du chargement et de l'interprétation de la feuille de styles.
Valider le document
A l'aide des outils de validation proposés par le W3C,
- Valider et corriger si nécessaire votre feuille de styles
- Valider et corriger si nécessaire votre page html
Résultat