Approfondissement CSS

Mise en page, images, et sélecteurs avancés

Licence Informatique, semestre 6

Alexandre Niveau — Valentin Lemière

Enseignement des technologies du Web

 

Approfondissement CSS

Mise en page, images, et sélecteurs avancés

Notes de cours

  • Modèle de boîte CSS3
    • Visual formatting model de HTML/CSS
    • Propriétés de base des boîtes
    • Quelques propriétés CSS3
    • Alignement de contenu
  • Mise en page avec CSS
    • Propriété display
    • Flottants, clearer
    • Présentation en zones
    • Positionnement absolu et relatif
  • Images HTML
    • Formats d’image pour le web
    • L’élément img et ses attributs
    • Images mappées
  • Images de fond en CSS
    • Backgrounds en CSS
    • Propriétés de base des images de fond
    • Images de fond et CSS3
    • Remplacement d’images
    • Sprites
  • Sélecteurs CSS avancés
    • Sélecteurs de descendance et d’adjacence
    • Utiliser divers sélecteurs ensemble
    • Pseudo-classes
    • Pseudo-éléments

Travail personnel

Objectifs

  • Continuer à s'exercer à manipuler du HTML et du CSS et prendre de bonnes habitudes
  • Pratiquer la mise en page avec CSS
  • Comprendre les sélecteurs avancés
  • Apprendre à reproduire des modèles

Exercice 1 — Présentation en colonnes

Un corrigé de cet exercice est disponible (lien vers le CSS (commenté) ; archive).

Récupérer cette archive et la décompresser à un endroit approprié. Elle contient une petite feuille de style screen.css et deux fichiers HTML très similaires, question-1.html et question-2.html, qui représentent tous les deux la même page avec une bannière, un pied de page, une partie principale, un menu de navigation et un encadré d'information.

  1. Compléter la feuille de style pour que la page question-1.html respecte le modèle suivant, en utilisant des flottants. Attention, vous ne devez pas modifier le HTML, tout doit être fait dans la feuille de style ! Astuce : si vous ne comprenez pas ce qui se passe, n'oubliez pas l'inspecteur, qui peut notamment vous donner la taille en pixels de vos éléments.
    Modèle à réaliser
  2. On veut maintenant ajouter un gros cadre autour des trois colonnes centrales, comme sur le modèle suivant. On va utiliser la page question-2.html : la seule différence par rapport à la précédente est qu'il y a un bloc de classe wrapper autour des trois éléments. Modifier la feuille de style (pas le HTML !) pour obtenir le résultat voulu sur question-2.html. L'apparence de l'autre page (question-1.html) ne doit pas changer.
    Second modèle à réaliser

Exercice 2 (optionnel) — CSS Diner

Cet exercice est optionnel. Si vous avez l'impression qu'il vous embrouille plus qu'il ne vous aide, passez à la suite.

Essayer le jeu CSS Diner, qui vise à apprendre les sélecteurs CSS, des plus basiques au plus complexes. Chaque niveau est une sorte de leçon sur un sélecteur particulier (les informations sont données dans l'encadré de droite), l'objectif étant d'arriver à sélectionner les bons objets en entrant un sélecteur CSS. Attention : vos sélecteurs ne doivent pas mentionner la table, ça ne fonctionnera pas (c'est un bug). Par exemple, la solution du premier niveau est le sélecteur plate, le sélecteur .table plate ne marchera pas.

Avec ce qui a été vu en cours, vous pouvez aller jusqu'au niveau 15. Passez ensuite en priorité à l'exercice suivant, surtout si vous êtes débutant·e. À noter que, malheureusement, à partir du niveau 19 les exercices ne sont pas toujours très pertinents, mais ça reste intéressant.

Bonne chance !

Exercice 3 — Application des sélecteurs avancés

Un corrigé de cet exercice est disponible (lien vers le CSS commenté ; archive).

