Utilisation de base du CSS

F. Hémery

2021-2022

Objectif

À définir.

Création d’un projet

Nous allons commencer par créer un nouveau projet.

  1. Créer un répertoire DevWeb/Code/TP_2 qui sera le répertoire racine du projet pour la séance de TP. Dans le répertoire créez :
    • un répertoire images qui contiendra les images
    • un répertoire styles qui contiendra les fichiers de style
    • un répertoire scripts qui contiendra les sources javascript
  2. Créez une page web index.html avec :
    • Le doctype HTML 5.
    • Précisez que le codage des caractères du document utilise l’encodage UTF-8.
    • Le titre “Travaux Pratiques - 2”.
    • Le contenu de la page est en français.

Utilisation des sélecteurs

Manipulation de base des sélecteurs dans le fichier index.html.

  1. Écrivez le sélecteur et le style donnant une couleur rouge et un fond noir aux éléments <h1> et <h3>
  2. Écrivez une classe qui définit un fond jaune et appliquez-la aux éléments <h2> et <p>.
  3. Écrivez une classe spécifique à un élément <code> afin que son texte soit bleu.
  4. Écrivez le sélecteur afin que l’élément dont l’attribut id vaut menu ait un fond rouge.
  5. Écrivez le sélecteur afin que tous les éléments ayant un attribut id aient un texte noir sur fond jaune.
  6. Écrivez le sélecteur afin que les éléments <h1> ayant un attribut title aient un texte bleu, les autres ayant un texte noir.
  7. Écrivez les sélecteurs afin que les paragraphes inclus dans <body> aient un texte gris et que ceux inclus dans <div> aient un texte marron.
  8. Écrivez le sélecteur afin que seuls les éléments <span> enfants de <p> aient un texte bleu, tous les autres ayant un texte noir.
  9. Pour une liste imbriquée sur deux niveaux, écrivez le sélecteur pour que les éléments <li> de premier niveau inclus dans <ol> soient rouges, et que ceux de second niveau soient en vert.
  10. Écrivez le sélecteur pour appliquer un style différent à un élément <li> selon qu’il est inclus dans <ol> ou <ul>.
  11. Écrivez le sélecteur pour que le survol d’un élément <h1> provoque le changement de couleur du texte en rouge.
  12. Écrivez le sélecteur afin que seule la première ligne d’un paragraphe soit en rouge, le reste s’affichant en gris.

Cascade de sélecteurs.

Récupérez le fichier exo1.html et le fichier exo1.css

Exercice basé sur un énoncé proposé par Jean-christophe Routier

  1. Affichez la page exo1.html dans votre navigateur et expliquez le résultat.
  2. En déduire une priorité entre les sélecteurs.
  3. Ouvrez l’inspecteur de style de votre navigateur et visualisez une explication.

Cascade de sélecteurs.

Récupérez le fichier exo2.html et le fichier exo2.css

Exercice basé sur un énoncé proposé par Jean-christophe Routier

  1. Affichez la page exo2.html dans votre navigateur et expliquez le résultat.
  2. En déduire une priorité entre les sélecteurs.
  3. Editez le fichier exo2.css pour visualiser les règles de priorité des sélecteurs.
  4. Ouvrez l’inspecteur de style de votre navigateur et visualisez une explication.
  5. Modifiez un sélecteur pour afficher SPAN5 et SPAN6 en bleu.

Utilisation des boites

On distingue deux types d’éléments, les éléments blocs (block) et les éléments en ligne (inline).

  1. Créez un fichier exo3.html et associez-lui un fichier de style exo3.css.

  2. Dans le fichier exo3.html créez un titre <h1> avec 3 ou 4 mots.

  3. Dans le fichier exo3.html créez 5 éléments <div> avec un attribut class qui vaut ‘un’, ‘deux’, etc… et qui contient 100 mots pour le premier et 50 pours les suivants.

  4. Dans chacun des éléments <div> créez un élément <span> contenant 3 à 5 mots.

  5. Créez un sélecteur pour le titre <h1> avec une couleur #007bff et marge de 2rem (À quoi correspond l’unité rem).

  6. Créez un sélecteur pour les éléments <div> avec :

    • Une taille de caractères de 1.1 rem.
    • Une marge de 2rem en haut et en bas et qui centre l’élément en largeur.
    • Un padding de 1rem.
    • Une largeur de 70% de la largeur de la fenêtre du navigateur.
    • Une hauteur minimum de 12% de la hauteur de la fenêtre du navigateur
    • Une bordure de couleur #aa2233 de 1 pixel d’épaisseur.
    • Une ombre de couleur #93a1a1 (voir la documentation pour utiliser box-shadow).
    • Une couleur de fond #dddddd.

  7. Créez un sélecteur pour les éléments <div> avec une taille de caractères de 1.4 rem pour les <div> paires

    Cela doit être équivalent à :

  8. Créez un sélecteur pour les éléments <span> avec :

    • une couleur de texte rouge.
    • une largeur de 250px, une marge de 1rem et un padding de 2rem
    • Une bordure de couleur deeppink de 1 pixel d’épaisseur en pointillé.

  9. Est-ce que la marge, le padding sont pris en compte ?

  10. Que faut-il faire pour que cela soit pris en compte ? et faites la modification.

Cela doit être équivalent à :

Exercice basé sur un énoncé proposé par Jean-Marc Lecarpentier

Les fichiers dont vous aurez besoin se trouvent dans l’archive exo4.zip.

  1. Modifiez le fichier exo4.html pour qu’il utilise le fichier exo4.css.
  2. Placez le texte du fichier exo4.txt dans le fichier exo4.html en utilisant les balises HTML qui conviennent.
  3. Votre fichier doit passer le test W3C.
  4. Modifiez le fichier exo4.css pour obtenir approximativement le résultat suivant (les images se trouvent dans le répertoire images de l’archive) :

Utilisation des modules de layout

En utilisant les modules de placement, vous allez réaliser le gabarit suivant :

  1. Créez un fichier exo5.html qui contient les blocs qui correspondent au gabarit :
    1. une image
    2. un menu avec 4 entrées
    3. un article avec un titre et 3 paragraphes de 200 mots.
    4. une explication de l’article avec 3 paragraphe de 20 mots.
    5. un pied de page
  2. Créez un fichier exo5.css qui sera associé au fichier exo5.html.
  3. Utilisez les modules grid et flexbox pour réaliser le gabarit.
  4. Ajoutez du style pour mettre en valeur le contenu de chaque bloc (font, couleur, fond, …).

Le résultat final doit être équivalent à :