petite introduction html - pseudo-elements4
P e t i t e I n t r o d u c t i o n a u x
L a n g a g e s H T M L / X H T M L :
L e s P s e u d o - é l é m e n t s .
Programmation Internet - P o u r D é b u t a n t
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 995624714 -
902263541 - 813572818
La dernière révision de ce texte est
disponible sur CD.
Les pseudo-éléments permettent de générer et
d’afficher des contenus qui ne sont pas dans le corps
du document (texte, numérotation automatique,
listes). On les fait en principe précéder d’un double
deux-points, mais la plupart des user agents s’en
sortent avec un seul double point, et même W3C
utilise un seul deux-points.
Par exemple ce code HTML :
Son code-source pour le copier-coller :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple de qqs pseudo-
elements</title>
<style type="text/css">
p{background:#dfd}
p .d::before {
content: open-quote "p. d:before (w
space)" close-quote;
}
p.d::before {
content: open-quote "p.d:before (wo
space)" close-quote;
}
*::before{
color:red;
font-size:130%;
font-style:italic
}
</style>
</head>
<body>
<p class="d">P1 Ce Texte, avant SPAN.
<span class='d'>Ce Texte, dans SPAN.
</span>
Ce Texte, après SPAN.
</p>
<p>P2 Ce Texte, avant SPAN.
<span class="d">Ce Texte, dans SPAN.
</span>
Ce Texte, après SPAN.
</p>
<p id="d">P3 Ce texte, entièrement dans P
ID="d". </p>
<p>P4 <b>Note:</b>
Il est préférable de toujours spécifier
< !DOCTYPE html>.
</p>
</body>
</html>
L’HTML ci-dessus s’affiche comme ceci :
Les pseudo-éléments les plus courants sont :
1. :before et :after ou mieux, ::before et ::after.
Un « content » est le contenu associé à un élément
dans le document source . Le contenu d’un élément
peut être : du texte (littéral), un nombre ou un sous-
élément dont il est dès lors parent (tout élément sauf
le root ou racine a un parent => Document tree ou
arbre/hiérarchie du document). Certains éléments
n’ont pas de contenu, ils sont appelés « empty » =
élément vide.
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
1
/
34
100%
