TP Css

TP _ Feuilles de style (CSS)
On continue dans ce TP à étudier HTML et en particulier la manière de contrôler l'affichage d'une page
(couleur, positionnement, . . . ) à l'aide des feuilles de style.
1 Rappels HTML
Tout d'abord, récupérez-le fichier tp_css.html, et affichez-le avec un navigateur pour comprendre sa structure.
Nous allons commencer par quelques rappels pour compléter cette page html.
Exercice 1 _ Les liens internes
Faites-en sorte que le sommaire soit « cliquable » et renvoie vers le début des chapitres correspondants.
Rappelons ici l'existence de l'élément th qui s'utilise à l'intérieur d'un tableau. Il remplace l'élément td (en
particulier, il se place au même endroit, entre les balises <tr> et </tr>. Il sert, en général, à donner un entête
(table header ) aux colonnes.
Exercice 2 _ Titre des colonnes

Le chapitre 2 de la page tp_css.html présente une table listant des livres avec pour chacun, son titre, son
auteur, son éditeur et son année de parution.
Faites apparaître cette information au-dessus de chacune des colonnes.
Exercice 3 _ Rajout de liens externes

Dans le tableau, rendez les noms des auteurs cliquables pour que leur page sur Wikipedia s'affiche lorsque l'on
clique sur le lien.
Exercice 4 _ Complexifier le tableau

Rajoutez les livres suivants à ce tableau tout en faisant fusionner les cases identiques pour les auteurs et les
éditions.
_ Georges Perec , W ou le souvenir d'enfance, Editions Denoël, 1975
_ Georges Perec, La Disparition. . . .ditions Denoël, 1969
_ JM Coetze , En attendant les barbares, Point Seuil, 1982
Exemple : voire fig ex_tableau.jpg
2 Les feuilles de style

Les feuilles de style ou CSS en anglais (pour Cascading Style Sheets ) sont des documents destinés à contrôler la
manière d'afficher les éléments HTML dans un navigateur. En ce sens, elles sont complémentaires d'une page
HTML, celle-ci décrivant ce qui doit être affiché et les feuilles de style décrivant comment l'afficher.
Une feuille de style consiste en une suite de déclarations de la forme :
sélecteur_1, sélecteur_2, ..., sélecteur_m {
propriété_1: valeur_1;
propriété_2: valeur_2;
...
propriété_n: valeur_n
}
où sélecteur est souvent un simple élément HTML comme body ou h1 (mais nous verrons qu'on peut être plus
précis), où propriété est une propriété CSS (à ne pas confondre avec un attribut d'un élément) permise pour cet
élément et où valeur est une valeur permise pour la propriété concernée. Ces définitions vont expliciter
l'affichage de(s) élément(s) sélectionné(s). Notez les deux points après le nom de la propriété et le point virgule
entre chaque déclaration.
Chaque élément possède ses propres propriétés (par exemple, la propriété list-style pour l'affichage des listes)
mais quelques propriétés peuvent être utilisées avec tous les éléments. Voyons celles qui vont nous servir dans
ce TP :
background-color : permet de spécifier une couleur pour l'arrière plan. Les valeurs peuvent être soit un nom de
couleur (mais il n'en existe qu'une dizaine de prédéfinies) soit une valeur hexadécimale de la forme #xxxxxx où
x est un chiffre hexadécimal (le raccourci #xyz désigne la couleur #xxyyzz).
background-image : Permet de choisir une image pour l'arrière plan.

Les valeurs permises sont url(x) ou url('y'), avec x une url, et y un chemin local.
background-position : Permet de définir la position de l'image dans l'arrière-plan de l'élément sélectionné. Les
valeurs permises sont top, center, right, top center, center center, etc...
color : Permet de définir une couleur pour l'élément sélectionné. Les valeurs permises sont les mêmes que
pour la propriété background-color
font-style : Pour spécifier le style de police. Les valeurs possibles sont normal, italic ou oblique.
text-align : Permet de définir l'alignement horizontal d'un texte. Les valeurs possibles sont left, right, center ou
justify (pour que les marges gauches et droites soient régulières).
margin-left, margin-right, margin-top, margin-bottom : Permet de définir un espace entre l'élément
sélectionné et l'élément qui l'encadre. Les valeurs sont des nombres suivis d'une unité (par exemple cm pour le
centimètre, px pour le pixel, em pour l'unité liée à la taille de la police de l'élément, . . . ).
font-family : Permet de changer de famille de polices, par exemple times, arial,courrier
Applications
Exercice 5 _ Couleur de fond
Créez un fichier style.css et définissez une nouvelle couleur de fond (par exemple la couleur #C8C8C8) pour la
page que vous avez récupérée.
Exercice 6 _ Intégration à une page
Rajoutez la ligne suivante dans l'entête de la page :
<link href="style.css" rel="stylesheet" type="text/css" />. Vérifiez que la couleur de fond est bien appliquée.
Exercice 7 _ Un peu d'air
Pour aérer un peu la lecture d'un document XHTML, on met en général un espace entre les bords de la fenêtre
et le corps du document. Définissez une marge gauche, haute et droite pour le document de façon à ce qu'elle
soit appliquée à tout le contenu de la page.
Exercice 8 _ Liste de sélecteurs
À l'aide d'une seule définition, spécifiez une même couleur pour les éléments h1 et h2.
Le fait de définir des propriétés pour plusieurs éléments en même temps n'empêche pas de rajouter plus loin
dans la feuille de style des définitions pour un élément particulier de la liste.
Rajoutez une définition pour que l'élément h1 soit de plus centré sur la page.
Exercice 9 _ Mise en retrait des titres
Les valeurs de type numérique peuvent être négatives.
Faites-en sorte que les titres de type h2 soient un peu en retrait (vers la gauche de 1cm) vis à vis des autres
éléments.
Exercice 10 _ Police
Choisir la police « courrier » pour les éléments internes du tableau sans modifier celle des titres (en une seule
commande et sans utiliser de sélecteur de classe).
Les sélecteurs de classe

Il est parfois utile de pouvoir définir plusieurs comportements différents pour un même élément.
Pour cela, on utilise des sélecteurs de classe qui sont de la forme élément.nom_de_classe (le corps de la
définition suit les mêmes règles qu'avant). Pour que cette définition s'applique dans le document HTML, il faut
alors rajouter à l'élément élément l'attribut class="nom_de_classe".
Exercice 11 _ Un paragraphe spécial
Définissez deux comportements différents pour l'élément p : l'un général qui justifie les lignes d'un paragraphe,
et un autre spécial qui affiche le texte en rouge. Editez le document HTML pour que cette dernière propriété
soit appliquée à l'avant dernier paragraphe.
Exercice 12 _ Le tableau
On va changer quelque peu l'affichage du tableau :
1. Définissez une nouvelle couleur de fond pour le tableau et décalez-le vers la droite.
2. Définissez une autre couleur de fond pour l'affichage des noms des colonnes.
3. En général, l'affichage des titres de livres se fait à l'aide d'une police italique.
Réalisez cet affichage.
Les sélecteurs de pseudo-classe
La dernière forme de sélecteur que nous verrons dans ce TP concerne celle des pseudo-classes, de la forme
élément : pseudo_classe. Elle est surtout employée pour changer l'affichage des liens dans une page web :
a:link pour les liens non visités, a:visited si l'internaute a déjà cliqué sur ce lien, a:hover lorsque la souris passe
au-dessus du lien et a:active lorsque l'internaute est en train de cliquer sur le lien.
Exercice 13 _ Les liens
Définissez une couleur différente pour chacun des événements ci-dessus et testez le résultat.
Exercice 14 _ Validation
De même qu'il existe un vérificateur pour les pages HTML, il existe aussi un vérificateur pour les feuilles de
style. Rendez-vous sur la page jigsaw.w3.org/css-validator/ pour valider votre feuille ou la corriger s'il y a des
erreurs.
Une fois la page validée, incluez le code html du logo wc3.org en bas de la page.
Classe générique
Il est aussi possible d'écrire une classe générale pour plusieurs sélecteurs. La syntaxe est alors :
.{ propriété_1: valeur_1;
...
propriété_n: valeur_n
}
Exercice 15 _ Classe générique
Ecrivez une classe générique qui va vous permettre de décaler de 10 cm à droite. Utilisez-la sur un paragraphe
ainsi que sur le logo wc3.org.

TP Css

Transféré par

Droits d'auteur :

Formats disponibles

TP Css

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP Css

Transféré par

Droits d'auteur :

Formats disponibles

TP _ Feuilles de style (CSS)

Exercice 2 _ Titre des colonnes

Exercice 3 _ Rajout de liens externes

Exercice 4 _ Complexifier le tableau

2 Les feuilles de style

background-image : Permet de choisir une image pour l'arrière plan.

Les sélecteurs de classe

Vous aimerez peut-être aussi