Atelier 2 CSS3

Atelier 2
: CSS 3 Mme Hadhami ISSAOUI
Atelier 2 : CSS3
Exercice 1
1. Le code CSS suivant est-il correct ? si non corriger le.
p.hover_example:hover span
{
color: red;
}
body {color: blue; }
h1 {color: green; }
.h1 {color: blue; }
span{color: #14F2AC; }
2. Appliquez-le au code html suivant.

<html>
<body>
<h1>informatique pour le web <br>Session de Janvier</h1>
<p class="hover_example">
Le but est de <span>réunir sur une même page un maximum de propriétés
CSS.</span>
Pour la plupart, ce sont des propriétés que nous avons vues dans le cours.
Ce sont généralement des propriétés <span>faciles à utiliser.</span>
</p>
</body>
</html>
3. Décrivez l’effet de l’application du code CSS sur le code html?
NB : la couleur 14F2AC correspond au vert claire
Exercice 2
Soit le code HTML suivant :
<head>
<title>Ex2</title>
<meta charset=UTF-8" />
</head>
<body>
<h1> Ceci est mon premier titre </h1>
<p> et ceci mon premier paragraphe </p>
<ol>
<li> point numéro 1 </li>
</ol>
<ul>
<li> Une chose </li>
<li> Encore une chose </li>
Atelier 2 : CSS 3 Mme Hadhami ISSAOUI
</ul>
<table border="1">
<tr>
<th> Nom de la balise </th>
<th> Utilisé pour définir </th>
<th>balise auto-fermante</th>
</tr>
<tr><td> p </td><td> un paragraphe </td><td>non</td></tr>
<tr><td>img</td><td> une image </td><td>oui</td></tr>
<tr><td>ol</td><td> une liste ordonnée </td><td>non</td></tr>
<tr><td>ul</td><td> une liste non-ordonnée </td><td>non</td></tr>
<tr><td> li </td><td> un item d’une liste </td><td>non</td></tr>
<tr><td> h1 </td><td> un titre de niveau 1 </td><td>non</td></tr>
<tr><td> a </td><td> un lien hypertexte </td><td>non</td></tr>
<tr><td>br</td><td> un saut de ligne </td><td>oui</td></tr>
</table>
</body>
</html>
Créer un fichier CSS, appelé "testStyle.css", afin de modifier la page HTML correspondante
au code ci-dessus. Modifier l’apparence de la page Web selon les critères suivants :
– Ajouter une couleur de fond (jaune par exemple)
– Mettre les titres de niveau 1 en rouge et en italique
– Justifier les paragraphes
– Supprimer les puces dans les listes non ordonnées
– Mettre les items des listes ordonnées et non ordonnées en gris
Modifier également le fichier HTML de l’exercice précédent grâce à ce fichier CSS.
Exercice 3
Créer un lien vers le site de l’ISET sous forme d’un bouton comme indiqué dans la figure
Suivante :
La couleur de fond est la couleur #aaa et celle des bords la couleur #555. Faire en sorte que
lors du clic sur le lien, les couleurs soient inversées.
Exercice 4
Réalisez la page illustrée par la figure ci-dessous superposant une image, du texte un
graphique de type histogramme. Indications :
 récupérez l'image : <IMG SRC="image" HEIGHT="600" WIDTH="800">

 pour les barres des histogrammes, fabriquez 3 images de dimension 1x1 pixel et de
couleurs respectives rouge, vert et bleu (les histogrammes).
Exercice 5
Définissez le fichier style.css associé à mapage.html afin de la représenter de la manière
suivante :
Entête : largeur
600px à gauche
40px en haut
Navigation à
droite 750px en
haut 130px
Pieds largeur 600

à gauche 40px en
bas 300px
Article Section à gauche 40px
en haut 120px
N.B. : - La police utilisée pour « La page » est « Adobe Garmond Pro » taille 24px
- La police utilisée pour « d’accueil » est « Calibri» taille 24px
- La police utilisée pour « Ma page » est « Adobe Garmond Pro » taille 20px
- La police utilisée pour la navigation est « Arial » » taille 18px
- La police utilisée pour le reste du texte est « Times New Roman » » taille 16px
Exercice 6
Réalisez le tableau suivant :
Exercice 7
Réalisez le formulaire suivant :
Balise Style
form marge en haut:10px
marge à gauche:350px
largeur:450px
espacement:15px
couleur d’arrière plan:#92cd5c
polices : Georgia, "Times New Roman", Times, serif
taille:14px
coins arrondis:10px pour les 4 coins
legend couleur du texte: #384313
taille: 16px
gras
fieldset pas de bordure
label Italique
textarea,select,input couleur d’arrière plan:#e4f9a6
pas de bordure
polices: Georgia, "Times New Roman", "serif"
taille:12px
espacement: 5px
coins arrondis : 10px pour les 4 coins
li Bordure : 2px solid #e3ebc3
couleur d’arrière plan : #b9cf6a
espacement: 5px
marge en bas : 2px
coins arrondis : 10px pour les 4 coins
submit couleur d’arrière plan: #384313
pas de bordure
couleur du texte : #ffffff
polices: Georgia, "Times New Roman", Times, serif
taille : 18px
ombre : 0 1px 1px #000000
alignement centre du texte
marge à gauche : 200px
mettre les caractères en majuscule
Lors du passage de couleur d’arrière plan: #1e2506
la souris sur submit curseur forme de la main
ombre : 0 1px 1px #c0d576
https://www.pixelcrea.com/book-freelance/ressources-gratuites/memo-css3/

Atelier 2 CSS3

Transféré par

Droits d'auteur :

Formats disponibles

Atelier 2 CSS3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Atelier 2 CSS3

Transféré par

Droits d'auteur :

Formats disponibles

Atelier 2

: CSS 3 Mme Hadhami ISSAOUI

Atelier 2 : CSS3

2. Appliquez-le au code html suivant.

Soit le code HTML suivant :

 récupérez l'image : <IMG SRC="image" HEIGHT="600" WIDTH="800">

Pieds largeur 600

Vous aimerez peut-être aussi