Récupérer cette page HTML (archive) et l'utiliser pour tester les différents sélecteurs avancés en répondant aux questions suivantes, sans changer le code HTML.

  1. Pour commencer, réduire la largeur du body, par exemple à 40 em, ce qui permet d'avoir des lignes d'environ 80 caractères quelle que soit la taille de la police.
  2. Mettre en valeur la première lettre de chaque paragraphe, soit en modifiant sa taille ou sa couleur, soit en en faisant une lettrine (drop cap).
    1. Mettre en italique la première ligne de chaque paragraphe.
    2. Modifier votre règle pour que seule la première ligne du premier paragraphe de chaque partie soit en italique.
  3. Faire en sorte que l'alignement des titres soit alterné, une fois à gauche, une fois à droite. Les paragraphes doivent rester en place.
  4. À cause de la question précédente, la séparation entre les parties n'est pas évidente : ajouter une bordure autour (ou au-dessous) de chaque titre pour bien séparer les parties.
  5. Le dernier paragraphe contient uniquement une formule consacrée.
    1. Le mettre en valeur comme vous le voulez (centré, gras…).
    2. Est-ce que la méthode que vous avez employée vous semble correcte (c'est-à-dire propre, robuste, sémantique…) ? Si vous aviez le droit de modifier le HTML, auriez-vous choisi la même solution ?
  6. Ajouter le caractère de décoration suivant : « ❦ » au début et à la fin de chaque titre de partie. (NB : vous pouvez le copier tel quel dans le CSS, c'est un caractère comme un autre.)
  7. Mettre ce caractère de décoration en rouge.
  8. Faire en sorte qu'au survol d'un paragraphe, ce paragraphe change de couleur de fond.
  9. Même question, mais cette fois le paragraphe survolé et le paragraphe suivant (dans la même partie) doivent changer de couleur de fond.
  10. En n'utilisant qu'une seule règle CSS, faire en sorte que tous les titres apparaissent en petites capitales, sauf lorsqu'ils sont survolés.
  11. Faire en sorte qu'au survol d'un titre, les paragraphes de cette partie changent de couleurs de texte et de fond, mais pas les autres. Attention, la solution est simple, mais pas évidente à trouver ; ne pas hésiter à demander de l'aide. (Indice : ce n'est pas faisable avec une seule règle.)

Exercice 4 — Site des recettes

Un corrigé de cet exercice est disponible (archive du code commenté)

Télécharger et extraire l'archive contenant l'« architecture » du site, reproduite ci-dessous :

./
|-- img/
|   |-- dindePanee.jpg
|   `-- logoSite.png
|-- index.html
`-- skin/
    |-- img/
    |   |-- boissons_hover.png
    |   |-- boissons.png
    |   |-- desserts_hover.png
    |   |-- desserts.png
    |   |-- entrees_hover.png
    |   |-- entrees.png
    |   |-- iconeCommentaires.png
    |   |-- iconePrix.png
    |   |-- iconeTemps.png
    |   |-- logoCC-by-nc-sa.png
    |   |-- logoFirefox.png
    |   |-- logoUbuntu.png
    |   |-- logoW3C.png
    |   |-- plats_hover.png
    |   `-- plats.png
    `-- screen.css

Les fichiers index.html et screen.css sont vides. Il va falloir les compléter, sans changer l'organisation des fichiers.

Pour commencer, examiner la hiérarchie des répertoires ; pourquoi y a-t-il deux répertoires « img » ? À quoi servent chacun d'eux ?

  1. Ajouter du contenu à la page HTML. Elle contiendra pour l'instant
    • la bannière du site, avec son titre (par exemple « Recettes à manger »)
    • un article intitulé « Escalopes de dinde panées » avec du « faux-texte » lorem ipsum (ou une variante)
    • un menu avec des liens vers « Entrées », « Plats », « Desserts » et « Boissons »
    • un pied de page contenant deux sections ; la première, « Notice légale », indique « Code HTML et CSS en licence CC-by-nc-sa », tandis que la seconde, « Partenaires », liste le W3C, Firefox et Ubuntu.
    Vous devriez obtenir quelque chose qui ressemble à la figure suivante.
    Modèle de HTML
  2. On va ajouter deux images dans le HTML : le logo du site et l'illustration de la recette. Le résultat pourra ressembler à la figure suivante.
    Modèle de HTML
  3. À présent, on commence à compléter le fichier screen.css, après l'avoir lié depuis la page HTML. On va tout d'abord placer les gros blocs dans la page.
    • Faire en sorte que le logo apparaisse à gauche du titre du site dans la bannière.
    • Le menu doit faire 400 pixels de largeur et apparaître à gauche de l'article.
    • Réduire la largeur de l'ensemble de la page, pour que le texte de l'article ne s'étale pas trop en largeur.
    • Les deux sections du pied de page doivent apparaître côte à côte.
    On devrait obtenir quelque chose de similaire à la figure suivante.
    Modèle avec HTML et organisation des zones
  4. Modifier le CSS pour que la page ressemble au modèle suivant. On a amélioré l'affichage du titre, décalé le menu, encadré l'article, et modifié le pied de page.
    Modèle avec quelques améliorations
  5. Ajouter les logos de la licence et des partenaires depuis le CSS pour que le pied de page ressemble au modèle suivant.
    Modèle de pied de page
  6. Modifier le CSS de l'article et de son contenu pour obtenir le rendu suivant. NB : on a ajouté des coins arrondis et une ombre au cadre. NB2 : penser à aller voir les différents types de bordure avant de se compliquer la vie.
    Modèle de pied de page
  7. Copier le code suivant dans l'article, entre le titre et le contenu, sans le modifier :
    		<aside class="infos">
    			<div class="icone prix">Chère</div>
    			<div class="icone temps">Rapide</div>
    			<div class="icone commentaires">34 commentaires</div>
    		</aside>
    
    Modifier le CSS pour que l'article ressemble au modèle suivant.
    Modèle de pied de page
  8. Pour finir, utiliser une des techniques de remplacement d'image (voir ces notes de cours) pour remplacer les textes du menu par les images fournies, de manière à obtenir le modèle suivant. On fera en sorte que l'image change au survol des items du menu. Note : les images du menu ont été bricolées à partir de la police Kitchen Kapers II.

Exercice 5 — Reproduction d’un modèle simple

Un corrigé de cet exercice est disponible (lien vers le CSS (commenté) ; archive).

Cet exercice consiste à reproduire l'apparence d'une version (très) simplifiée de la page d'accueil d'un site de vente de céramiques. Reproduire un site web existant est une des manières les plus efficaces de progresser.

Modèle de la page à reproduire

On vous fournit le HTML, les images, et une feuille de style (presque) vide dans cette archive. À vous de la compléter pour obtenir un rendu le plus proche possible du modèle, sans modifier le HTML !

Il est recommandé (en tout cas aux débutant·es) d'utiliser des flottants pour la mise en page, et d'utiliser overflow:auto pour qu'un parent « contienne » ses fils flottants.

Les tailles (hauteurs, textes) n'ont pas d'importance, faites au mieux. Les trois fonds gris en haut à droite sont #F9F9F9, #F4F4F4, et #EDEDED. Les couleurs de fond des blocs sont #DBEAD8 (vert), #C2D4D8 (bleu), et #B0ABC3 (violet).

Note : il n'est pas interdit d'aller voir le CSS du site original, mais ça ne devrait pas vraiment vous aider (plutôt l'inverse).

Exercice 6 (optionnel) — Reproduction d’un modèle moins simple

On vous donne une image d'une page web, version très simplifiée d'une page du site du fabricant d'instruments de musique Fender.

Capture d'écran de la page Fender Stratocaster
Capture d'écran de la page à reproduire

On vous demande de créer le code HTML et CSS permettant de reproduire ce modèle, en portant une attention particulière à la catégorisation des images : quelles sont celles qui font partie du contenu (et vont donc dans le HTML) celles qui sont purement présentationnelles (et vont donc dans le CSS), et celles pour qui c'est ambigu (et vous avez donc le choix) ?

N.B. : les choix faits sur la page originale ne sont pas forcément les bons choix ! (En l'occurrence, le code n'étant à première vue pas de toute première qualité, il est particulièrement déconseillé de s'en inspirer…)

Les images nécessaires et les textes sont dans cette archive. Informations complémentaires :

  • La colonne principale fait 970 pixels de largeur.
  • La couleur du texte est #333, sauf dans le pied de page où c'est #999.
  • Les bordures sont toutes de couleur #e5e5e5.
  • La couleur de fond des colonnes de détails est #f5f5f5, et elles font 180 pixels de largeur.
  • L'image de fond de la page est GlobalBackground.gif.

Il est recommandé d'utiliser l'architecture de fichiers suivante, qui permet de bien séparer le contenu et la présentation tout en restant pratique d'utilisation :

--./
  |--index.html
  |--images/
  |  |-- …
  |  `-- …
  `--skin/
     |--screen.css
     `--images/
        |-- …
        `-- …

Efforcez-vous d'écrire du code propre, c'est-à-dire bien structuré et sémantique. D'autre part, la priorité est d'obtenir un résultat fonctionnel minimal, c'est-à-dire d'avoir une page lisible même si tous les détails de la présentation ne sont pas mis en place.