Travaux pratiques sur les feuilles de style
Exercices
[ 1 ] HTML Transitional vers XHTML/CSS ou HTML5/CSS
- Créer un fichier CSS minimal et l'associer à chaque page HTML déjà créée.
-
Reprendre le contenu de chacune de ces pages
pour faire disparaître tout élément de mise en forme
et associer un style à chaque élément sémantique.
En particulier, il est demandé d'utiliser les propriétés CSS relatives aux couleurs de texte et de fond, aux styles de bordures, aux marges internes et externes, aux polices et à leurs tailles, etc. -
Modifier le DOCTYPE de vos pages pour un DOCTYPE
XHTML (respect des règles XML)
strict (interdiction des balises de mise en forme) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">ou pour le DOCTYPE html5 :<!DOCTYPE html>
- Valider la feuille CSS auprès du W3C.
- Valider chaque page HTML auprès du W3C.
- Reprendre un document HTML5 utilisant les nouvelles balises sémantiques et proposer une feuille de style les mettant en forme. Tester et valider.
[ 2 ] CSS pour le XML
Reprendre un fichier XML (mais non HTML) existant (par exemple ici) et lui associer une feuille de style dédiée au format XML utilisé. En XML, l'instruction permettant de lier le document à une feuille de style a la forme suivante :
<?xml-stylesheet type="text/css" href="style.css" ?>
Nous nous obligerons à utiliser au moins un sélecteur d'attribut.
[ 3 ] Menus en CSS
- Produire un menu horizontal qui propose plusieurs items placés l'un à côté de l'autre, chacun renvoyant à une page différente.
- Reprendre les mêmes items pour produire un menu vertical : celui devra être contenu dans une boite restant fixe à gauche de la page, le contenu défilant à sa droite.
Dans chaque cas, nous aurons le souci de bien organiser le code html pour optimiser le référencement et l'accessibilité de nos pages : idéalement le texte pertinent devrait être en début de code html, le code des menus venant ensuite.
[ 4 ] CSS, media et media queries
- Aux pages HTML précédentes, ajouter une nouvelle feuille de style dédiée à l'impression : utilisation minimale des couleurs, recherche d'une impression compacte réduite au seul contenu pertinent, suppression des éléments de navigation, etc. Vérifier l'aperçu avant impression.
- Ajouter le code css nécessaire pour obtenir un visuel différent quand la taille du navigateur est réduite, par exemple en modifiant les couleurs de fond et d'écriture. Tester en redimensionnant le navigateur.
- Proposer, à l'aide du langage CSS, un mode clair et un mode sombre pour vos documents web.
- Utiliser les media queries et le principe du mobile first pour proposer une page adaptative, en particulier les éléments de navigation devront se comporter différemment selon l'écran de l'utilisateur.
[ 5 ] Technique des sprites
Utiliser la technique des sprites pour n'afficher qu'un unique icône de l'image ci-contre, l'appareil photo rouge par exemple.
Démonstrations
Premier exemple
Comme premier exemple, considérons ce code HTML.
Sans autre précision, nous obtenons ceci.
Mais, en l'associant à cette feuille de style, nous produisons ce résultat.
Application à un curriculum vitæ
Comme point de départ, observons cette page de CV et son code HTML. Ce code, produit par Dreamweaver, est tout simplement illisible (imbrication de plusieurs tableaux sans raison claire, changement de couleurs et de polices fréquent) et n'encourage donc pas à le modifier directement. Notons également le poids de ce fichier : 13.7 ko.
Nous commençons par nettoyer ce code, pour obtenir un code HTML lisible (remarquons en particulier, la disparition des tableaux et de la balise FONT, et l'utilisation de commentaires HTML). Ce code nettoyé produit ce document. Cette page ne pèse plus que 3.3 ko, soit un rapport de 1 pour 4 entre le poids du fichier nettoyé et le poids du fichier Dreamweaver.
L'étape suivante est naturellement d'y associer une feuille de style, celle-ci donnant une apparence comparable à celle du document dont nous sommes partis.
Mais, sans pour autant modifier le contenu du CV lui-même, nous pouvons tout aussi bien donner une autre apparence en utilisant une seconde feuille de style.
Styles associés à ce site
Nous pouvons également regarder les feuilles de style de ce site :
- la première définit les différentes couleurs et ornements des titres de section ;
- la seconde produit un affichage plus sobre destiné à l'impression des documents.
Une modification de ces feuilles provoque des changements sur toutes les pages du site.
À vous de jouer
Pour terminer, vous pouvez jouer avec des générateurs automatiques de feuilles de style et récupérons les différents styles pour les inclure dans nos propres pages. Par exemple, le générateur de Mammouthland.
Vous pouvez également évaluer les navigateurs disponibles vis-à-vis des recommandations CSS du W3C (voir les Acid Tests par exemple).
