TP 6 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> Les selecteurs complexes p>
<p> Les selecteurs complexes </p>
<h2>Titre2</h2>
<p> Les selecteurs complexes </p>
<p> Les selecteurs complexes </p>
<div class="exemple">
<h2>exemple1</h2>
<p> Les selecteurs complexes </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 noire 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
En se basant sur le code html suivant :
<!doctype html>
<html>
<head>
<title>Bordure</title>
<meta charset="utf-8">
</head>
<body>
<div class="article">
<h2 class="titre-article">CSS</h2>
<div class="detail-article">
<p>C’est un standard qui a récupéré la fonction de paramétrage du style (encodage de la forme). Le style peut être inclus dan s l'encodage de la
structure (près des éléments) ou externalisé dans une entité-document à part entière qu’on appelle feuille de style CSS. Cette technologie a été introduit
par Microsoft, le but est de modifier le contenu d'une page par une grande variété d'effets surprenants (Dynamic HTML) et cela en un clin d'œil. </p>
<a href="#">Read more</a>
</div>
</div>
</body>
</html>
Appliquer les propriétés de bordures en css : border et border-radius afin de réaliser le design ci-
dessous :
1. Appliquer une bordure solid de couleur rgba(0,0,0,0.3) et un arrondissement de 10px. Ajouter
les marges qui conviennent et une hauteur de ligne à 1.5.
2. Donner au titre une bordure du bas pointillée et une police.
3. Pour la classe "detail-article" appliquer un alignement centré de texte pour centrer le lien.
4. Appliquer la couleur #7b7b7b , une taille de 1em , et un alignement justifié au paragraphe fils
de la classe "detail-article".
5. Le lien (read more) avec une bordure de forme elliptique 200px/50px.
Exercice 3
Améliorer la page html suivante en utilisant des propriétés css comme :font, line-height , color ,
margin et padding ...
<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 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 appare il</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 en suivant les étapes suivantes :
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 un é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
6. le lien "plus de détails" :
o Une couleur #8870FF
o une marge gauche de 20px
Exercice 4
Soit le code html suivant :
<html>
<head>
<title>Les selecteurs simples</title>
</head>
<body>
<div id="layout">
<h2>Définition</h2>
<p class="gauche">
CSS : c’est l’abréviation de Cascading Style Sheets("Feuille de style en cascade").
C'est dans la feuille de style que l'on va déclarer toute la mise en forme des pages : la couleur de fond, les polices de caractère, leurs couleurs, etc.
HTML pour écrire le contenu de nos pages web.
CSS pour présenter ce contenu.
Ces 2 langages sont donc complémentaires.
</p>
<p class="droite">
Le code CSS peut être écrit :
1. dans les balises concernées ;
2. dans l’en-tête du document (on parle de feuille de styles interne) ;
3. dans un fichier séparé (on parle de feuille de styles externe).
</p>
<button >read more</button>
</div>
</body>
</html>
Appliquez ce qui suit :
1. Un background de couleur noire, une largeur de 500px, un retrait de 5px , et un alignement centré pour
l’élément identifié par "layout".
2. Aligner le texte à gauche pour la classe "gauche" et à droite pour la classe "droite".
3. Colorer le texte en blanc pour les éléments h2, p et button.
4. Affecter une couleur bleue au background du bouton.
Exemple de résultat :
Exercice 5
On considère le code html suivant :
<html>
<head>
<title>Positionnement</title>
</head>
<body>
<div class="article">Block1
<div class="details">
CSS : c’est l’abréviation de Cascading Style Sheets ("Feuille de style en cascade").
C'est dans la feuille de style que l'on va déclarer toute la mise en forme des pages : la couleur de fond, les polices de caractère, leurs couleurs, etc.
</div>
</div>
<div class="fix">
fix
</div>
</body>
</html>
1. Placer les éléments de ce document sous la forme suivante :
▪ Le block1 doit être centré horizontalement dans la page.
▪ Placer le block2 (classe "details") par rapport à son conteneur block1 : à 80px du gauche et
100px du haut.
▪ Fixer l’élément possédant la classe "fix" en bas à droite de la fenêtre du navigateur