lesson

1.1 Table des matières

Bienvenue au TP-3.

Pour votre progression, c'est très important de finir le TP précédent avant de commencer celui-ci.

Il est vivement recommandé de faire ce TP en ayant le cours sous les yeux. Si vous n'avez pas la version papier, vous pouvez ouvrir la version PDF dans une autre fenêtre (ou onglet) de votre navigateur.

2. Révisions

2.1 Révisions

Dans ces exercices nous allons réviser quelques concepts vus dans les TP précédents.

C'est essentiel que ces concepts révisés vous paraissent simples et que vous répondiez sans hésitation. Si ce n'est pas le cas, prenez le temps de relire le cours et de refaire les TP précédents. Ca ne vaut pas le coup de faire les TP plus compliqués si vous n'avez pas encore bien assimilé les notions précedentes.

2.2 CSS

Dans une page html on retrouve ceci:
<p>bla bla</p>
<p id="principal">bli bli</p>
<p>blo blo</p>

Que faut il écrire dans la feuille de style (CSS) pour que le texte "bli bli" apparaisse soit écrit en rouge sans que "bla bla" et "blo blo" soient changés ?

(répondez en une seule ligne)

[ ]*#principal *{ *color *: *red *;? *} *

2.3 css / html - class

Que faut-il écrire à la place du "?" pour que le texte "bla bla" apparaisse en bleu

<p ? >bla bla</p>

on suppose qu'on a dans le fichier css:
.important { color: blue; }

