L3-INFO-SI, L3-MASS-MIAGE, Université Gaston Berger, Saint-Louis Mme Awa DIATTARA DIOP
DEVELOPPEMENT D’APPLICATIONS WEB I
– TP 2 –
L’objectif de ce TP est de vous familiariser avec les bases du langage CSS.
Éléments abordés : Combinaison de sélecteurs
Formatage de texte
Modification des styles des liens
Modification des styles des listes
Mise en page de site web
Exercice 1.
Les sélecteurs suivants sont de quels types ? Quels sont les éléments ciblés par ces sélecteurs :
1. p + span
2. .navigation ul
3. #entete>h1+ul
Exercice 2.
Dans l’arbre ci-dessous, repérez à quels éléments correspondent les sélecteurs suivants :
p>img
ul a
p+h2
p a img
a+a
1
L3-INFO-SI, L3-MASS-MIAGE, Université Gaston Berger, Saint-Louis Mme Awa DIATTARA DIOP
Exercice 3.
Écrivez les règles CSS correspondant aux énoncés suivants :
1. Tous les éléments <a> emboités dans un élément <p>.
2. Tous les éléments <img> appartenant à la classe encadre et placés dans un élément <div>
appartenant à la classe enonce.
3. Tous les éléments <img> dont l'attribut width vaut 300.
4. Tous les éléments <time> dont l'attribut datetime a été défini et qui sont situés dans un
élément <article> appartenant à la classe remarque.
5. Tous les éléments <p> qui sont fils d'un élément <div> de la classe exemple.
Exercice 4.
1. Créez un fichier styles.css dans votre répertoire fichiersCSS.
2. Liez ce fichier CSS à votre page html « exercice3.html ».
3. Proposez des règles de style permettant de modifiez cette page selon les critères suivants :
- Ajouter une couleur de fond (la couleur de votre choix)
o Vous pouvez utiliser la propriété background-color
- Mettez les titres de niveau 1 en rouge et en italique
- Justifiez les paragraphes
- Enlevez le soulignement sur les liens
- Changez la police de caractères du texte « Informations sur le développeur ».
- Augmentez aussi la taille de police.
- Modifiez la couleur des liens
o Mettez les liens en bleu, lorsque la souris survole le lien
o Mettez les liens en rouge lorsqu’ils sont déjà visités
o Mettez en Vert, les liens pas encore visités.
Exercice 5. Modification des types de puces d’une liste
La propriété list-style-type, permet de choisir le type de puce que vous désirons afficher. De base,
il existe trois styles de puces :
disc – La puce par défaut
circle – Une puce ronde mais vide à l’intérieur
square – Une puce carrée
1. Reprenez la page exercice1.html et supprimez les puces sur la première liste.
2. Transformez la deuxième liste de cette page de sorte que les items de premier niveau soient
avec des puces de type cercle ceux de deuxième niveau soient avec des puces de type carré.
Exercice 6. Application de règles de CSS à un code HTML
Soit le code HTML ci-dessous, appliquez ce qui suit :
Un background de couleur noire, une largeur de 500px, un retrait de 5px, et un alignement
centré pour l’élément identifié par "layout".
Alignez le texte à gauche pour la classe "gauche" et à droite pour la classe "droite".
Colorez le texte en blanc pour les éléments h2, p et button.
2
L3-INFO-SI, L3-MASS-MIAGE, Université Gaston Berger, Saint-Louis Mme Awa DIATTARA DIOP
Affecter une couleur bleue au background du bouton
Exercice 7. Création de menu déroulant horizontal centré en CSS
Vous allez travailler la mise en forme de votre barre de navigation pour pouvoir naviguer entre les
différentes pages : exercice1.html exercice2.html et exercice3.html.
Le rendu devrait ressembler à la figure suivante :
Pour cela, vous pouvez procédez comme suit :
- Mettez votre menu dans un conteneur nav
- Annuler les marges (margin et padding)
- Annuler les puces de la liste (avec list-style-type)
- Centrer les éléments de la liste
- Aligner les éléments de la liste (<li>) de façon horizontale. Pour cela vous pouvez utiliser
la propriété display
- Corriger l’espacement des liens en utilisant la propriété margin
- Supprimer le soulignement des liens avec la propriété text-decoration
- Ajouter une couleur d’arrière-plan noire à la liste avec background-color
- Modifier la couleur du texte. Vous pouvez par exemple mettre la couleur blanche
- Ajoutez des arrondis pour autour des texte en utilisant la propriété border-radius
- Proposez un effet au survol des boutons
3
L3-INFO-SI, L3-MASS-MIAGE, Université Gaston Berger, Saint-Louis Mme Awa DIATTARA DIOP
- Proposez un effet pour les liens déjà visités
Exercice 8. Mise en page en CSS
Proposez les codes HTML et CSS permettant d’obtenir la maquette suivante :
Vous pouvez vous aider des consignes suivantes :
Vous pouvez nommer le fichier menu.html
Titrer la page en Accueil
Créez une feuille de style menu_style.css et liez-la à votre page HTML
Utilisez un titre de premier niveau pour afficher le texte « Création d’un menu en HTML
et CSS »
Utilisez un titre de deuxième niveau pour afficher le texte « Menu vertical »
Pour créer le menu (Lien 1, Lien 2, …) utilisez les listes.
Utilisez ensuite le bon conteneur sémantique pour cette liste
Respectez toutes les autres indications qui sont sur la maquette (les couleurs, les polices de
caractères, …
