Exercices d'application

1. Enregistrez cette page web, et ouvrez-la avec un éditeur de texte adapté. L'élément body ne contient essentiellement des éléments p et li, et leur contenu dit quel style on voudrait pour certains d'entre eux. Ajoutez les attributs de classe qui vous semblent utiles (2 classes suffisent, et pas besoin d'identifiant).
   Créez ensuite la feuille de style qui permet d'obtenir la mise en forme des paragraphes selon la classe attribuée.
2. Enregistrez cette page web. L'élément body ne contient que des listes, certaines emboîtées sur 3 niveaux, une autre isolée dans un élément div. Repérez la paire de balises style dans le préambule, et mettez entre les deux une règle CSS qui permet d'obtenir des puces sur les items de premier niveau mais pas sur les autres (pensez au sélecteur li li et faites une recherche pour trouver le nom de la règle utile).
   Commentez cette règle et trouvez par quoi la remplacer si on veut le contraire (pas de puces au premier niveau, des puces aux autres).
   Et si on ne veut des puces qu'aux deux premiers niveaux, que faire?
   Enfin, comment avoir des puces partout sauf dans la liste spéciale? Vous voyez dans cet exemple l'intérêt de la balise div.
3. Reprenez la page de l'exercice précédent, et ajoutez la règle li { font-size: 0.7em; }. Observez le résultat, expliqué dans "Héritage des propriétés". Pour le même sélecteur, essayez aussi la règle width:50%. Comment empêcheriez-vous que les dimensions continuent à diminuer après le niveau 1?

   Indication : essayer en remettant les valeurs d'origine pour les niveaux 2 et plus. Autre solution: profitez-en pour essayer la valeur inherit: les li concernés vont hériter des dimensions de leur parent ul, qui sont celles par défaut.

4. Reprenez la page arbre.html. Aviez-vous remarqué que les boîtes inline n'ont apparemment pas les marges extérieures de 10px en haut et en bas, bien qu'on l'ait demandé pour toutes les boîtes?
   Qu'en sera-il alors de leurs marges intérieures? Pour le savoir, mettez ces marges (padding) à 20px pour toutes les boîtes et regardez: les boîtes inline se contentent de déborder en hauteur sans que le texte ne soit déplacé.
   Cela pourra servir à créer des effets particuliers, éventuellement. Par exemple, mettez un fond blé mûr (wheat) aux éléments de type code. Dernière remarque: les superpositions nous prouvent que le navigateur dessine les boîtes dans l'ordre où on les lit (du haut vers le bas).
5. Finissez à présent l'exercice de la 2e page du TD (interview futura).
6. Un dernier exercice du même type: la page web et le modèle souhaité sont dans cette archive, faites la feuille de style adéquate (vous pouvez modifier un peu les balises existantes de la page html, si besoin est).