TP M1106 n°1 - Partie 2 sur 2 - Durée 2h

Habillage CSS 3 : Textes - Titres - Paragraphes

Objectifs

• Dans cette deuxième partie de TP, vous allez travailler sur l'habillage CSS 3 de textes, titres et paragraphes HTML 5.

Rappels

• Vous devez déposer en fin de TP sur Moodle une archive zip de votre répertoire TP1 contenant vos contenus Web.

Données de ce TP

• Toutes les données de ce TP (fichiers, images, ...) se trouvent dans le fichier zip TP12_donnees.zip.

Habillages de texte en CSS

• Créez une nouvelle page page2.html aux standards HTML 5 et CSS 3 contenant un titre de niveau 1, un titre de niveau 2 et trois paragraphes de plusieurs lignes.
• Associez à cette page à une feuille de style page2.css.
Aide

<link rel="stylesheet" href="page2.css"/>

• Faites apparaitre les titres de niveau 1 en gras, italique avec un texte de couleur bleu sur fond jaune (Oui ici on va voir comment faire des mises en forme de texte en CSS sans soucis de l'harmonie des couleurs...).
Aide

h1{
  font-weight: bold;
  font-style: italic;
  color: blue; 
  background-color: yellow;
}

• Encadrez en pointillé rouge avec une épaisseur de 3 pixels les titres de niveau 2. Ajoutez aussi la syntaxe css permettant de mettre une police Trebuchet MS, de centrer le texte. Ajoutez une marge interne de 10px, et une marge externe de 20px.
Aide

h2{
  border: 3px dotted red;
  font-family: "Trebuchet MS";
  text-align: center;
  margin: 20px; 
  padding: 10px;  
}

• Créez 3 classes de paragraphe telles que :
• Première classe de paragraphe : fond rouge, police verdana, taille de texte .6em.
• Deuxième classe de paragraphe : première lettre en gras bleu, première ligne en italique.
• Troisième classe de paragraphe : 18pt avec un interligne (distance entre deux bases de lignes, line-height) de 30pt. Police serif : font-family:serif; font-size:18pt; line-height: 30pt;
Aide

p.ptype1 {
  background-color: red;
  font-family: verdana;
  font-style: .6em;
}

p.ptype2:first-line {font-style: italic;}
p.ptype2:first-letter {font-weight: bold; color: Blue;}

p.ptype3 {
  font-family:serif; 
  font-size:18pt; 
  line-height: 30pt;
}

Rappel sur le fonctionnement des classes CSS. Vous utilisez l'attribut class="nomdelaclasse" en HTML, et .nomdelaclasse dans le fichier CSS. Si la classe ne porte que sur un type de balise vous mettez typedebalise.nomdelaclasse dans le fichier CSS comme sélecteur.

• Insérez un lien dans deux paragraphes.
• Ajoutez la syntaxe css pour que le premier lien lorsque non visité soit non souligné et bleu. Au moment où la souris survole ce lien doit grossir, devenir vert, et toutes les lettres doivent être en majuscule (on pourra appeler cette classe de lien « hulk » par exemple...)
Aide

a.hulk:link {text-decoration: none; color: blue;}
a.hulk:hover {text-transform: uppercase; color: green; font-size:1.5em;}

• Ajoutez la syntaxe css pour que le deuxième lien soit habillé ainsi :
• non visité : il ne se distingue pas du texte (aucune décoration distinctive);
• au survol : lien en gras bleu souligné sur fond jaune;
• au clic : lien en gras rouge non souligné sur fond argenté;
Aide

a.deuz:link {text-decoration: none; color: black; font-style: normal; font-weight: normal;}
a.deuz:hover {color: blue; text-decoration: underline;  background-color: yellow; font-weight: bold; font-style: normal;}
a.deuz:active {color: red; text-decoration: none; background-color: silver; font-weight: bold; font-style: normal;}

• Testez la pseudo classe ::after permettant d'ajouter quelque chose après un sélecteur (Complétez vos fichiers page2.html et page2.css avec cet exemple). Par exemple l'ajout d'un contenu après un paragraphe de la classe test

p.test::after {
    content: " - Quelque chose ajouté à tous les paragraphes de classe test";
}

• Ajoutez une propriété pour que ce texte ajouté soit de couleur bleue.
• Vous allez être amenés à utiliser dans vos feuilles de style css plusieurs classes. Il peut être intéressant de vouloir appliquer des règles communes à plusieurs d'entre elles. Pour ce faire vous allez pouvoir utiliser le sélecteur [class*="texteCommunAuClasse"]. Docs w3schools et mozilla. Par exemple, le code suivant met tous les div dont la classe contient la chaîne "test" avec une couleur d'arrière plan argent :

div[class*="test"] {
    background: silver;
} 

• Ajoutez la règle précédente à votre fichier page2.css, puis ajoutez le code suivant dans votre fichier page2.html pour voir le résultat.

<p class="test"> Un paragraphe de la classe test </p>
<div class="testun"> <p> Un paragraphe dans un div de la classe testun </p></div>
<div class="deux"> <p> Un paragraphe dans un div de la classe deux </p></div>
<div class="trois_test"> <p> Un paragraphe dans un div de la classe trois_test </p></div>

• D'autres propriétés intéressantes sur les sélecteurs d'attributs à étudier ici.

• Ajoutez maintenant le code ci-dessous à votre page HTML

<h1>La cigale et la fourmi</h1>

<div id="fable">
  <p>La cigale , ayant chanté</p>
  <p>Tout l'été,</p>
  <p>Se trouva fort dépourvue</p>
  <p>Quand la bise fut venue.</p>
  <p>Pas un seul petit morceau</p>
  <p>De mouche ou de vermisseau</p>
  <p>Elle alla crier famine</p>
  <p>Chez la fourmi sa voisine,</p>
  <p>La priant de lui prêter</p>
  <p>Quelque grain pour subsister</p>
  <p>Jusqu'à la saison nouvelle</p>
  <p>"Je vous paierai, lui dit-elle,</p>
  <p>Avant l'oût , foi d'animal,</p>
  <p>Intérêt et principal ."</p>
  <p>La fourmi n'est pas prêteuse ;</p>
  <p>C'est là son moindre défaut.</p>
  <p>"Que faisiez-vous au temps chaud ?</p>
  <p>Dit-elle à cette emprunteuse.</p>
  <p>Nuit et jour à tout venant</p>
  <p>Je chantais, ne vous déplaise.</p>
  <p>- Vous chantiez ? j'en suis fort aise.</p>
  <p>Eh bien : dansez maintenant." </p>
</div>

• Puis ajoutez l'habillage CSS pour que la fable soit habillée comme ci-dessous (Vous ne devez rien toucher au code HTML).



• Ajoutez un effet affichant chaque vers avec un bleu pâle (#4080FF) lorsque la souris le survole (Vous ne devez rien toucher au code HTML).

div#fable {
	/* bordure de 2px continue rouge */
	/* couleur de texte bleue */
	/* couleur de fond argent */
	/* alignement centré du texte */
	/* 25% de marge gauche : margin-left: 25%;*/
	/* 25% de marge droite : margin-right: 25%;*/
	/* Hauteur de ligne 8px : line-height: 8px; */
}

div#fable > p:hover{
	/* la bonne couleur de texte au survol */
}

