docptt intro html pseudo-elements4
download 
Plainte Transcription
ptt intro html pseudo-elements4
Petite Introduction aux
Langages HTML/XHTML :
Les Pseudo-éléments.
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 pseudoelements</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.
Le contenu à afficher par un pseudo-élément est
spécifié par sa propriété content, qui peut avoir les
valeurs suivantes :
1. Valeurs littérales :
a. <string> Chaîne de caractères
b. <uri> URL (ressource externe)
c. <counter> Fonctions (counter() ou
counters()) restituant les valeurs en
cours de tous les compteurs ayant ce
nom, séparées par la valeur de son
paramètre string ci-dessous, et dans le
style spécifié par style (décimal par
défaut).
Syntaxe :
i. « counter(name) » ou
ii. « counter(name, style) » pouvant
s’écrire sous deux formes :
1. « counter(name, string=liststyle-type) » ou
2. « counter(name, string=liststyle-type, style) ».
2. attr(X)
3. open-quote | close-quote | no-open-quote |
no-close-quote
Guillemets d’ouverture et de fermeture selon
le format (style) spécifié dans la propriété
« quotes ».
no-open-quote et no-close-quote n’affichent
rien (empty strings), mais incrémentent
(décrémentent) le niveau d’emboîtement des
guillemets (quotes).
4. inherit
list-style-type : Tous les styles sont autorisés ('disc',
'circle', 'square', 'none').
Exemples :
blockquote::before { content: counter(cptr,
hebrew) ". " }
h1::before { content: counter(titre, upperroman) " - " }
cite::after { content: " [" counter(genies,
none) "] " }
div.note::before { content: counter(div, disc)
" " }
p::before { content: counter(det, upper-latin)
}
Remarques :
1. La valeur initiale de content est une chaîne vide
(empty string).
2. La valeur de content s’applique à tous les médias :
Pour les contenus média-sensibles (médias
spécifiques, p.e. texte littéral pour tout groupe de
média, images pour seulement les groupes visuels
+ bitmap, fichiers son pour seulement le groupe
de médias aural), la déclaration du content doit se
faire dans les règles pour @media.
« Responsive Web Design » : Pour que par
exemple une séquence audio soit émise
automatiquement à la fin du chargement d’une
page Web, on peut utiliser le « Media Querie »
(requêtes de media) suivant :
@media aural {
body:after { content: url("URL de l’audio ") }
}
Le media-query / règle @media « @media
aural » renferme TOUS les styles destinés au
media :
@media print {
#menu, #footer, aside {
display:none;
}
body {
font-size:1em;
color:black;
background: url(img.png) right center norepeat; }
}
ul li em {
padding-left: 30px;
}
Une media query accepte des opérateurs logiques :
and (et), only (seulement), not (non), « , » (ou).
À l’importation :
<link rel="stylesheet" media="screen and
(min-width: 200px) and (max-width: 340px)"
href="handheld.css" type="text/css" />
Dans un style :
@media only screen and (min-width: 200px)
and (max-width: 340px) , (max-width:
1151px) {
.bloc {
display:block;
clear:both;
}
}
Notez que les expressions de @media sont entre
parenthèses.
@media screen and (min-width: 200px){}
Maintenant analysons rapidement notre premier
code HTML ci-dessus :
<!DOCTYPE html> (balise ouverte) est nécessaire, il
indique au « user agent » (navigateur) la nature du
document, HTML.
<style></style> est la zone de définition des styles.
1. p {background:#dfd}
définit tous les paragraphes avec le fond défini
par la propriété background.
2. p .d::before {
content: open-quote "p. d:before (w space)"
close-quote;
}
* définit les propriétés de ce qui doit être
généré devant (before) tout élément HTML
contenu dans un paragraphe (p) quel que soit
son niveau d’imbrication dans le paragraphe
(notez la présence d’espace entre « p » et
« .d ») et ayant la class="d". Notez aussi les
double deux-points devant le before pour
l’indiquer en tant que pseudo-élément.
* Les éléments SPAN dans P1 & P2 dans le
code ci-dessus répondent à cette condition :
notez le (w space = avec espace = with space) :
.
* Notez que le texte généré, en rouge, se
trouve bien devant le texte contenu dans
SPAN.
3. p.d::before {
content: open-quote "p.d:before (wo space)"
close-quote;
}
* définit les propriétés de ce qui doit être
généré devant (before) tout paragraphe
(élément HTML p) ayant la class="d" (notez
l’absence d’espace entre « p » et « .d »).
* Le paragraphe P1 dans le code ci-dessus
répond à cette condition : notez le (wo space =
sans espace = without space) :
.
* Notez que le texte généré, en rouge, se
trouve bien devant P1.
4. *::before{
color:red;
font-size:130%;
font-style:italic
}
* indique que tout élément (*) comportant un
pseudo-élément ::before doit avoir un texte en
rouge d’une taille 1,3× et en italique.
* Le paragraphe P1 ainsi que les SPAN dans P1
& P2 répondent à cette condition.
* Rien dans P3 et P4 ne répond à cette règle :
<html lang="fr"> (ligne 2) indique la langue du
format automatique des guillemets :
1. Le français donne :
mais pas avec
tous les user agents.
2. L’anglais donne :
FORMATAGE DES GUILLEMETS POUR L’ÉLÉMENT
HTML « Q » :
Pour l’élément (balise) q, on peut aussi définir
l’apparence du guillemet, avec la propriété quotes.
Voici les guillemets avec leur style par défaut :
<style>
q:before { content: open-quote }
q:after
{ content: close-quote }
</style>
<body>
<p>Dites <q>toujours <q>MERCI <q>en <q>toute
et <q>toute</q> circonstance</q> dans</q>
vie</q></p>
</body>
Ce code s’affiche comme ceci :
Pour définir d’autres styles par défaut pour les paires
de guillemets (quotes) automatiques dans l’élément
« q » selon le niveau d’imbrication des quotes, on fait
ceci :
<style>
q:before { content: open-quote }
q:after
</style>
{ content: close-quote }
<body>
<p>Dites <q>toujours <q>MERCI <q>en <q>toute
et <q>toute</q> circonstance</q> dans</q>
vie</q></p>
</body>
Avec l’affichage suivant :
On peut définir le style des paires de quotes en
fonction de la langue définie dans la balise <html> :
<HTML lang="en">
<HTML lang="fr">
<HTML lang="no">
...
Exemple :
<html lang="fr">
<head>
<title>Les « Guillemets » (quotes)</title>
<style>
q:lang(en) { quotes: '"' '"' "'" "'" }
q:lang(fr), q:lang(no) {
quotes: "«" "»" "<" ">"
}
</style>
</head>
<body>
<p>Les <q>guillemets</q>autour de ce texte
</body>
</html>
Les pseudo-éléments permettent de créer des listes
numérotés, avec la propriété-fonction « counter ».
Notez « counter » au singulier.
<style>
ol { counter-reset: c_name 3}
li { display: block }
li:before { content:
"Note " counter(c_name,upper-roman) " : ";
counter-increment: c_name
}
</style>
<body>
<ol>
<!-- Réinitialise c_name à 3 -->
<li>Un Item
<!-- Incremente c_name (= 4) -->
<li>Un autre Item
<!-- Incremente c_name (= 5) -->
</ol>
</body>
Affichage :
Les pseudo-éléments permettent aussi de créer des
listes numérotés complexes du genre 2.1.3. Cela est
rendu possible par le fait que les « counters »
redéfinies dans un niveau imbriqué crée une
copie/instance d’elle qui garde dans ce niveau la
valeur (la chaîne de caractères) dans ::before parent.
Notez « counters » au pluriel.
<style>
ol { counter-reset: c_name }
li { display: block }
li:before {
content: "_" counters(c_name, ".") ": ";
counter-increment: c_name;
}
</style>
<body>
<ol>
<li>item
<ol>
<li>item
<li>item
<li>item
<ol>
<li>item
</ol>
<ol>
<li>Item
</ol>
<li>item
</ol>
<li>item
<ol>
<li>item
</ol>
<li>item
<li>item
</ol>
<ol>
<li>item
<li>item
</ol>
</body>
Affichage :
Nous avons parlé ci-dessus de « display:marker » qui
réserve une place (block) entre autres pour les listes.
Un exemple de son utilisation :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.0//EN">
<html lang="fr"
style="background:hsla(253 , 97% , 23%,
0.05)">
<head>
<title>List avec markers</title>
<style type="text/css">
ol {
counter-reset: cptr;
}
li { display: block }
li::before {
display: marker;
marker-offset: 3em;
content: counter(cptr, upper-roman) "* ";
counter-increment: cptr;
width: 7em;
text-align: right;
}
</style>
</head>
<body>
<ol>LIST DS MARKER.
<li> Primo.
<li> Secundo.
<li> Tertio.
</ol>
</body>
</html>
Affichage :
Pour avoir automatiquement un titre suivi d’une
petite définition générée sur la même ligne, puis le
développement sur les autres lignes, on peut utiliser
le code suivant :
<style>
h5 { display: inline }
h5:after { content: " : " }
p#pi { display:inline }
p:before { content: "* " }
</style>
<body>
<h5>LES MOTARDS</h5>
<p id="pi">Ils sont appelés chez nous WEWA
<p>N'importe quoi d'autre sur les WEWA
<h5>LES PILOTES</h5>
<p id="pi">représentent aussi chez nous les
chauffeurs
<p>N'importe quoi d'autre sur les Pilotes
</body>
Ce code de 379 bytes peut être réduit à 338 bytes
comme ceci avec en plus moins d’acrobaties (hacks) :
<style>
h5 { display: run-in }
h5:after { content: " : " }
p:before { content: "* " }
</style>
<body>
<h5>LES MOTARDS</h5>
<p>Ils sont appelés chez nous WEWA
<p>N'importe quoi d'autre sur les WEWA
<h5>LES PILOTES</h5>
<p>représentent aussi chez nous les
chauffeurs
<p>N'importe quoi d'autre sur les Pilotes
</body>
Les deux codes s’affichent exactement comme ceci:
« display:run-in » permet de placer dans un même
bloc l’élément qui le contient et l’élément qui suit
directement (adjacent à) ce dernier comme s’ils
étaient tous deux de type « inline ».
« display:compact » les traite comme chacun étant
de type block.
En quelque sorte, « compact » est au « block » ce
que « run-in » est au « inline ».
Quant à l’alignement des éléments dans la liste, on
utilise « list-style » :
<style>
ol { list-style:outside upper-roman; }
ol.c { list-style:inside decimal-leadingzero}
</style>
<body>
<ol>LIST (OUTSIDE)
<li>Un Item
<li>Un autre Item
</ol>
<ol class="c">LIST (INSIDE)
<li>Un Item
<li>Un autre Item
</ol>
</body>
En fait, ça n’épargne pas la marge de droite.
Kinshasa, le 31 mars 2019 (10:23:30 PM).
Mots-clés :
CSS, Pseudo-éléments, Internet, Hyper-Text Markup
Language, Hyper-Texte, lien hypertexte, hyperlien,
BALISE, Tag, élément, inline
DIASOLUKA Nz. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Études humanités : Scientifique - Mathématiques & Physique.
Informaticien-amateur, Programmeur et WebMaster.
Chercheur indépendant, autonome et autofinancé,
bénévole, sans aucun conflit d’intérêt ou liens d'intérêts
ou contrainte promotionnelle avec qui qu’il soit ou
quelqu’organisme ou institution / organisation que ce
soit, étatique, paraétatique ou privé, industriel ou
commercial en relation avec le sujet présenté.
+243 - 851278216 - 899508675 - 991239212 - 902263541
- 813572818
[email protected]
Autre Lecture :
https://www.scribd.com/document/374738470/LePlus-Grand-Secret-de-La-Creation
D’autres publications pouvant aussi intéresser :
• ht t ps: / / www. scr i bd. com/ document / 377036251/ Le- DosageDes - Medi cament s - en- Cac - Cas
• ht t ps: / / www. scr i bd. com/ document / 377035454/ Le- Hasar dDes - Ther momet r es - Non- cont act - a- I nf r ar ouge
• ht t ps: / / www. scr i bd. com/ document / 376222482/ Pet i t eI nt r oduct i on- Aux - Fonct i ons - JavaScr i pt
• ht t ps: / / www. scr i bd. com/ document / 376221919/ La- Foi - enJesus - Chr i st - Pour - Quoi - Fai r e
• ht t ps: / / www. scr i bd. com/ document / 375689778/ Lacui t evi suel l e- angul ai r e
• ht t ps: / / www. scr i bd. com/ document / 375349851/ La- var i abl eThi s
• ht t ps: / / www. scr i bd. com/ document / 375024162/ Fonct i ons I mbr i quees - en- J S
• ht t ps: / / www. scr i bd. com/ document / 374789297/ For mat I nt er ne- Des - Obj et s - JavaScr i pt
• ht t ps: / / www. scr i bd. com/ document / 374788758/ I t er at i ons -
en- JavaScr i pt
• ht t ps: / / www. scr i bd. com/ document / 374738470/ Le- Pl us Gr and- Secr et - de- La- Cr eat i on
• ht t ps: / / www. scr i bd. com/ document / 374597969/ Nouvel l eFor mul e- d- I MC- i ndi ce- de- dodui t e- Sel on- Dr - Di asol uka
• ht t ps: / / www. scr i bd. com/ document / 373847209/ Pr oper t y Descr i pt or s
• ht t ps: / / www. scr i bd. com/ document / 373833282/ l - Obj et Gl obal - Wi ndow
• ht t ps: / / www. scr i bd. com/ document / 372665249/ Javascr i pt Tome- I I
• ht t ps: / / www. scr i bd. com/ document / 355291488/ mot i l i t eocul ai r e- 2
• ht t ps: / / www. scr i bd. com/ document / 355291239/ mot i l i t eocul ai r e- I
• ht t ps: / / www. scr i bd. com/ document / 355290248/ Scr i pt - dAnal yses - Des - Ref l exes - Pupi l l omot eur s
•
ht t ps: / / www. scr i bd. com/ document / 321168468/ Rensei gnement s
- I d- et - Ant hr opomet r i ques
• ht t ps: / / www. scr i bd. com/ document / 320856721/ Emi ssi on- 31Jul - 2016
• ht t ps: / / www. scr i bd. com/ document / 318182982/ Compl i cat i onVi suel l e- du- Tr ai t ement - de- La- Mal ar i a
• ht t ps: / / www. scr i bd. com/ document / 318180637/ Rappor t -
Ent r e- Oxymet r i e- Et - Type- Respi r at i on
•
ht t ps: / / www. scr i bd. com/ document / 315746265/ Cl assi f i cat i o n
- Des - Medi cament s
•
ht t ps: / / www. scr i bd. com/ document / 315745909/ I ncongr uences Her esi es - et - Het er odoxi es - de- l a- Not i on- de- Labor at oi r e
• ht t ps: / / www. scr i bd. com/ document / 315745725/ Rappor t Ent r e- Oxymet r i e- Et - Type- Respi r at i on
