TP 1 : Sélecteurs et Formatage de texte en css
Exercice 1 :
En se basant sur le code html suivant:
<html>
<head>
<title>Les selecteurs complexes</title>
<meta charset="utf-8">
</head>
<body>
<div class="article">
<h2>Titre1</h2>
<ul>
<li>Item1:<p>resumé item1..........</p></li>
<li>Item2:<p>resumé item2.......</p></li>
<li>Item3:<p>resumé item3........</p></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<h2>Titre2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<div class="exemple">
<h2>exemple1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit</p>
1
TP 1 : Sélecteurs et Formatage de texte en css
</div>
</div>
</body>
</html>
Utiliser les combinateurs et appliquer les styles CSS ci-dessous :
1. Un retrait gauche de 20px pour tous les paragraphes descendants
de la classe "article".
2. Un background de couleur jaune pour les paragraphes frères directs
du titre "h2" (qui se trouvent immédiatement après h2) .
3. Une bordure noir et solide pour les paragraphes adjacents du titre
"h2".
4. Une couleur verte pour les paragraphes fils des éléments "li".
Le résultat à obtenir:
Exercice 2 :
À partir de la page html suivante :
<!doctype html>
<html>
2
TP 1 : Sélecteurs et Formatage de texte en css
<head>
<title>Typographie</title>
<meta charset="utf-8">
</head>
<body>
<h1>Web Mobile</h1>
<p>D'après wikipedia :Le Web Mobile ou Webmobile est une
technique qui permet d'accéder à Internet depuis un téléphone mobile, on
parle alors de l'Internet Mobile et des smartphones. Le web mobile se
matérialise notamment par l'utilisation de navigateur mobiles ou
d'applications pour Smartphones mais aussi par des widgets, la
consultation de mails de façon instantanée... C'est l'évolution des
équipements, des usages et des forfaits de téléphone mobile qui ont
permis le démarrage du web mobile.</p>
<blockquote>
<p>L'initiative du Web mobile est importante : l'information
doit être traité de façon transparente sur n'importe quel appareil</p>
<em>—Tim Berners-Lee</em>
</blockquote>
<a href="[Link] de
détails</a>
</body>
</html>
On va arriver au rendu ci-dessous en utilisant les propriétés css pour la
typographie :
3
TP 1 : Sélecteurs et Formatage de texte en css
1. Le body doit être
o dans l'ordre de préférence de police helvetica, Arial, et sans-serif
o d'une hauteur de ligne de 1.5 sans unité
o d'une marge de 10px
o d'une taille police de 1em.
2. Le titre h1 avec :
o une police helvetica Arial serif
o une taille police de 1.5em
o une marge du bas à 1.5em
o la couleur "#454545"
o et une épaisseur de caractères gras.
3. Pour le paragraphe qui suit le titre :
o une couleur #7a7a7a.
o une marge gauche de 20 px.
o une marge du bas de 1.5em.
4. Le blockquote doit avoir :
o une police italic de taille 1.2em
o une marge droite de 80px du bas de 20px et de gauche de 60px
o un background #e7f2fa et une couleur #444
o une bordure gauche solide de 5px et de couleur #8870FF
o une marge interne de 15px
5. La balise em avec :
o un affichage en bloc
o un alignement à droite
4
TP 1 : Sélecteurs et Formatage de texte en css
6. le lien "plus de détails" :
o Une couleur #8870FF
o une marge gauche de 20px