[ ]*class *= *(['"]|")important(['"]|") *

2.4 style inline

En général les déclarations de style sont faites dans un fichier css externe comme "exemple.css"
Dans certaines situations, on peut vouloir définir le style d'une balise directement dans sa déclaration.

Que faut-il écrire à la place du "?" pour que le texte "bla bla" apparaisse en bleu

<p ? >bla bla</p>

on suppose qu'on n'a pas de fichier css:
(dans le doute, regardez le cours-1)

[ ]*style *= *(['"]|") *color: *blue;? *(['"]|") *

2.5 espaces et fins de lignes

Les espaces et fins de lignes en html sont traités de manière particulière qui peut surprendre les débutants.

Sur combien de lignes sera affiché le texte suivant:

<p>ceci
est
un
texte</p>

2.6 espaces et fins de lignes

Les espaces et fins de lignes en html sont traités de manière particulière qui peut surprendre les débutants.

Combien d'espaces seront affichés entre le "b" et le "c"
(on suppose que les "_" sont des espaces)

<p>a_b____c</p>

2.7 pre

Les espaces et fins de lignes en html sont traités de manière particulière qui peut surprendre les débutants.

Que faut-il écrire à la place du "?" pour que ce texte soit affiché sur 4 lignes?

<?>ceci
est
un
texte</?>

[ ]*pre *

2.8 body

Parmi les balises suivantes, lesquelles peuvent-être parents de la balise <body>

html
head
p
title
h1

2.9 html

Parmi les balises suivantes, lesquelles peuvent-être fils de la balise <html>

body
head
title
h1

2.10 head

Parmi les balises suivantes, lesquelles peuvent-être fils de la balise <head>

title
body
html
h1

2.11 termes syntaxe css

Une déclaration dans un fichier css ressemble à ceci:

X
{
Y1: Z1;
Y2: Z2;
...
}

Comment s'appelle "X"

[ ]*s(é|e)lecteur *

2.12 termes syntaxe css

Une déclaration dans un fichier css ressemble à ceci:

X
{
Y1: Z1;
Y2: Z2;
...
}

Comment s'appelle "Y" (Y1,Y2...)

[ ]*propri(é|e)t(é|e)s? *

3. Révisions - trouver les erreurs.

3.1 Révisions - trouver les erreurs.

Dans les exercices suivants de révision, il s'agit de trouver des erreurs dans du html.
(xhtml 1.0)

3.2 trouver l'erreur

A quelle colonne (donnez un numéro) se trouve la première erreur:

<a href=toto.html>lien</a>
0000000001111111111222222222233333333334444444444
1234567890123456789012345678901234567890123456789

(norme xhtml 1 strict)

8 : Oui, il manque un guillemet
9 : Oui, il manque un guillemet

3.3 trouver l'erreur

A quelle colonne (donnez un numéro) se trouve la première erreur:

<P>bla <strong>bli</strong> bla</P>
0000000001111111111222222222233333333334444444444
1234567890123456789012345678901234567890123456789

(norme xhtml 1 strict)

2 : Oui, le p doit être en minuscule

3.4 trouver l'erreur

A quelle colonne (donnez un numéro) se trouve la première erreur:

<p>bla <img src="t.png" alt="t"> bla</p>
0000000001111111111222222222233333333334444444444
1234567890123456789012345678901234567890123456789

(norme xhtml 1 strict)

31 : Oui, la balise img n'est pas fermée
32 : Oui, la balise img n'est pas fermée

3.5 trouver l'erreur

A quelle colonne (donnez un numéro) se trouve la première erreur:

<p>bla<h3>mon titre</h3> bla</p>
0000000001111111111222222222233333333334444444444
1234567890123456789012345678901234567890123456789

(norme xhtml 1 strict)

7 : Oui, un titre h3 ne peut pas être à l'intérieur d'un paragraphe. (un élément block ne peut pas être dans un contexte inline)
8 : Oui, un titre h3 ne peut pas être à l'intérieur d'un paragraphe. (un élément block ne peut pas être dans un contexte inline)

3.6 trouver l'erreur

A quelle colonne (donnez un numéro) se trouve la première erreur:

<ul><li>ligne1<li>ligne2</ul>
0000000001111111111222222222233333333334444444444
1234567890123456789012345678901234567890123456789

(norme xhtml 1 strict)

14 : Oui, la première balise li n'est pas fermée.
15 : Oui, la première balise li n'est pas fermée.
16 : Oui, la première balise li n'est pas fermée.

3.7 trouver l'erreur

A quelle colonne (donnez un numéro) se trouve la première erreur:

<strong>bla <img src="t.png"/> bla</strong>
0000000001111111111222222222233333333334444444444
1234567890123456789012345678901234567890123456789

(norme xhtml 1 strict)

28 : Oui, l'attribut "alt" est oublié, alors qu'il est obligatoire, il permet de donner des informations aux navigateurs ne pouvant pas comprendre les images (aveugles, moteurs de recherche...).
29 : Oui, l'attribut "alt" est oublié, alors qu'il est obligatoire, il permet de donner des informations aux navigateurs ne pouvant pas comprendre les images (aveugles, moteurs de recherche...).

3.8 trouver l'erreur

A quelle colonne (donnez un numéro) se trouve la première erreur:

<body>bla <strong id="i1">bla</strong>toto</body>
0000000001111111111222222222233333333334444444444
1234567890123456789012345678901234567890123456789

(norme xhtml 1 strict)

7 : Oui, on ne peut pas mettre du texte directement dans body. Le texte doit être, par exemple, dans un paragraphe.

3.9 trouver l'erreur

A quelle colonne (donnez un numéro) se trouve la première erreur:

<p id="x">bla</p><div id="x"><p>bli</p></div>
0000000001111111111222222222233333333334444444444
1234567890123456789012345678901234567890123456789

(norme xhtml 1 strict)

27 : Oui, les id doivent etre uniques, ici le id "x" apparait 2 fois.
8 : Oui, les id doivent etre uniques, ici le id "x" apparait 2 fois.

4. Sélecteurs

4.1 Sélecteurs

Dans les exercices suivants nous allons voir des sélecteurs plus compliqués.

Pour commencer faisons une petite révision de la notion d'arbre, de "fils", de "parent"...

Rappels de cours

4.2 Rappel : arbre

Rappel : arbre des éléments html

La notion d'arbre (avec des ancêtres et des descendants) est très utilisée dans les sélecteurs CSS.
Pour comprendre cette notion il faut raisonner sur l'arbre formé par les éléments html d'un document.

Voici un exemple d'arbre pris du TP précédent:

4.3 selecteurs - descendants

Sélecteurs composés

Prennons l'exemple suivant:
<ul id="liste1">
<li>abc</li>
<li>def</li>
</ul>

<ul id="liste2">
<li>xyz</li>
<li>rst</li>
</ul>

Supposons qu'on veuille changer uniquement la couleur des "li" de la deuxième liste.
li {color: red;}
ne marche pas, car elle change la couleur des "li" dans les deux listes.

On peut utiliser un sélecteur composé de deux sélecteurs simples:
#liste2 li {color: red;}
L'espace entre "#liste2" et "li" est très important: il veut dire "descendant de".

Donc: "#liste2 li" veut dire "tous les li qui sont descendants de #liste2

4.4 descendants - 1

Quel(s) élément(s) correspondent au sélecteur suivant?
li a

17
6
16
18
20
21
19
9
12
aucun

4.5 descendants - 2

Quel(s) élément(s) correspondent au sélecteur suivant?
ul a

17
19
21
16
18
20
15
6
9
12
aucun

4.6 descendants - 3

Quel(s) élément(s) correspondent au sélecteur suivant?
#grostitre a

6
5
aucun

4.7 descendants - 4

Quel(s) élément(s) correspondent au sélecteur suivant?
img p

aucun
8
11
13
23

4.8 descendants - 5

Quel(s) élément(s) correspondent au sélecteur suivant?
.auth p img

11
13
aucun
4
8
23

4.9 descendants - 6

Quel(s) élément(s) correspondent au sélecteur suivant?
#menu .actif

21
aucun
15
16
17
18
19
20

4.10 selecteurs - composition

Compositions de sélecteurs (suite)

On peut aussi composer des sélecteurs en les accolant. Regardons ça sur un exemple:

<h1 class="actu">Mon titre</h1>
<p class="actu">
<strong class="actu">abc</strong> defg <a href="...">un lien </a>
</p>

Par exemple, imaginons qu'il y ait de nombreux types d'éléments (des "p" des "h1" ...) ayant tous une même classe "actu". On pourrait alors sélectionner uniquement les paragraphes ayant la classe "actu" comme ceci:
p.actu { color: red;}

(remarquez: il n'y a pas d'espace entre "p" et ".actu")

"p.actu" veut dire : les éléments à la fois de type "p" et appartenant à la classe "actu"

et ensuite on pourrait continuer, par exemple en spécifiant une relation de descendance:

p.actu a { color: red;}

qui veut dire : les éléments "a" contenus dans des paragraphes des classe "actu" seront en rouge

Ce genre d'approche est très utilisée en pratique.

4.11 composition -1

Quel(s) élément(s) correspondent au sélecteur suivant?
a.actif

21
6
9
12
aucun
17
19

4.12 composition -2

Quel(s) élément(s) correspondent au sélecteur suivant?
ul.actif

aucun
21
15

4.13 composition -3

Quel(s) élément(s) correspondent au sélecteur suivant?
p.auth

aucun
8
4

4.14 composition -5

Quel(s) élément(s) correspondent au sélecteur suivant?
ul#menu

15
aucun

4.15 composition -6

Quel(s) élément(s) correspondent au sélecteur suivant?
.auth a.externe img

13
aucun
8
12
4
11

4.16 composition -7

Quel(s) élément(s) correspondent au sélecteur suivant?
body.auth h2

5. Priorité des sélecteurs et héritage

5.1 Priorité des sélecteurs et héritage

Dans les exercices suivants nous allons voir comment des règles des style peuvent s'appliquer indirectement à des éléments et ce qu'il se passe lorsque plusieurs règles différentes s'appliquent à un même élément.

Rappel cours:

5.2 héritage

Héritage

Certaines propriétés, comme la couleur du texte et la taille des caractères, sont hérités. C'est à dire, si on spécifie cette propriété à un élément, tous ces descendants hériteront de cette propriété.

Pour savoir si une proprieté est herité ou pas, il faut consulter sa documentation.

Ce comportement est logique et vous l'avez déjà rencontré en TP.

Créez un fichier html contenant le code suivant (n'oubliez pas d'ajouter toutes les entêtes nécessaires):

<p>Bonjour ceci est <strong>très important</strong>. Voila.</p>

Ajoutez une feuille de style et attribuez la couleur de texte verte ("green") à l'élément "p"

Quelle est la couleur du texte dans l'élément strong ?

Inspectez l'élément strong avec firebug.

Vous remarquerez que dans la colonne "style", firebug vous dit "Inherited from p"

5.3 conflits

Conflits

Reprenons l'exemple précédent

<p>Bonjour ceci est <strong>très important</strong>. Voila.</p>

dans la feuille de style, attribuez la couleur de texte "green" à "p" et "red" à "strong"

De quel couleur est le strong ?

Conclusion: l'héritage ne se fait que si le style de l'élément n'est pas spécifié

Maintenant faisons que le "strong" de l'exemple soit de classe "essai":

<p>Bonjour ceci est <strong class="essai">très important</strong>. Voila.</p>

Dans votre style, écrivez les deux lignes suivantes:
strong { color: yellow;}
.essai { color: red;}

De quel couleur est le strong ?

Inspectez l'élément strong avec firebug. Comment apparait le style contenant color: yellow;

Conclusion: le sélecteur de classe"." est prioritaire sur le sélecteur de type d'élément (ici "strong")

Maintenant ajoutons un id au "strong" :

<p>Bonjour ceci est <strong id="monid" class="essai">très important</strong>. Voila.</p>

Dans votre style, écrivez les deux lignes suivantes:
#monid { color: yellow;}
.essai { color: red;}

De quel couleur est le strong ?
Inspectez l'élément strong avec firebug.

Conclusion: le sélecteur de id est prioritaire sur le sélecteur de classe