Introduction à CSS

Formations enseignants ISN

Jean-Marc LecarpentierAlexandre Niveau

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP, on ajoute un peu de style à nos pages.

Exercice 1 — Expérimentation du CSS #

Reprendre la page simple sur Tim Berners-Lee créée au TP précédent et appliquer les styles suivants, en utilisant une balise <style> (pas un attribut !) :

  1. mettre les titres de section en bleu ;
  2. mettre le titre principal en italique ;
  3. mettre les liens en gras ;
  4. mettre des puces carrées à la place des puces rondes dans la liste ;
  5. enlever le soulignement des liens.

Appliquer ensuite les styles suivants, en expérimentant :

  1. augmenter la taille de la police du titre principal ;
  2. ajouter un « cadre » autour des images (essayer plusieurs styles et plusieurs épaisseurs) ;
  3. changer la couleur de fond de la page, tout en gardant un fond blanc pour les paragraphes.

Exercice 2 — Utilisation de l’inspecteur de Firefox #

L'inspecteur de Firefox est un outil fondamental pour qui s'essaie au CSS. (Des équivalents existent pour les autres gros navigateurs.)

  1. Aller sur un site quelconque, faire un clic droit sur un élément, et choisir « Examiner l'élément » (ou Inspect Element). Une fenêtre apparaît, avec trois parties :
    • à gauche, le HTML ;
    • au milieu, les règles CSS appliquées ;
    • à droite, les propriétés CSS calculées (et d'autres onglets utiles).
  2. Dans la partie centrale, décocher des propriétés CSS et observer l'effet sur la page.
  3. Dans la partie centrale, modifier des valeurs de propriétés CSS et observer l'effet sur la page (et sur les valeurs calculées à droite).
  4. Cliquer sur la flèche en haut à gauche de l'inspecteur, et parcourir les éléments de la page.
  5. Aller voir l'onglet « Modèle de boîte » (« Box model ») du cadre de droite.

Ce qui est particulièrement important, c'est que l'inspecteur ne vous montre pas le code que vous avez écrit, mais ce que le navigateur en a compris, ce qui permet de détecter de nombreuses erreurs.

  1. Aller sur cette page et regarder le code source (clic droit puis « Code source de la page », ou alors « Control-U »).
  2. Retourner sur la page, ouvrir l'inspecteur et regarder la partie HTML ; comparer au code source de la page. Comprenez-vous ce qui se passe avec le paragraphe et la liste ?
  3. Inspecter le footer : quelles sont les propriétés CSS que « voit » vraiment le navigateur ? Trouver l'erreur dans le code.

L'intérêt de l'inspecteur peut vous sembler anecdotique pour l'instant, mais il deviendra vite incontournable quand vous commencerez à faire de la mise en page.

Exercice 3 — Une page sur l’épagneul #

Adapté d’un exercice d’Hervé Le Crosnier

On vous fournit une image d'une page web.

Capture d'écran de la page
Capture d'écran de la page

On vous fournit également une archive contenant une arborescence avec

  • un squelette HTML
  • un fichier textes.txt avec les textes de la page
  • les images (dans un répertoire images/)
  • un répertoire styles/ contenant une feuille de style CSS ainsi qu'une police de caractères

Compléter la page HTML et la feuille de style CSS pour obtenir un rendu aussi proche que possible de la page demandée. Votre page HTML doit être valide W3C.

Exercice 4 — Le retour de l’épagneul #

Adapté d’un exercice d’Hervé Le Crosnier

On reprend la page sur l'épagneul du TP précédent. Commencer par copier-coller l'ensemble du répertoire correspondant, pour pouvoir travailler sur ce nouvel exercice sans risquer de casser l'ancien.

  1. Tout d'abord, utiliser cette image icône de patte de chien et modifier le CSS pour que la liste s'affiche comme sur la capture suivante.
    Capture d'écran de la liste
    Capture d'écran de la liste
  2. Ensuite, faire en sorte que la légende de la 2e image (et uniquement celle-là) s'affiche par-dessus l'image elle-même, comme dans la capture suivante. Il va falloir modifier la position de la légende : renseignez-vous sur la propriété CSS position et ses différentes valeurs, par exemple ici (en français) ou ici (en anglais mais plus clair).
    Capture d'écran de l'image avec sa légende
    Capture d'écran de l'image avec sa légende
  3. Optionnel (pour les plus à l'aise) : essayer de faire en sorte que cette légende n'apparaisse que quand l'internaute survole l'image avec sa souris.

Exercice 5 — Listes et menus #

Réaliser un menu avec une liste d'items contenant des liens, puis rédiger des feuilles de style pour présenter le menu sous différentes formes. On pourra réaliser un menu vertical puis horizontal, par exemple.

menu vertical
Un menu vertical.
menu horizontal
Un menu horizontal (regarder la propriété display).