ED 2 : Feuilles de style CSS (Cascading Style Sheets)

Exercice 1 - Motivation

  1. Les balises HTML possèdent un nom et une liste d'attributs valués (par exemple <a href="adresse">, nom a, attribut href). En utilisant l' attribut bgcolor de la balise body, et l'attribut color de la balise font, modifiez le document "Cinéma de quartier" du dernier ED pour le faire apparaître avec un fond jaune et un texte de couleur verte (voir ici les codes de couleur). Il n'est pas nécessaire de s'occuper des éventuels tableaux de votre document.
  2. Faites un lien hypertexte de ce document vers une nouvelle page, contenant un texte quelconque et des liens hypertextes. Cette page doit suivre la même charte graphique que le document précédent.
  3. Après réunion des graphistes du cinéma, vous devez modifier les documents pour que le fond soit finalement blanc, et le texte en bleu. Effectuez ces modifications.
  4. Si votre site contient n pages, combien de pages faut-il modifier pour répercuter ces changements de la charte graphique, en gardant cette technique de gestion des couleurs ?

Exercice 2 - Feuilles de styles

  1. Refaites une des pages de l'exercice précédent en utilisant une balise style dans la balise head. Le texte doit être en bleu sur fond gris, et les liens hypertextes en rouge sur fond noir. Inspirez-vous de l'exemple suivant :
       ...
    <head>
    <title>Mon style</title>
    <style type="text/css">
    body {
    color: purple;
    background-color: #d8da3d }
    </style>
    </head>
    ...
  2. Faites de même mais avec une feuille de style à part, liée à votre document comme dans l'exemple suivant :
        <html>
    <head>
    <title>Mon style, expatrié</title>
    <link rel="stylesheet" href="mystyle.css">
    </head>
    • Inspirez-vous de la feuille de style associée aux pages des EDs.
  3. Faites une nouvelle feuille de style pour le changement de charte graphique demandé par les graphistes. Si toutes les pages de votre site utilisent la technique précédente, combien de modifications de pages faut-il effectuer pour mettre en oeuvre une nouvelle charte graphique ?

Exercice 3 - Classes et feuilles de styles

  1. Ajoutez un nom de personne dans votre document, ainsi qu'un lien hypertexte de type mailto (exemple : mailto:jean.dupuis@maison.fr).
  2. On souhaite différencier graphiquement les liens concernant une personne des autres liens. Les liens généraux doivent être en bleu, les liens sur des personnes en vert (ne pas définir de couleur de fond). Définissez une classe de liens CSS et appliquez la dans votre document (voir ici).
  3. Définir une classe important pour ce qui est important (couleur de fond de texte en rouge, toutes balises confondues). Utilisez la balise < div > pour délimiter une zone de votre site considérée comme importante. Vérifiez que le style s'applique à plusieurs types de balises (paragraphes, liens, etc.).
  4. Si un lien hypertexte est imbriqué dans une section importante, quel style lui est-appliqué ? Pourquoi ? Qu'ajouter pour lui faire adopter un style d'une de vos deux classes ?