TP 05 : Modèle de boite CSS3

Exercice 1 — Modèle de boîte CSS #

https://dev-LOGIN.users.info.unicaen.fr/1HU91-2024/TP05/ex1/boxmodel.html

<meta name="author" content="LOGIN" />

Télécharger cette archive, elle contient un fichier HTML et une feuille de style CSS qui lui est associée. Placer ces fichiers au bon endroit sur votre serveur (voir les instructions dans l'encadré rouge ci-dessus). Ouvrez l'URL correspondante sur votre navigateur (NB: l'URL dans la barre d'adresse doit commencer par https://, sinon c'est que vous ne regardez pas la bonne page ; demandez de l'aide).

Le texte de la page HTML n'a aucun sens, c'est juste une page pour expérimenter : dans cet exercice, on va manipuler des propriétés classiques du « modèle de boîtes » sur lequel sont basées les CSS. Les règles déjà présentes dans le CSS ne font qu'ajouter des couleurs et des bordures.

Quand l'exercice pose des questions, vous devez y répondre en mettant des commentaires dans le fichier CSS. (Rappel : la syntaxe des commentaires CSS, /* c'est ça */) N'hésitez pas à utiliser l'inspecteur de Firefox (voir TP précédent) pour cocher/décocher les propriétés étudiées, afin de mieux voir les différences.

1. Ajouter la propriété margin: 30px; à la règle portant sur les éléments de type article. Le résultat devrait donc ressembler à ça :

   article {
     border: 2px dotted #666;
     margin: 30px;
   }
   

   Constater que les articles (bordure en pointillés) se sont écartés l'un de l'autre ainsi que du gros cadre rouge.

2. À votre avis, que va-t-il se passer si on ajoute exactement la même propriété à la règle portant sur les éléments de type strong ?

   Le faire : que se passe-t-il ? Est-ce conforme à vos attentes ?

   Remarque : la différence est due au fait que strong est un élément inline (qui s'inscrit dans le flux du texte), contrairement à article, qui est un élément de type bloc.

3. Modifier la propriété margin pour les éléments de type article comme suit :

   margin: 30px 5px;
   

   Quelle est la différence ?

4. Ajouter une propriété margin: 5px; à la règle h2, p. Constater que ces éléments avaient une marge par défaut, que vous venez de retirer.

5. Ajouter une propriété padding: 30px; à la règle portant sur les éléments de type article. Constater que cette fois, c'est le contenu des articles qui s'est éloigné de leur bordure (en pointillés).

6. Ajouter la même propriété dans la règle portant sur les éléments de type strong. Remarquer que, contrairement à margin, le padding s'applique verticalement et horizontalement même pour les éléments inline. Retirer ensuite ce padding, afin que la page reste lisible.

7. Ajouter la propriété padding-left: 5em; à la règle h2, p. Le padding des titres et des paragraphes a-t-il la même apparence visuelle ? Pourquoi ?

   Ajouter la propriété font-size: 100% à cette règle. Que se passe-t-il ? Quel effet cela produit-il sur le padding ?

8. Quand l'inspecteur de Firefox est ouvert, en cliquant sur la flèche à gauche de ses onglets, on passe en mode « survol » : lors du survol d'un élément, sa marge apparaît en jaune et son padding en violet, et son type et les dimensions de sa boîte (au format « largeur × hauteur ») s'affichent. Tester sur la page.

9. Ajouter la propriété width: 50%; à la règle sur les articles. Constater que les articles (avec les bordures en pointillés) prennent bien environ la moitié de la largeur du cadre rouge.

10. Ajouter la propriété text-align: center à la règle sur les articles. Que se passe-t-il : la boîte des articles se retrouve-t-elle centrée dans le cadre rouge ? Sur quoi porte text-align ?

    Si on veut centrer la boîte des articles, c'est avec les marges qu'il faut le faire. Modifier la propriété margin de la règle sur les articles en y mettant margin: 30px auto. Que fait la valeur auto ?

Exercice 2 — Une page sur les fraises des bois #

https://dev-LOGIN.users.info.unicaen.fr/1HU91-2024/TP05/ex2/fraises.html

<meta name="author" content="LOGIN" />

On vous fournit une image d'une page web.

On vous fournit également une archive contenant ce modèle ainsi qu'une arborescence avec

• le code HTML de la page
• les images (dans un dossier img/)
• un dossier style/ contenant une feuille de style CSS

Placer l'arborescence sur votre serveur, puis lier la page HTML à la feuille de style CSS : tant que les couleurs de fond n'ont pas changé, c'est que ça n'a pas marché — inutile de continuer !

Compléter ensuite la feuille de style pour obtenir un rendu aussi proche que possible de la page demandée. Vous n'avez pas besoin de changer le code HTML.

Pour info, les couleurs utilisées sont #fcfcea (couleur de fond du texte), #b71236 (couleur de fond du titre et séparations entre sections) et #c7ccbd (bordures du pied de page).