Enseignant : H.
BEN REBAH Atelier Programmation web 1 ISET de Sfax AU : 2022-2023
2- Créer une feuille de style relative à cette page et modifier la forme
pour avoir :
ISET de Sfax AU : 2022-2023 - Règle de sélecteur body : un fond de couleur rose
Département TI - Règle de sélecteur h1 : les entêtes <h1> centrées de
Technologies de l’informatique couleur vert claire et soulignés.
- Règle de sélecteur ul : puces carrées pour les
Atelier Programmation Web éléments de la liste.
TP - : Les feuilles de style CSS
Exercice n° 2 : Sélecteurs d’id + pseudo éléments
Écrire une page comportant deux paragraphes au format brut et
permettant d’obtenir par CSS le résultat indiqué par la figure 1 (voir
Objectifs du TP annexe). Plus précisément en utilisant des sélecteur d’id. Procéder
pour que :
Se familiariser à utiliser les feuilles de style - Le premier paragraphe soit décalé sur sa première ligne de 1 cm
(par rapport aux autres lignes), entouré d’une bordure double et
Matériels & logiciels utilisés : avec le texte écrit en majuscule ;
- Le second paragraphe commence par une lettre rouge de très
Un micro-ordinateur (PC) grande taille, la première ligne étant en majuscule (mais pas les
Éditeur de texte : bloc note ou Notepad++ autres).
Indication : les pseudo-éléments
Exercice n° 1 : Sélecteurs de Type
p::first-letter { color:yellow; }
1- Écrire une page contenant deux entêtes <h1> avec pour chacune Cette propriété de style permet d’écrire en jaune la première lettre de
d’entre elles une liste non-ordonnée telle que par exemple : chaque élément <p>. Bien entendu il est possible de le faire également
1. Films préfères pour les paragraphes d’une classe donnée (ici la classe est appelée
- Citizen Kane cjaune) comme suit :
- Rois et Reines [Link] ::first-lettre {color :yellow}
- Vendredi 13 Ou un élément précis identifié par son id (ici avec un attribut id dont la
2. Livres préfères valeur est idel.
- Le rouge et le noir #idel :: first-letter{color :yellow;}
- Le choix de souphie
- La chute
1
Enseignant : [Link] REBAH Atelier Programmation web 1 ISET de Sfax AU : 2022-2023
Exercice n° 3 : pseudo-classes Exercice n° 5 : Images
Écrire une feuille de style sui change la couleur des liens en fonction de 1- Positionner une image au centre de la fenêtre de votre navigateur
leur état : comme fond d’une page HTML.
- Italique bleu si le lien n’est pas encore visité. 2- Modifier la question précédente de façon que l’image soit fixe,
- Gras bleu lorsque le lien est survolé par la souris même en cas de défilement de la page.
- Normal vert lorsque le lien a été visite. 3- Écrire une feuille de style qui permette de positionner une image
dans le coin en haut à gauche de votre navigateur, le texte situé sur la
Exercice n° 4 : sélecteurs de classe page sera masqué par cette image.
4- Modifier la feuille de style précédente afin de permettre au texte
1- Écrire une page contenant un tableau contenant des articles et leurs d’être affiché au dessus de l’image.
produits :
Indication : position et Z-index
Article Prix
Pour les 2 premières questions ci-dessus, utiliser les propriétés
Bic 1
background - …. Afin de placer votre image.
Feutre 1.3
Pour les 2 dernières, vous utiliser les propriétés z-index et position
Pochette 0.3
conjointement avec la balise <img> et <p>
Gomme 0.5
2- Écrire une feuille de style de façon à avoir une ligne bleu clair et une Exercice n° 6 : Listes
ligne bleu foncé. (Utiliser les classes).
3- Par ailleurs, lorsque la souris survolera une ligne, les caractères de Écrire une page avec trois niveaux non ordonnées pour lesquelles en
celle-ci seront affichés en gras et elle sera affichée avec un fond blanc. utilisant les styles on obtienne (comme indiqué la figure 2 voir annexe
1)
- Le premier niveau en gras avec des puces rondes.
- Le second niveau en italique avec des disques.
- Le troisième niveau, normal avec des puces carrées.
Indication : les sélecteurs de position
Dans les feuilles de style, on peut définir un style pour une balise
donnée à condition qu’elle se trouve dans une autre balise. On peut
par exemple définir le style pour toutes les balises <ul> comme ceci
2
Enseignant : [Link] REBAH Atelier Programmation web 1 ISET de Sfax AU : 2022-2023
ul { color : red ;} Annexe 1
Mais pour celles qui se trouvent dans une autre balise <ul>, on peut Figure 1 Exercice 2
rajouter ceci.
ul > ul { color : blue}
Cela nous permet de définir le style des balises <ul> de second niveau.
Exercice n° 7 : Tableaux
Écrire une page avec le tableau indiqué dans la figure suivante :
Noté Bien :
- #ffffff : blanc
- #000000 : noir
- #666666 : gris foncé Figure 2 Exercice 6
- #efefef : gris
- #cccccc : gris claire