Habillage de titres et de paragraphes

• Habillez la page habillageTitre.html, située dans les données de ce TP, de façon à obtenir la page illustrée sur la figure ci-dessous (les bords bleus sont les bords de la fenêtre de navigation, donc il ne faut pas les mettre en css 😉).



• Ne pas modifier la page habillageTitre.html, il suffit de construire les règles CSS adéquates dans le fichier habillageTitre.css.
• La police pour toute la page est verdana.
• Les images se trouvent dans les données de ce TP.
• La couleur de fond des titres de niveau 1 est #ffc.

* {

/* police verdana pour tout le document */

}

h1 {

/* ajout de la couleur de fond */
/* réglages pour image d'arrière plan (propriété background) */
/* réglages de marge interne (propriété padding) */

}

p.exemple {

/* réglages pour image d'arrière plan (propriété background) */
/* réglages de marge interne (propriété padding) */

}

Appelez l'enseignant pour valider vos pages.

Quizz CSS w3schools

• Faites le test de connaissances CSS du w3schools situé ici : Test CSS w3schools (cliquez sur l'encadré bleu "Start the CSS Quiz").

Finished! Hurrah! 🤟⚡️Si vous avez fini avant la fin, aidez les autres à finir aussi :-) N'oubliez pas de déposer votre archive sur Moodle pour ce TP.

IUT Béthune - Département R&T

Dernière mise à jour : Octobre 2020

© David MERCIER