Aller au contenu principal

TP2 - CSS

Objectifs
  1. Comprendre la structure des pages web ;
  2. Manipuler différentes balises ;
  3. Modifier le style des pages.
Memento de balises

Un mémento sur les balises à utiliser ainsi que leurs attributs est disponible sur ce lien.

Memento CSS

Un mémento des propriétés CSS est disponible sur ce lien.

Exercices de prise en main​

Exercices à télécharger
  • Télécharger ici l'archive des exercices.
  • Dans le dossier Téléchargements, faire un clic droit sur le fichier, puis décompresser (ou extraire tout).
  • Mettre le dossier extrait dans le dossier SNT (et créer dedans un dossier Web si ce n'est pas déjà fait).

Le dossier contient 3 dossiers d'exercices (exercice 1, exercice 2, exercice 3), et chacun de ces dossiers d'exercice contient 2 fichiers : un fichier HTML et un fichier CSS.

Les pages HTML sont déjà complétées, il ne faudra modifier que les fichiers CSS.

Modifier un fichier CSS
  • Rechercher dans la barre de Windows le logiciel Notepad++ et l'exécuter (cliquer dessus) ;
  • Dans le logiciel, tout en haut à gauche, cliquer sur Fichier ;
  • Dans le menu, cliquer sur Ouvrir ;
  • Rechercher dans la fenêtre qui s'ouvre le dossier avec tous les exercices ;
  • Ouvrir l'un des dossiers d'exercice ;
  • Double-cliquer sur le fichier CSS (il s'appelle style1, style2, style3).

Exercice 1​

Objectif de l'exercice
  • Modifier la position du texte ;
  • Modifier des couleurs de texte ;
  • Utiliser des pseudo-classes.
  1. Aligner le titre de niveau h1 à droite.
  2. Aligner les titres de niveau h2 au centre.
  3. Changer la couleur du second titre de niveau h2 (il dispose d'un id) en jaune.
  4. Changer la couleur des liens en bleu.
Pseudo-classes

Le CSS dispose de ce que l'on appelle des pseudo-classes. Ce sont des propriétés qui permettent de sélectionner des états spécifiques de certaines balises. On peut par exemple définir un code CSS spécifique pour un élément que l'on survole (hover), que l'on clique (active), pour des liens visités (visited) etc.
Elles s'écrivent de cette façon :

selecteur:pseudoClasse {
    propriété : valeur;
}
  1. Aligner à gauche les éléments h1 lorsqu'on les survole.
  2. Mettre en vert le texte du 2ème paragraphe lorsqu'on clique dessus.
  3. Changer la couleur des liens visités en rouge.

Exercice 2​

Objectif de l'exercice
  • Créer et modifier des bordures ;
  • Changer des couleurs de fond ;
  • Utiliser des tailles et positions ;
  • Mettre des éléments côtes à côtes.
  1. Mettre le fond de la page en noir.
  2. Changer la couleur de tout le texte en blanc.
  3. Aligner au centre les éléments h1.
  4. Ajouter pour bordure de l'élément h1 un trait rouge de 2px.
  5. Changer la couleur de fond de l'élément h1 en bleu.
Visuel

On peut remarquer que, visuellement, l'élément h1 utilise toute la longueur de la page.
Toutes les balises prennent une ligne entière sur la page, ce qui peut empêcher des éléments de se mettre côte à côte, avoir de très longues bordures etc.

  1. Appliquer sur l'élément h1 une largeur de 20%.
Visuel

Maintenant, l'élément est réduit à une taille maximale de 20% de la taille de l'écran. Le texte est centré sur cette boîte. Il faut donc déplacer l'élément à droite, c'est-à-dire lui donner une marge à gauche.

  1. Appliquer sur l'élément h1 une marge à gauche de 40%.

On souhaite maintenant mettre les 2 paragraphes ainsi que les images côtes à côtes. Dans le code HTML, on peut remarquer que chaque paragraphe et image se situent dans une div dont la classe est bloc. L'objectif va donc être d'appliquer un style pour modifier la position de ces éléments.

  1. Sur la classe bloc, appliquer un type d'affichage (display), et voir lequel pourrait être utilisé.
  2. Mettre une largeur de 45% sur cette classe (cela permettra d'avoir un espace entre les éléments).

On souhaite maintenant rajouter l'image disponible sur ce lien : https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRt1mLXHsGeBwbqBkgPWlqG4kFFf6l3-GKHOw&s, et l'aligner avec les 2 autres images.

  1. Rajouter une nouvelle div avec un paragraphe et l'image, et modifier le CSS pour que l'image soit alignée.
  2. Rajouter une pseudo-classe sur une image qui permet, lors d'un clic sur celle-ci (active), d'avoir une bordure de 10px, de couleur verte, et avec des traits en forme de tirets.

Exercice 3​

Objectif de l'exercice
  1. Créer des menus déroulants ;
  2. Manipuler l'application de style sur des balises spécifiques.
  1. Aligner le titre de niveau h1 au centre.
  2. Sur les balises ul :
    • Enlever les points des listes ;
    • Appliquer un padding et un margin de 0 (pour bien positionner) ;
    • Appliquer la propriété display : flex (permet d'orienter la liste en ligne).
  3. Sur les éléments li, appliquer une position relative ainsi qu'une marge à droite de 2%.
Appliquer des styles sur des éléments suivant leur position

En CSS, on a la possibilité d'appliquer des styles sur des balises, suivant leur position dans la page. On appelle ces sélections des combinateurs.
On ne va manipuler que les combinateurs descendants, c'est-à-dire appliquer des styles sur des balises respectant une certaine hiérarchie de balises.

Le sélecteur descendant s'écrit de cette façon :

selecteur_parent selecteur_enfant{
    propriété1 : valeur1 ;
    ...
}

On dispose, pour exemple, du body suivant :

<body>
    <p>Ceci est un paragraphe contenant <a href="#">un lien</a>.</p>
    <a href="#">Ceci est un lien en dehors du paragraphe.</a>
</body>

Si on utilise le style suivant :

a {
    color : red;
}

La couleur rouge sera appliquée à toutes les balises a de la page (celle du paragraphe, et celle en dehors).

Si on ne souhaite appliquer un style spécifique qu'aux balises a situées dans une balise p, on écrit ceci :

p a {
    color : red;
}

Ici, cela signifie que la couleur rouge sera appliquée à tous les a situés dans un p, donc le premier lien dans l'exemple, mais pas le second.

  1. Faire, sur tous les liens des balises li :
    • Enlever le soulignage (décoration) ;
    • Mettre la couleur du texte en noir ;
    • Mettre un display : block (permet un affichage sous la forme d'un bloc) ;
    • Mettre un padding : 10px 20px (crée un espace de 10px pour la marge du haut et bas, et 20px pour la marge gauche et droite);
Visuel

Normalement, ceci devrait apparaitre sur la page :
Les éléments de la liste sont alignés en noir, et les éléments de la sous-liste (Réseaux sociaux) sont en ligne pour l'instant, sous l'élément "Réseaux sociaux".
Le lien tout en bas n'a pas de style qui lui est appliqué.

  1. Rajouter la pseudo-classe sur les éléments de la liste qui, lorsque l'on survole ces éléments, change la couleur du texte en orange, et rajoute une bordure rouge de 1px sous l'élément (border-bottom).
Visuel

Cela doit donner ceci au survol :

On va maintenant appliquer des styles pour modifier les menus déroulants.

  1. Sur le sous-menu (identifiable par sa classe deroulant), appliquer les propriétés suivantes :
    • top : 100% (on s'assure qu'il se mette au bon endroit) ;
    • left : 0 (on met bien les éléments à gauche) ;
    • min-width : 150px (la largeur doit être au minimum de 150 pixels) ;
    • box-shadow: 0px 1px 2px #CCC (on crée une ombre autour de la fenêtre déroulante) ;
    • Une position (à vous de voir, entre absolute, fixed, relative et static laquelle permet de bien positionner) ;
    • Une propriété pour faire disparaitre la fenêtre (display).
  2. Appliquer la propriété display : block sur la classe deroulant, lors d'un survol de la souris sur un élément de la liste du menu (cela doit faire apparaitre le sous-menu).
  3. Sur les éléments li du sous-menu, donner également la propriété display : block.

Pour finir, on va améliorer visuellement les éléments des sous-menus, pour voir lesquels sont survolés.

  1. Lors du survol des liens des sous-menus, enlever la bordure rouge.
  2. Lors du survol des éléments des sous-menus, mettre comme couleur de fond whitesmoke.
  3. Pour rajouter le symbole "▼", on va utiliser la propriété CSS suivante : 
    li:has(.deroulant) > a::after{
        content: " ▼";
        font-size: 12px;
    }
    • li:has(.deroulant) → Sélectionne uniquement les <li> contenant un <ul class="deroulant"> ;
    • > a::after → Ajoute le symbole après le lien <a> ;
    • content: " ▼"; → Insère le symbole directement après le texte ;
    • font-size: 12px; → Ajuste la taille de la flèche pour qu'elle soit bien intégrée.