Retour

Récupérez l'archive contenant les fichiers nécessaires aux exercices suivants et décompressez la dans votre espace de travail.

Cliquez sur le titre d'un exercice pour le découvrir.

Les fichiers créés au cours des différents exercices sont souvent réutilisés pour d'autres exercices ultérieurs. Veillez donc à toujours en avoir une version disponible.

Exercices CSS : sélecteurs et positionnement

Sélecteurs (1)
Exercice à résoudre sans le navigateur, sur feuille.
Écrivez un sélecteur pour chacun des énoncés suivants. Dans chaque cas vous présenterez une structure arborescente contenant un ou plusieurs éléments correspondant au sélecteur (il peut être intéressant également de faire apparaitre dans l'arbre des éléments présentant des caractéristiques proches (même balise par exemple) mais qui ne sont pas sélectionnés). Vous donnerez également pour chaque règle la valeur de sa priorité sous la forme du triplet a b c.
  1. Tous les éléments <a> emboités dans un élément <p>.
  2. Tous les éléments <img> appartenant à la classe encadre et placés dans un élément <div> appartenant à la classe enonce.
  3. Tous les éléments <abbr> qui possèdent un attribut title.
  4. Tous les éléments <img> dont l'attribut width vaut 300.
  5. Tous les éléments <time> dont l'attribut datetime a été défini et qui sont situés dans un élément <article> appartenant à la classe remarque.
  6. Tous les éléments <p> qui sont fils d'un élément <div> de la classe exemple.
  7. Tous les éléments <img> de classe encadre placés dans un élément <p> dont l'id est important.
  8. Chaque premier élément <img>, mais qui n'est pas forcément le premier enfant, dont le père est un élément <div>.
  9. Tous les éléments <img> fils de rang impair d'un élément quelconque du document html.
  10. Tous les éléments <a> dont la cible est un fichier d'extension .jpg situé dans le premier élément <p> qui est fils d'un élément <article> de la classe exercice.
  11. Les éléments <div> de la classe remarque qui sont le premier frère (suivant) d'un élément <div> de classe reponse.
  12. Toutes les lignes de rang pair situées dans le corps d'une table.
  13. Le second élément de type <p> fils d'un élément <article> placé dans un élément <section>.
Sélecteurs (2)
Exercice à résoudre dans un premier temps sans le navigateur, sur feuille.
  1. Ouvrez dans un éditeur le fichier selecteur-exo1.html, dessinez-en la structure arborescente de racine <body>.
  2. Étudiez sa feuille de style selecteur-exo1.css. Pour chaque règle de la feuille indiquez sa valeur de priorité, sous la forme du triplet a b c.
  3. Pour chaque élément <p> du document indiquez tous les sélecteurs de règle de la feuille de style qui le concernent.
  4. Déduisez-en, en justifiant, avec quelle couleur d'arrière-plan sera affiché chacun des éléments <p>.
  5. Vérifiez ensuite vos réponses dans un premier temps visuellement en affichant le document dans le navigateur, dans un second à l'aide de l'outil Règles de l'inspecteur de style.
Sélecteurs (3)
Exercice à résoudre dans un premier temps sans le navigateur, sur feuille.
  1. Ouvrez dans un éditeur le fichier selecteur-exo2.html, dessinez-en la structure arborescente de racine <body>.
  2. Étudiez sa feuille de style selecteur-exo2.css. Pour chaque règle de la feuille indiquez sa valeur de priorité, sous la forme du triplet a b c.
  3. Pour chaque sélecteur des différentes règles, décrivez en une phrase les éléments qu'il sélectionne.

    Par exemple, pour le sélecteur li span, une phrase possible est Tous les éléments <span> descendants d'un (ou emboités dans un) élément <li>.

  4. Déduisez-en, en justifiant, avec quelle couleur d'arrière-plan sera affiché chacun des éléments <span> du document.
  5. Vérifiez ensuite vos réponses dans un premier temps visuellement en affichant le document dans le navigateur, dans un second à l'aide de l'outil Règles de l'inspecteur de style.
  6. Pour chacune des règles suivantes :
    • donnez une phrase qui décrit son sélecteur,
    • indiquez les éléments du document qui sont concernés par cette règle
    • calculez sa priorité,
    • déterminez en conséquence les éléments auxquels elle s'applique,
    • vérifiez votre réponse avec le navigateur, en l'ajoutant à la feuille de style selecteur-exo2.css ou en utilisant l'outil Éditeur de styles intégré.

    Procédez en ajoutant une règle à la fois à la feuille de style initiale, puis en les ajoutant toutes ensemble.

    1.   div.groupe p span {
           background-color : orange;
        }
      
    2.   p span:first-child {
          background-color : black;
          color : white;
        }
      
    3.   p:nth-of-type(2) span {
          background-color : black;
          color : white;
        }
      
    4.   p:nth-child(2) span {
          background-color : black;
          color : white;
        }  
      
Tableaux toujours plus stylés
Complément HTML sur les tables.

Dans une table HTML il est également possible de définir des groupes de colonnes. Il est ensuite possible d'attribuer des propriétés de style différentes pour ces groupes.

Pour définir des groupes de colonnes, on utilise une succession d'éléments <colgroup> en début de table (mais après <caption>). Un élément <colgroup> peu contenir 0, 1 ou plusieurs éléments <col>. Un élément <col> est un élément sans contenu et s'écrit donc par une seule balise : <col/>. Ainsi :

 <colgroup id="groupe1">
	<col id="col1"/>
	<col id="col2"/>
 </colgroup>
 <colgroup id="groupe2">
 </colgroup>
 <colgroup id="groupe3">
	 <col id="col4"/>
	 <col id="col5"/>
	 <col id="col6"/>
 </colgroup>

définit 3 groupes de colonnes : un groupe de 2 colonnes, puis un groupe d'une seule colonne et enfin un groupe de 3. La table doit donc comporter au moins 6 colonnes. Il est indispensable que le nombre de colonnes défini par les groupes ne dépasse pas le nombre de colonnes de la table.

Quand un élément <colgroup> ne contient aucun élément <col>, il peut recevoir un attribut span dont la valeur est un entier positif qui définit alors le nombre de colonnes dans le groupe.

Par exemple :

 <colgroup span="2" id="groupe1">
 </colgroup>
 <colgroup id="groupe2"></colgroup>
 <colgroup span="3" id="groupe3"></colgroup>

aura exactement le même effet que précédemment. Mais il n'est plus possible de désigner chaque colonne séparément Ccomme c'était le cas dans l'exemple précédent avec les attributs id sur les éléments <col>.

La balise <col> n'est autorisée que dans un <colgroup>.

Notez qu'il est impossible, dans les feuilles de style, d'utiliser les groupes de colonnes ou les colonnes pour définir un style de texte (couleur, police ...) par exemple, car le texte est dans les cellules et donc les propriétés qui le régissent doivent être définies dans les cellules et pas dans les colonnes.

Reprenez le fichier HTML contenant la table sur l'évolution de la population française que vous avez construite dans un exercice précédent (dans sa dernière version, avec un en-tête sur 3 lignes) et supprimez toute information de style qu'il contient (une version exploitable de ce fichier est également fournie avec l'archive jointe).

  1. Complétez la table HTML pour définir des groupes de colonnes : un pour la première colonne, un pour les 6 suivantes (vous lui associerez l'identifiant nombres) et un pour les 6 dernières (associées à l'identifiant pourcentages).
  2. Associez ensuite une nouvelle feuille de style à ce fichier. Dans cette feuille, définissez les règles pour afficher les colonnes du groupe nombres sur fond LightYellow et celles du groupe pourcentages sur fond rgb(252,217,131). Les colonnes du premier groupe auront une largeur de 100px et celles du deuxième une largeur de 60px.
  3. En utilisant le sélecteur :nth-child(), ajoutez une règle pour faire en sorte que les lignes de données (c'est à dire ici celle qui sont dans <tbody>) de rang pair reçoivent une couleur de fond gris semi-transparente, par exemple rgba(176,176,176,0.4).
  4. Ajoutez une règle de telle manière que les textes des années apparaissent en rouge, gras et centré. Vous exploiterez évidemment le fait que les cellules des années sont toujours les premières de chaque ligne.
  5. Continuez à styler la table de façon à obtenir un résultat ressemblant à la figure ci-dessous :
    le résultat à obtenir
    Le résultat à obtenir.
  6. Vous pouvez reprendre un des exercices précédents qui présentait le modèle de couche des tables en insérant des colonnes et groupes de colonnes dans cet exercice et en leur attribuant des couleurs. Refaites les expériences suggérées et déduisez où se place les couches de gestion des colonnes dans ce modèle de couhes des tables html.
Inspiré par Bruno Bogaert.
<div>, <span>, <classes>, <id> et pseudo-classes

Nous allons chercher à produire un document présentant des livres. Pour chaque livre est affiché une image de la couverture ainsi que quelques informations. Ces informations sont :

  • le titre,
  • lorsque le livre appartient à une série, le nom de cette série,
  • le ou les auteurs,
  • l'année de parution du livre.

Les livres sont également rangés par catégories. Celles-ci sont identifiées par une couleur d'arrière-plan différente de la rubrique d'information. Dans les exemples fournis on propose 3 catégories :

  • science-fiction (rgb(254,128,128))
  • fantasy (rgb(128,128,254))
  • bandes-dessinées (rgb(238,238,204))

Parmi tous les livres, un et un seul est identifié comme favori. Il se distingue visuellement par une couleur d'arrière-plan différente.

L'objectif est d'obtenir une mise en page similaire à ce qui est présenté à la figure suivante :

Le résultat à obtenir.
Le résultat à obtenir (cliquez pour une vue large).

Nous procéderons par étape en commençant, comme il se doit, par la structuration et le contenu du document puis en nous occupant de sa forme.

  1. Donc commençons par structurer le document. L'en-tête contient la légende présentant les différentes rubriques puis on trouve une zone contenant les livres. Chaque livre sera décrit dans une division (élément <div>) qui sera marquée sémantiquement par une classe, l'appeler livre paraît raisonnable... Un division livre sera elle-même divisée en deux blocs (d'autres divisions) : la couverture et les informations. Les informations se divisant comme décrits précédemment. Pour chaque livre, les auteurs seront regroupés dans une même division et chaque auteur sera également rangé dans un élément <span> séparé. L'année de parution peut être marquée par un élément <time>. Toutes ces rubriques seront marquées sémantiquement.

    Créez un document conforme à cette structure. Vous pouvez vous baser sur les données fournies dans le fichier livres/livres.txt. Les images des couvertures sont également dans le dossier livres.

  2. Comment gérer/marquer les différentes catégories des livres ? Proposez une solution et appliquez la.
  3. Comment faire pour marquer un et un seul des livres comme favori ? Choisissez votre favori et marquez le.
  4. Nous pouvons maintenant nous occuper un peu de la forme... Commencez par écrire un seul bloc de règles qui fasse que les éléments <header> et la zone contenant les livres ont la même couleur d'arrière-plan (par exemple rgba(128,255,128,0.3)) et occupe 90% de la page, en étant centrés.
    L'idée est que si l'on souhaite changer l'une de ces propriétés, une seule modification soit suffisante pour les deux classes d'éléments.
  5. On va s'intéresser maintenant aux divisions livre (en dehors des aspects favori abordés un peu plus loin). Gérons d'abord les blocs indépendamment et nous verrons dans la question suivante comment les positionner les uns par rapport aux autres.
    • Voici pour ces divisions les informations fournies par l'outil Modèle de boite :
      Le modèle de boite des divisions livre.
      Le modèle de boite des divisions livre.
    • En ce qui concerne les informations, elles sont alignées sur la gauche de leur division. Le titre est en gras, la série est en italique et de taille plus petite (smaller). Les auteurs apparaissent en italique (nous verrons plus loin pour l'auteur qui apparaît en souligné). Le tout avec des couleurs différentes pour chaque information.
    • Les blocs contenant la couverture et les informations sont centrés dans cette division. De plus la couverture occupe 70% de la hauteur et les informations 20%. Ajoutez à cela quelques marges (intérieure et/ou extérieure), des bordures (et/ou box-shadow), un peu de couleur pour ressembler (globalement) à la figure précédente.
  6. Les divisions sont des éléments de flux qui constituent des blocs dont le comportement par défaut est de s'afficher les uns en dessous des autres. De plus les blocs peuvent contenir d'autres blocs et ont par défaut la taille de leur conteneur (l'élément père qui les contient). Pour l'instant les livres s'affichent donc les uns en dessous des autres.

    Il est possible de modifier ce comportement par défaut en agissant sur la propriété display. Sa valeur par défaut pour les divisions est donc block. En fixant cette propriété à la valeur inline-block on modifie le comportement : leur taille dépend cette fois par défaut de leur contenu et ils s'affichent à la suite les uns à côté des autres en suivant le flot de la page. Pour autant il est toujours possible de modifier leur taille et ils peuvent contenir d'autres éléments de type block.

    Une autre valeur possible pour cette propriété est inline. C'est la valeur par défaut pour les éléments de phrasé. Ces éléments ne peuuvent contenir que des éléments inline ou du texte (alors que les block peuvent aussi contenir des inline et du texte). Leur taille dépend de leur contenu et ils se positionnent les uns à côté des autres mais il n'est pas possible de modifier leur taille.

    Fixez donc la valeur de display à inline-block pour les divisions de clase livre et visualisez le résultat. Testez en modifiant la taille de la fenêtre d'affichage du navigateur.

    Il existe d'autres valeurs pour la propriété display, par exemple none qui a pour effet que l'élément n'est pas affiché.
  7. Pour obtenir un alignement vertical plus esthétique des divisions declass livre, il faut jouer sur la propriété vertical-align. Sa valeur par défaut est bottom. Elle signifie que les contenus des différents éléments sont alignés comme s'ils étaient posés sur une même ligne horizontale. Attention, il s'agit bien des contenus qui sont alignés (posés) sur la même ligne et non les boites CSS. On peut le constater sur les contenus des éléments d'informations des livres, en utilisant l'outil inspecteur par exemple pour visualiser les limites des contenus. C'est le fait que ces contenus sont de tailles différentes qui produit le non alignement des boites. Ici pour obtenir un alignement visuel des boites, il faut changer la valeur de cette propriété vertical-align. En la positionnant à top par exemple, on indique que les contenus des livres doivent être posés sous une ligne horizontale. Les parties supérieures des contenus de livres, ici les images de couverture, sont alors toutes posées sur une même ligne ce qui provoque l'alignement des boites CSS par la même occasion.

    Essayez donc en modifiant la valeur de vertical-align à top pour les divisions de class livre.

  8. Comme le montre l'illustration, le livre favori (Le seigneur des anneaux)se distingue par :
    • une couleur d'arrière plan différente,
    • un titre de couleur bleu (par exemple),
    • une bordure (ou box-shadow) de couleur différente

    Ajoutez les règles nécessaires à la gestion de ce favori.

  9. Ajoutez une règle telle que le premier auteur (et seulement le premier) soit souligné (il faut fixer les valeurs pour la propriété border-bottom).
  10. Ajoutez une règle telle que lors du survol par la souris d'un livre (y compris le favori) sa bordure change. On peut le visualiser dans la figure précédente avec le livre Goût décès.
    Dans l'illustration, une division livre a par défaut la propriété box-shadow: 0px 0px 4px 2px rgba(200,120,120,0.6) et devient box-shadow: 0px 0px 4px 4px rgba(100,20,20,0.6); lors du survol.
    Une fois cette manipulation réalisée, testez pour le survol la propriété :
    	transform : scale(1.05);					

    A utiliser avec modération...

  11. Comment avez-vous fait pour que les couleurs d'arrière-plan dans la légende soient les mêmes que celles dans la rubrique information des livres correspondants ? Combien de modifications devez-vous faire si l'on souhaite que la couleur d'arrière-plan des livres de la catégorie fantasy devienne background-color : rgb(188,188,254); ? Si la réponse n'est pas 1, faites le nécessaire pour corriger votre code.
Breaking Bad (ou Classification périodique)

Dans cet exercice nous allons utiliser les propriétés permettant d'agir sur la positions des blocs dans la page pour produire une classification périodique des éléments chimiques comme celle présentée à la figure suivante.

exemple de classification périodique (partielle) à obtenir à la fin de l'exercice
Classification périodique partielle

Une version complète peut par exemple être trouvée ici ou ici.

  1. Nous allons commencer par nous intéresser à la mise en forme des données pour un atome. Les données que nous voulons afficher sont présentées à la figure suivante qui sert également de modèle pour le résultat à obtenir.
    l'élément carbone et les données à afficher
    L'élément Carbone et ses données

    Le fichier hydrogene-carbone.html contient des données pour les atomes hydrogène et carbone. Des classes ont été créées pour structurer et typer ces données. Etudiez cette structure. Vous pouvez constater que les données n'apparaissent pas dans le même ordre pour les deux atomes. Vous les laisserez telles qu'elles, pour autant on voudra obtenir la même présentation pour les deux atomes (voir image précédente).

    1. Fixer une largeur, une hauteur, une couleur d'arrière plan pour les <div> de la classe atome.

      Vous pouvez utiliser le fichier hydrogene-carbone.css qui définit quelques propriétés de base pour les différentes éléments. Nous allons le compléter dans la suite de l'exercice.

    2. On souhaite placer le numéro atomique en haut à gauche : à 0% du bord haut, et à 2% du bord gauche définis par la boîte de l'élément <div> de la classe atome qui le contient. Quelles propriétés faut-il ajouter au sélecteur div.numero ? Quelle propriété faut-il modifier pour les div.atome ?
    3. Procéder de manière similaire pour
      • l'électronégativité : à 1% du bord haut et 40% du bord gauche,
      • les couche d'électrons : à 1% du bord haut et 2% du bord droit,
      • la masse atomique : à 1% du bord bas et 2% du bord gauche.
    4. Définissez les propriétés qui permettent de décaler vers le bas par rapport à leur position actuelle de 20% le symbole chimique et de 15% le nom de l'élément chimique.
    5. Vous devez maintenant avoir obtenu un résultat similaire à l'image précédente et, mis à part l'élément div.nom qui doit se trouver après l'élément div.symbole, vous devez pouvoir changer l'ordre des données au sein du bloc div.atome sans que cela ait un impact sur l'affichage.
  2. Poursuivons avec la construction de la table. Les données sur les 11 premiers atomes se trouvent dans le fichier tablePeriodique.html. Ajoutez le contenu de la feuille de style produite à la question précédente au fichier style-tablePeriodique.css. Les éléments s'affichent pour le moment les uns en dessous des autres.
    1. Pour obtenir le placement désiré des éléments, nous allons rendre flottants à gauche et à droite, selon ce qui est désiré, les blocs correspondant aux atomes. Pour cela, après avoir identifié à quoi correspond l'élément div.bloc dans le document, définissez pour les éléments de classe element et bloc la valeur de propriété float qui convient.
    2. Quelle propriété faut-il affecter sur les div.ligne pour que les différents éléments restent sur leurs lignes respectives et ne flottent pas sur les lignes précédentes ?
    3. Finissons avec un peu de cosmétique :
      • Dans les conditions normales, certains éléments chimiques sont naturellement solides (Li, Be, B, C et NA pour ceux qui nous concernent), d'autres des gaz (les autres). Attribuez une couleur particulière aux symboles des gaz et une autre aux symboles des solides (il faut définir des classes et les attribuer dans le code html).
      • Dans les éléments chimiques on identifie plusieurs types :
        • les non-métaux : H, C, N,O,
        • les métaux alcalins : Li, Na,
        • les métaux alcalino-terreux : Be,
        • les métalloïdes : B
        • les halogènes : F,
        • les gaz rares : He et Ne.
        Il est d'usage de représenter dans la table périodique ces types par différentes couleurs. Définissez des couleurs de fond que vous associerez aux éléments chimiques selon leur type.
      • Définissez une règle CSS telles que le nombre d'électrons de la première couche soit de couleur rgb(128,0,0), celui de la seconde couche rgb(64,0,0) et celui de la troisième couche rgb(32,0,0).

        Vous pouvez aussi décaler ces nombres vers le haut de 2px pour le premier, 4px pour le second et 6px.

Un menu fixe
Reprenez le document sur Tim Berners-Lee créé dans un exercice précédent. Ajoutez dans ce document des ancres à chacun des éléments de titre (<h?>) puis ajoutez en début de la page le code html permettant de créer un menu sous forme d'une liste dont les éléments <li>contiennent des liens vers les ancres que vous venez de créer. Ce menu étant placé en haut de page, il n'est donc plus accessible lorque l'on fait défiler le document dans la fenêtre du navigateur. Nous allons remédier à cela.
  1. Placez le contenu du menu dans un élément <nav> et positionnez cet élément sur la gauche de la page de telle manière à ce qu'il reste fixe (immobile) y compris lors du défilement du contenu du reste de la page.

    Vous attribuerez une marge gauche suffisante au reste du contenu de la page pour que ce contenu n'empiète pas sur ce menu.

Un peu de mediaqueries

Dans cet exercice, nous reprendrons des documents créés dans d'autres exercices précédemment et nous les modifierons en ajoutant des règles media-queries dans leurs feuilles de style pour adapter l'affichage en fonction de la taille de la fenêtre disponible. On pourra penser à utiliser l'outil Vue adaptative pour tester les règles mises en place.

N'hésitez pas à imaginer d'autres règles d'adaptation que celles suggérées.

  1. Complétez la feuille de style du document créé dans l'exercice sur les livres avec des mediaqueries de telle manière que lorsque la largeur de la zone d'affichage est inférieure à 600px l'affichage change. On peut par exemple dans ce cas :
    • ne plus afficher les images
    • placer les différents blocs correspondant aux livres les uns en dessous des autres, et non plus les uns à côté des autres
  2. Complétez la feuille de style du document créé dans l'exercice sur la classification périodique avec des mediaqueries.
    • Lorsque la largeur de la zone d'affichage est inférieure à 1000px on souhaite passer la largeur de l'élément div#tablePeriodique à 800px et celle des éléments div.atome à 8%.
    • Lorsque la largeur de la zone d'affichage est inférieure à 800px change on souhaite :
      • fixer la largeur de l'élément div#tablePeriodique à 99%
      • supprimer les informations dont les textes sont trop petits : électonégativité, couches électrons et masse atomique
      • réduire la taille de la police d'affichage du symbole chimique à 30px
    • Lorsque la largeur de la zone d'affichage est inférieure à 600px change on souhaite :
      • ne plus afficher que le symbole chimiquer et la masse atomique
      • la hauteur des div.atome passe à 60px
  3. Complétez la feuille de style du document créé dans l'exercice sur le menu fixe avec des mediaqueries de telle manière que :
    • en cas d'impression du document, le menu disparaisse et que le contenu du document occupe toute la largeur de la page.
    • si la largeur de la zone d'affichage devient inférieure à 800px, le menu fixe à gauche soit déplacer dans la partie du document ("au-dessus") et que les éléments du mmenu s'affichent horizontalement les uns après les autres.
    • si la largeur de la zone d'affichage devient inférieure à 600px, le menu est remplacé par un simple mot MENU en haut à droite qui survolé fait apparaitre le menu vertical d'origine qui s'affiche "par-dessus" le document.