Ce site est en cours de reconstruction certains liens peuvent ne pas fonctionner ou certaines images peuvent ne pas s'afficher.

stacks

accueil cours counter_1 Réseau counter_2 (X)HTML counter_3 CSS counter_4 CSS Extra counter_4 Travaux pratiques counter_4 Sitographie

10. Développement Web - TP N°10

Résultat attendu :

Notez que la police d'affichage
a été modifiée en Verdana

10.1. Objectif

On désire utiliser quelques pseudo-classes CSS.

10.1.1. Partie HTML

Créer une page HTML et la sauvegarder dans un fichier nommé pseudo_classes.html.

La page est composée d'une balise section à l'intérieure de laquelle on trouve :

une titre h2 de libellé "Pseudo Classes"
une balise div qui contient qui contient douze paragraphe numérotés "Lorem ipsum dolor 1" à "Lorem ipsum dolor 12"
un label de libellé "Focus on me !" et d'attribut lang de valeur en-US
d'un paragraphe de libellé "Texte caché"
d'un paragraphe de libellé "Visible Text" et d'attribut lang de valeur en-US
d'un textarea de 5 lignes par 20 colonne et d'identifiant my_text et de contenu "Bonjour le monde !"
un titre h2 de libellé "Poésie"
un titre h3 de libellé "When all the laughter dies in sorrow" et d'attribut lang de valeur en-US

10.1.2. Partie CSS

Créer une fichier nommé pseudo_classes.css et le lier à la page HTML correspondante.

Pour ce fichier on veut disposer des caractéristiques suivantes :

les paragraphes du div doivent posséder une marge gauche de 100 pixels
les paragraphes 2, 5, 8 et 11, doivent être de couleur de texte verte, on utiliser :nth-child
un autre règle doit colorier en texte rouge les paragraphes 3, 7 et 11

On note donc que le paragraphe 11 est premièrement colorié en vert, puis en rouge. Au final il apparaîtra en rouge, puisque c'est la dernière règle qui prévaut.

10.1.2.a Texte anglais

Tous les textes en anglais qui sont identifiés par l'attribut lang fixé à la valeur en-US doivent comporter :

une couleur de fond wheat
un padding de 10 pixels dans toutes les directions
une bordure de 2 pixels en maroon

10.1.2.b Label

Le paragraphe qui se trouve juste après le label ne doit pas être affiché.

Par contre, si on fait passer la souris au dessus du label, le paragraphe est affiché.

10.1.2.c Textarea

Lorsque l'on se place dans le textarea, sa couleur de fond pase au rose.

10.1.2.d h2

Le titre h2 est de couleur royalblue s'il est suivi d'un titre h3.