Scribd
Importer
18 vues3 pages

Atelier CSS : Positionnement et Sélecteurs

Ce document présente un atelier de développement web axé sur le CSS pour les étudiants de première année en informatique. Il contient des exercices pratiques sur le positionnement flottant et l'utilisation de sélecteurs complexes en CSS. Les étudiants doivent compléter des codes CSS pour obtenir des mises en page spécifiques et appliquer des styles à des éléments HTML donnés.

Transféré par

nourdhaouadi73
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
18 vues3 pages

Atelier CSS : Positionnement et Sélecteurs

Ce document présente un atelier de développement web axé sur le CSS pour les étudiants de première année en informatique. Il contient des exercices pratiques sur le positionnement flottant et l'utilisation de sélecteurs complexes en CSS. Les étudiants doivent compléter des codes CSS pour obtenir des mises en page spécifiques et appliquer des styles à des éléments HTML donnés.

Transféré par

nourdhaouadi73
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Institut Supérieur des Études Technologiques de Béja

Département Technologies de l’informatique

Matière : Atelier Développement Web 1 Niveau : 1ière année TI

Atelier: CSS Suite

Exercice 1 :

Soit le code HTML suivant :


<!doctype html>
<html>
<head>
<title>Positionnement flottant</title>
</head>
<body>
<div class="conteneur">
<div class="box">block2</div>
<div class="box">block3</div>
<div class="box">block4</div>
</div>
</body>
</html>
1. Complétez le code CSS suivant afin d'obtenir le résultat à droite.
div{
border: 1px solid
rgba(0,0,0,.3);
text-align: center;
color:#fff;}
.box{
....................
background: #3498db;
..........: 5px;
height: 40px;}
Remarquez que les 3 blocs sortent de flux de leur parent, et par conséquent on se retrouve avec un
conteneur de hauteur nulle. Pour empêcher le dépassement des flottant afin d'obtenir le rendu
suivant, ajouter overflow:hidden au conteneur parent.

[Link] cette partie, on utilise le document html de la question précédente mais cette fois ci
on va identifier les éléments avec des classes différentes afin de les traiter séparément.
1 .block2{
float: ...........
background: #3498db;
height: 40px; }
.block3{
background: #d35400;
height:60px;}

Page 1 sur 3
2 .block2{
....................
background: #3498db;
height: 40px; }
.block3{
...................
background: #d35400;
height: 40px;}
.block4{
clear:............
background: #1abc9c;
height: 40px;}
3 .block2{
..................
background: #3498db;}
.block3{
float:...........
clear:............
background: #d35400;}
.block4{
...................
background: #1abc9c;}
4 .block2{
...................
background: #3498db; }
.block3{
float:...........
clear:............
background: #d35400;

}
.block4{
float:...........
clear:............
background: #1abc9c;}

Exercice 2 :

Soit le code HTML suivant :


<!doctype html>
<html>
<head>
<title>Les selecteurs complexes</title>
</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>

Page 2 sur 3
<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 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 :

Page 3 sur 3

Vous aimerez peut-être aussi