Petite Introduction Aux Pseudo-Elements HTML-IV

35 pages

Français

Petite Introduction Aux Pseudo-Elements HTML-IV

diasoluyalu - Jean-Dadet Luyalu Dr. Diasoluka

Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

35 pages

Français

Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

A propos
Informations
Extrait

Description

P e t i t eI n t r o d u c t i o na u x L a n g a g e sH T M L / X H T M L: L e sP s e u d o - é l é m e n t s . Programmation Internet -P o u rD é 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. Lespseudo-élémentspermettent de générer et d’aicher 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 desuser agentss’en sortent avec un seuldouble point, et mêmeW3Cutilise un seuldeuxpoints. Par exemple ce code HTML : Son code-source pour le copier-coller : Exemple de qqs pseudoelements 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 } P1 Ce Texte, avant SPAN. Ce Texte, dans SPAN. Ce Texte, après SPAN. P2 Ce Texte, avant SPAN. Ce Texte, dans SPAN. Ce Texte, après SPAN. P3 Ce texte, entièrement dans P ID="d". P4 Note: Il est préférable de toujours spécifier . L’HTML ci-dessus s’aiche comme ceci : Lespseudo-élémentsles plus courants sont : 1.:beforeet:afterou mieux,::before et::after. Un «content» est le contenu associé à un élément dans le document source .

Sujets

CSS

Éléments d'Euclide

Balise

Internet

Hypertext

Markup language

Inline

Lenguaje de marcado

Informations

Publié par	diasoluyalu
Publié le	02 avril 2019
Nombre de lectures	2
Langue	Français

Extrait

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 - 813572818La dernière révision de ce texte est disponible sur CD.

Lespseudo-élémentspermettent de générer et d’aîcher 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 desuser agentss’en sortent avec un seuldouble point, et mêmeW3Cutilise un seuldeux-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>

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’aîche comme ceci :

Lespseudo-élémentsles plus courants sont : 1.:beforeet:afterou 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 : dutexte(littéral), unnombreou unsous-élémentdont il est dès lorsparent(tout élément sauf lerootou racine a un parent => Document treeou arbre/hiérarchie du document). Certains éléments n’ont pas de contenu, ils sont appelés «empty» = élément vide.

Le contenu à aîcher par unpseudo-élémentest spéciïé 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()oucounters()) restituant les valeurs en cours de tous les compteurs ayant ce nom, séparées par la valeur de son paramètrestringci-dessous, et dans le style spéciïé parstyle(décimalpar défaut). Syntaxe : i.«counter(name)» ou ii.«counter(name, style)» pouvant s’écrire sous deux formes : 1.«counter(name, string=list-style-type)» ou 2.«counter(name, string=list-style-

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éciïé dans la propriété «quotes». no-open-quoteetno-close-quoten’aîchent 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, upper-roman) " - " }

cite::after { content: " [" counter(genies, none) "] " }

div.note::before { content: counter(div, disc) " " }

p::before { content: counter(det, upper-latin) }

Remarques :

1.Lavaleur initialedecontentest une chaîne vide (empty string).

2.Lavaleurdecontents’applique à tous les médias :

Pour les contenus média-sensibles (médias spéciïques, p.e.texte littéralpourtout groupede média,imagespour seulement les groupesvisuels + bitmap, ïchierssonpour seulement le groupe de médiasaural), la déclaration ducontentdoit se faire dans les règles pour@media.

«Responsive Web Design» : Pour que par exemple une séquence audio soit émise automatiquement à la ïn 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 ") } }

Lemedia-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 no-repeat; } } ul li em { padding-left: 30px; }

Unemedia queryaccepte desopérateurs logiques:and(et),only(seulement),not(non), «,» (ou).

À l’importation :

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@mediasont 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.

2.p .d::before { content: open-quote "p. d:before (w space)" close-quote; } * déïnit 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 laclass="d". Notez aussi les double deux-pointsdevant le beforepour 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):

Univers
Ebooks
Livres audio
Presse
Podcasts
BD
Documents

Petite Introduction Aux Pseudo-Elements HTML-IV

CSS

Éléments d'Euclide

Balise

Internet

Hypertext

Markup language

Inline

Lenguaje de marcado

YouScribe

Le catalogue

Le service

Les conditions