ROYAUME DU MAROC
Office de la Formation Professionnelle et de la Promotion du Travail Formateur : I.ADDARRAZI
Filière : DEVELOPPEMENT DIGITAL Niveau :1er Année
Module : Sites web statiques
Année de formation: 2024/2025
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>
1
ROYAUME DU MAROC
Office de la Formation Professionnelle et de la Promotion du Travail Formateur : I.ADDARRAZI
Filière : DEVELOPPEMENT DIGITAL Niveau :1er Année
Module : Sites web statiques
Année de formation: 2024/2025
TP 1 : Sélecteurs et Formatage de texte en css
<div class="exemple">
<h2>exemple1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit</p>
</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 fil
5. s des éléments "li".
Le résultat à obtenir:
2
ROYAUME DU MAROC
Office de la Formation Professionnelle et de la Promotion du Travail Formateur : I.ADDARRAZI
Filière : DEVELOPPEMENT DIGITAL Niveau :1er Année
Module : Sites web statiques
Année de formation: 2024/2025
TP 1 : Sélecteurs et Formatage de texte en css
Exercice 2 :
À partir de la page html suivante :
<!doctype html>
<html>
<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 tech-
nique 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'ap-
plications pour Smartphones mais aussi par des widgets, la consultation
3
ROYAUME DU MAROC
Office de la Formation Professionnelle et de la Promotion du Travail Formateur : I.ADDARRAZI
Filière : DEVELOPPEMENT DIGITAL Niveau :1er Année
Module : Sites web statiques
Année de formation: 2024/2025
TP 1 : Sélecteurs et Formatage de texte en css
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="https://fr.wikipedia.org/wiki/Web_mobile">Plus de dé-
tails</a>
</body>
</html>
On va arriver au rendu ci-dessous en utilisant les propriétés css pour la ty-
pographie :
4
ROYAUME DU MAROC
Office de la Formation Professionnelle et de la Promotion du Travail Formateur : I.ADDARRAZI
Filière : DEVELOPPEMENT DIGITAL Niveau :1er Année
Module : Sites web statiques
Année de formation: 2024/2025
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
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
5
ROYAUME DU MAROC
Office de la Formation Professionnelle et de la Promotion du Travail Formateur : I.ADDARRAZI
Filière : DEVELOPPEMENT DIGITAL Niveau :1er Année
Module : Sites web statiques
Année de formation: 2024/2025
TP 1 : Sélecteurs et Formatage de texte en css
o une marge interne de 15px
5. La balise em avec :
o un affichage en bloc
o un alignement à droite
6. le lien "plus de détails" :
o Une couleur #8870FF
o une marge gauche de 20px
