亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Pseudo-éléments CSS

CSS Pseudo-élément

Le pseudo-élément CSS est utilisé pour ajouter des effets spéciaux au sélecteur.

Syntaxe

Syntaxe du pseudo-élément?:

sélecteur?:?pseudo-élément {propriété?:?valeur;
Les classes CSS peuvent également utiliser des pseudo-éléments?:

selector.class:pseudo-element {property:value;}

:pseudo de première ligne élément

Le pseudo-élément "première ligne" est utilisé pour définir des styles spéciaux sur la première ligne de texte.

Dans l'exemple suivant, le navigateur formatera la première ligne de texte de l'élément p selon le style du pseudo-élément "first-line"?: 

          <!DOCTYPE html>
<html>
<head>
    <style>
        p:first-line
        {
            color:#ff0000;
            font-variant:small-caps;
        }
    </style>
</head>

<body>
<p>您可以使用:線偽元素添加特殊效果給第一行文本。</p>
</body>
</html>

Exécuter le programme Essayez

Remarque?: Le pseudo-élément "première ligne" ne peut être utilisé qu'avec des éléments de niveau bloc.

Remarque?: Les propriétés suivantes peuvent être appliquées au pseudo-élément "première ligne"?:

    propriétés de police
  • propriétés de couleur
  • propriétés d'arrière-plan
  • espacement des mots
  • espacement des lettres
  • décoration du texte
  • alignement vertical
    • transformation de texte
  • hauteur de ligne
  • clair
: pseudo-élément de première lettre

"premier- letter" pseudo-élément Utilisé pour définir un style spécial à la première lettre du texte?:

Exemple


     <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}
</style>
</head>

<body>
<p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>

Exécutez le programme pour l'essayer out

Remarque?: Le pseudo-élément "première lettre" ne peut être utilisé qu'avec des éléments de niveau bloc.

Remarque?: Les propriétés suivantes peuvent être appliquées au pseudo-élément "première lettre"?:

    propriétés de police
  • propriétés de couleur
  • propriétés d'arrière-plan
  • propriétés de marge
  • propriétés de remplissage
  • propriétés de bordure
  • text-decoration
  • vertical-align (uniquement si "float" est "none")
  • text-transform
  • line-height
  • float
  • clear
Pseudo-éléments et classes CSS

Les pseudo-éléments peuvent être combinés avec des classes CSS?:

p.article:first-letter {color:#ff0000; }

<p class="article">Un paragraphe dans un article</p>
L'exemple ci-dessus fera tourner les premières lettres de tous les paragraphes avec article de classe rouge.

Plusieurs pseudo-éléments

peuvent être utilisés en combinaison avec plusieurs pseudo-éléments.

Dans l'exemple ci-dessous, la première lettre du paragraphe appara?tra en rouge et sa taille de police sera xx-large. Le reste du texte de la première ligne sera bleu et appara?tra en petites majuscules.

Le reste du texte du paragraphe sera affiché dans la taille et la couleur de police par défaut?:

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
p:first-letter
{
	color:#ff0000;
	font-size:xx-large;
}
p:first-line 
{
	color:#0000ff;
	font-variant:small-caps;
}
</style>
</head>

<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>

Exécutez le programme pour l'essayer

CSS - :before pseudo-element

":before" pseudo-élément peut insérer un nouveau contenu avant le contenu de l'élément.

L'exemple suivant insère une image avant chaque élément <h1>?:

Exemple

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        h1:before {content:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
    </style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>僅當(dāng) !DOCTYPE 已經(jīng)聲明 IE8 支持這個(gè)內(nèi)容屬性</p>
</body>
</html>

Exécuter Essayez le programme

CSS -?:after pseudo-element

":after" pseudo-élément peut insérer un nouveau contenu après le contenu de l'élément.

L'exemple suivant insère une image après chaque élément <h1>?:

Exemple

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        h1:after {content:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
    </style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>僅當(dāng)!DOCTYPE 已經(jīng)聲明 IE8支持這個(gè)內(nèi)容屬性.</p>
</body>
</html>

Exécutez le programme pour l'essayer

Tous les pseudo-classes/éléments CSS

< tbody>< th width="63%" align="left">Exemple de description < td>Sélectionner tous les liens non visités< tr>< td>:focus< de chaque

élément tr>< td>:first-line

élément >< td class="notranslate">p:lang(it )
SélecteurExemple
:linka:link
:visitéa:visitéSélectionner tous les liens visités Lien< /td>
:activea:activeSélectionnez un lien actif:hovera:hoverL'état de placement de la souris sur le lien
input:focusL'élément sélectionné a le focus après la saisie
:first - letterp:first-letterSélectionnez la première lettre
選擇器示例示例說(shuō)明
:linka:link選擇所有未訪問(wèn)鏈接
:visiteda:visited選擇所有訪問(wèn)過(guò)的鏈接
:activea:active選擇正在活動(dòng)鏈接
:hovera:hover把鼠標(biāo)放在鏈接上的狀態(tài)
:focusinput:focus選擇元素輸入后具有焦點(diǎn)
:first-letterp:first-letter選擇每個(gè)

元素的第一個(gè)字母

:first-linep:first-line選擇每個(gè)

元素的第一行

:first-childp:first-child選擇器匹配屬于任意元素的第一個(gè)子元素的 <]p> 元素
:beforep:before在每個(gè)

元素之前插入內(nèi)容

:afterp:after在每個(gè)

元素之后插入內(nèi)容

:lang(language)p:lang(it)為

元素的lang屬性選擇一個(gè)開始值

p:first-lineSélectionnez la première ligne
:first-childp:first-childLe sélecteur correspond au premier enfant de n'importe quel élément élément<]p>
:avantp:avantInsérer du contenu avant chaque

élément

:afterp:after< /td>Insérer du contenu après chaque

élément
:lang(langue)Choisissez une valeur de départ pour l'attribut lang de l'élément
Formation continue
||
<!DOCTYPE html> <html> <head> <style> p:first-line { color:#ff0000; font-variant:small-caps; } </style> </head> <body> <p>您可以使用:線偽元素添加特殊效果的第一行文本。</p> </body> </html>
soumettreRéinitialiser le code