TP3 –langage CSS
- CSS = design : Permet de séparer contenu et présentation
1. Différentes façons d’utiliser CSS
Inline:
<p style="color: red;">Texte rouge</p>
Interne:
<style>
p { color: blue; }
</style>
Externe:
<link rel="stylesheet" href="[Link]">
Sélecteurs essentiels:
Type Exemple Description
Balise p { color: blue; } Tous les paragraphes
Classe .important { color: Tous les éléments avec
orange; } class="important"
Id #titre { color: L’élément avec id="titre"
purple; }
Descendant nav-ul-li-a { } Lien dans un menu
2. Propriétés CSS pour cette séance
- Couleurs : color, background-color
- Polices : font-family, font-size, font-weight, text-align
- Marges et paddings : margin, padding
- Largeur et hauteur : width, height
3. utilisation des flexbox
Flexbox sert à aligner des éléments sur une seule ligne ou une seule colonne.
On l’utilise quand on veut :
- Mettre des éléments côte à côte
- Centrer un élément
- Espacer des boutons
- Créer une barre de navigation
Exercice 1—Travail demandé :
Préparer un fichier HTML
Nous avons donc un conteneur qui contient un ensemble d’éléments, grâce au
flexBox, il est possible d’organiser leur agencement dans le bloc conteneur. Prenons
pour exemple ce code : Un conteneur contenant 3 éléments.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TP flexbox</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div id="conteneur">
<div style="background-color:red">Element 1</div>
<div style="background-color:yellow">Element 2</div>
<div style="background-color:green">Element 3</div>
</div>
</body>
</html>
Créer une page [Link] contenant ce code. Afficher le résultat sur un navigateur.
Préparer un fichier CSS
L’affichage de ce code empile les blocs les uns au-dessus des autres (la div est de type
blocs). Modification des paramètres Dans le fichier CSS :
Créer une page [Link] contenant ce code :
#conteneur{
display: flex;
Quel changement s'est produit ?
Pour choisir la direction, on utilise la propriété flex-direction :
#conteneur{
display: flex;
flex-direction: column;
Regarder le résultat sur le navigateur.
Liste des options possibles pour la propriété flex-direction :
● Row : organisé sur une ligne
● Column : organisé sur une colonne
● Row-reverse : organisé sur une ligne dans l’ordre inverse
● Column-reverse : organisé sur une colonne dans l’ordre inverse
Testez les différentes options.
Replaçons-nous dans la situation par défaut avec un conteneur limité à 300px.
#conteneur{
width:300px;
border:solid 1px;
display: flex;
Rallongez les textes "Element 1", "Element 2" ou "Element 3" de la page HTML. Le
conteneur (en particulier sa largeur) est visible, car il est encadré. Lorsque la somme
des largeurs des éléments est plus grande que sa largeur donc les éléments débordent
du conteneur.
Pour gérer le comportement en cas de manque de place on dispose de la propriété
flex-wrap
#conteneur{
width:300px;
border:solid 1px;
display: flex;
flex-wrap: wrap;
Liste des options possibles pour la propriété flex-wrap :
● Nowrap : pas de retour à la ligne (il s’agit de la valeur par défaut)
● Wrap : les éléments passent à la ligne s’il n’y a pas suffisamment de place.
● Wrap-reverse : les éléments passent à la ligne s’il n’y a pas suffisamment de
place dans le sens inverse.
L'alignement
Pour la gestion de l’alignement selon l'axe principal, on utilise la propriété
justify-content.
Testez le code suivant :
#conteneur{
width:300px;
border:solid 1px;
display: flex;
flex-wrap: wrap;
justify-content : space-around
Liste des options possibles pour la propriété justify-content :
● flex-start : aligner au debut
● flex-end : aligner à la fin
● center : aligner au centre
● space-between : occuper tout l’espace disponible avec un espacement entre les
blocs
● space-around : occuper tout l’espace disponible avec un espacement autour des
blocs
Pour l’alignement sur le second axe
On utilise la propriété align-items.
#conteneur{
width:300px;
border:solid 1px;
display: flex;
flex-wrap: wrap;
justify-content : space-around;
align-items : flex-start
Liste des options possibles pour la propriété justify-content :
● stretch : les éléments sont étirés sur tout l’axe (valeur par défaut)
● flex-start : aligner au debut
● flex-end : aligner à la fin
● center : aligner au centre
● baseline : aligner sur la ligne de base
Testez les différentes options.
Exercice 2—Travail demandé :
Une université souhaite développer une interface web pour :
1. Présenter l’emploi du temps des étudiants
- Créer un tableau représentant un emploi du temps hebdomadaire.
Contraintes obligatoires :
● Utiliser rowspan pour fusionner verticalement les cellules (exemple : un cours
de 3h).
● Utiliser colspan pour les en-têtes.
● Ajouter :
○ <thead>
○ <tbody>
○ <caption>
● Mettre en évidence les cours pratiques avec une classe CSS spécifique.
2. Mise en place d’un système d’inscription en ligne
Dans cette partie, vous devez concevoir un formulaire d’inscription structuré et conforme aux
standards HTML5.
Le formulaire devra obligatoirement être organisé à l’aide des balises <fieldset> et <legend> afin
de regrouper logiquement les informations et améliorer la lisibilité.
1) Validation et attributs HTML5 avancés
Le formulaire doit exploiter les mécanismes de validation native HTML5 ainsi que des
attributs spécifiques permettant de renforcer le contrôle des données saisies.
a) Champ input type="text"
Ce champ devra intégrer les attributs suivants :
● minlength
● maxlength
● size
● pattern
● placeholder
● readonly
● spellcheck
● autocorrect
● autofocus
● list associé à une balise <datalist>
b) Autres types d’inputs à intégrer
Le formulaire devra également contenir les champs suivants :
● email
● password avec une expression régulière (pattern) garantissant un niveau de
sécurité minimal
● number avec définition des bornes (min et max)
● date
● file
● radio (organisés en groupes cohérents)
● checkbox
● range
● color
● search
2) Exigences fonctionnelles supplémentaires
Le formulaire devra respecter les contraintes suivantes :
● Intégration de champs obligatoires à l’aide de l’attribut required
● Ajout de messages d’aide explicatifs pour guider l’utilisateur
● Organisation des champs en sections logiques (informations personnelles, sécurité,
préférences, etc.)
● Présence d’un bouton de soumission (submit) et d’un bouton de réinitialisation
(reset)
3. Affichage des statistiques des inscriptions
Dans cette partie, vous devez concevoir un tableau HTML permettant de présenter des
indicateurs statistiques relatifs aux inscriptions.
Le tableau devra afficher les éléments suivants :
● Le nombre d’étudiants par filière
● Le taux de réussite
● La moyenne générale
Contraintes techniques
Le tableau doit respecter les exigences suivantes :
● Utilisation de l’attribut rowspan afin de regrouper verticalement les niveaux
d’études (Licence et Master).
● Intégration d’un pied de tableau à l’aide de la balise <tfoot> pour afficher un résumé
global ou des totaux.
● Structuration correcte avec <thead>, <tbody> et <tfoot> afin de garantir une
organisation sémantique conforme aux standards HTML5.
4. Conception d’une interface moderne et responsive
Dans cette partie, vous devez concevoir une interface moderne, cohérente et
adaptable aux différentes tailles d’écran en respectant les standards HTML5 et CSS3.
Vous devez obligatoirement créer un fichier CSS externe nommé [Link] et le lier
correctement à votre page HTML.
A. Exigences générales de mise en forme
Votre feuille de style devra impérativement intégrer les éléments suivants :
1) Reset CSS personnalisé
Mettre en place un reset CSS afin d’harmoniser l’affichage sur les différents
navigateurs.
2) Polices personnalisées
Utiliser des polices personnalisées (Google Fonts autorisé).
3) Variables CSS
Définir des variables CSS dans le sélecteur :root, par exemple :
:root {
--primary-color: #1e3a8a;
--secondary-color: #f59e0b;
--radius: 12px;
L’interface devra exploiter ces variables afin d’assurer une cohérence graphique.
B. Maîtrise des sélecteurs CSS avancés
Votre travail devra démontrer l’utilisation des sélecteurs suivants :
1) Sélecteurs d’attributs
Exemple :
input[type="text"]
2) Pseudo-classes
● :focus
● :valid
● :invalid
● :checked
● :nth-child()
● :not()
3) Pseudo-éléments
● ::before
● ::after
● ::placeholder
Le code doit être structuré, lisible et organisé de manière professionnelle.
C. Mise en page avancée
1) Conception du header avec Flexbox
Réaliser un en-tête structuré en utilisant exclusivement Flexbox.
Le header devra contenir :
● Un logo positionné à gauche
● Une barre de navigation alignée à droite
● Un bouton d’action spécial placé à l’extrémité du header
L’alignement et la répartition des éléments doivent être assurés par les propriétés
Flexbox (display: flex, justify-content, align-items, gap, etc.).
2) Mise en page du formulaire avec CSS Grid
Le formulaire doit être structuré à l’aide de CSS Grid.
Exigences :
● Organisation en deux colonnes sur écran large
● Adaptation automatique en une seule colonne sur mobile
● Gestion cohérente des espacements et de l’alignement
D. Intégration d’effets visuels avancés
L’interface doit intégrer des effets modernes améliorant l’expérience utilisateur.
● Appliquer des transitions fluides sur les éléments interactifs, par exemple :
transition: all 0.3s ease-in-out;
● Créer et utiliser une animation personnalisée avec @keyframes, telle que :
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
● Ajouter des effets d’ombre avec box-shadow et text-shadow afin d’améliorer
la profondeur visuelle.
E. Responsive Design
Rendre l’interface entièrement responsive à l’aide des Media Queries, par exemple :
@media (max-width: 768px) {
/* adaptation mobile */
Les adaptations doivent concerner :
● La navigation
● Le tableau
● Le formulaire