Scribd
Importer
17 vues4 pages

Introduction au CSS et Sélecteurs HTML

Ce document présente une activité d'introduction au CSS, visant à enseigner les bases de la mise en page et l'utilisation des sélecteurs. Il contient plusieurs exercices pratiques, notamment sur l'alignement vertical, la différence entre sélecteurs d'identifiant et de classe, ainsi que la stylisation de tableaux avec des sélecteurs universels. Les consignes incluent la création de divs et de tableaux avec des styles spécifiques pour illustrer ces concepts.

Transféré par

moad4hatim
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
17 vues4 pages

Introduction au CSS et Sélecteurs HTML

Ce document présente une activité d'introduction au CSS, visant à enseigner les bases de la mise en page et l'utilisation des sélecteurs. Il contient plusieurs exercices pratiques, notamment sur l'alignement vertical, la différence entre sélecteurs d'identifiant et de classe, ainsi que la stylisation de tableaux avec des sélecteurs universels. Les consignes incluent la création de divs et de tableaux avec des styles spécifiques pour illustrer ces concepts.

Transféré par

moad4hatim
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

Sites Web statiques

Activité N °7 :
Introduction au CSS
Compétences visées :
 Comprendre les bases de la mise en page avec CSS.
 Utiliser les sélecteurs pour cibler des éléments HTML.

1. Exercice 1 : Alignement vertical (vertical-align)


a) Objectif :

Travailler avec la propriété vertical-align pour positionner correctement des éléments inline comme des
images et du texte.

2. Exercice 2 : Sélecteurs d'identifiant (#) vs Sélecteurs de classe (.)


a) Objectif :

Différencier l'utilisation des sélecteurs d'identifiant et des sélecteurs de classe en CSS.

b) Énoncé :

1. Crée deux divs : l'un avec un identifiant #uniqueDiv et l'autre avec une classe .commonDiv.
2. Applique des styles spécifiques à chacun et crée un troisième élément ayant à la fois un identifiant
et une classe pour tester la spécificité.

c) Consignes :

 Le div avec l'identifiant doit avoir un fond bleu.


 Le div avec la classe doit avoir un fond vert.
Page 1 sur 4
Sites Web statiques

 Le troisième div qui possède les deux doit avoir un fond rouge (spécificité de l'identifiant).

3. Exercice : Stylisation complexe d'un tableau avec le sélecteur universel (*)

a. Objectif :

Utiliser le sélecteur universel (*) pour appliquer des styles à tous les éléments. L'exercice inclut
l'application de styles globaux ainsi que des styles spécifiques sur les lignes et colonnes du tableau.

b. Énoncé :

1. Crée un tableau HTML contenant des lignes (<tr>), des cellules de titre (<th>), et des cellules de
données (<td>).
2. Utilise le sélecteur universel (*) pour appliquer des styles de base (comme les bordures et la couleur
du texte) à tous les éléments du tableau.

c. Consignes :

 Utilise le sélecteur universel (*) pour appliquer une couleur de texte et une bordure à tous les
éléments du tableau.
 Applique un fond gris clair aux cellules de titre (<th>).
 Applique un style particulier à la première et à la dernière colonne du tableau.
 Applique un style particulier à la première ligne de données dans le tableau.

Page 2 sur 4
Sites Web statiques

4. Enoncé de l'Exercice 1 : Utilisation des Combinateurs et Sélecteurs en CSS


a) Objectif :

Dans cet exercice, vous allez apprendre à utiliser différents combinateurs et sélecteurs CSS pour cibler et
styliser des éléments spécifiques dans une page HTML, sans utiliser de classes.

b) Consignes :

1. Téléchargez ou copiez le fichier HTML ci-dessous dans votre éditeur de texte :

Page 3 sur 4
Sites Web statiques

Page 4 sur 4

Vous aimerez peut-être aussi