Quels sont les pseudo éléments CSS ? Introduction détaillée aux pseudo-éléments CSS (avec exemples inclus)-tutoriel CSS-php.cn

Quels sont les pseudo éléments CSS ? Introduction détaillée aux pseudo-éléments CSS (avec exemples inclus)

寻∝梦

Libérer： 2018-09-08 13:43:10

original

10756 Les gens l'ont consulté

L'article d'aujourd'hui présente principalement quatre pseudo-éléments du style CSS Les pseudo-éléments CSS expliqués sont relativement courants dans la vie quotidienne. Jetons maintenant un coup d'œil. Levez-vous et lisez ceci. article.

Tout d'abord, jetons un coup d'œil aux quatre pseudo-éléments dans les styles CSS présentés dans cet article :

:avant Ce pseudo-élément définit l'ajout de contenu avant l'élément
:après Ce pseudo-élément définit l'ajout de contenu après l'élément
: first-line Ce pseudo-élément définit L'élément ajoute un style spécial à la première ligne de texte
:first-letter Ce pseudo-élément ajoute un style spécial à la première lettre du texte

Ces quatre pseudo-éléments sont tous des éléments couramment utilisés lors de l'écriture de code.

Regardons maintenant le premier :

: avant, cet élément ajoute du contenu avant l'élément.

Regardons un exemple complet pour comprendre :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话</P>
</body>
</html>

Copier après la connexion

Il s'agit d'un document texte ordinaire, et l'affichage est normal. image d'abord. Ensuite, comparez :

Quels sont les pseudo éléments CSS ? Introduction détaillée aux pseudo-éléments CSS (avec exemples inclus)

Il s'agit d'un texte très normal. Ensuite, insérons un pseudo-élément de style CSS pour voir l'effet :

<. 🎜> Ajoutez le style CSS à l'en-tête :

<style type="text/css">
p:before{content: "这里是PHP中文网"}
</style>

Copier après la connexion

Le résultat apparaîtra. Le texte dans la balise p est toujours le même texte. dans le navigateur :

Quels sont les pseudo éléments CSS ? Introduction détaillée aux pseudo-éléments CSS (avec exemples inclus)

L'effet est-il très évident ? Le texte avant va-t-il au début de la balise p ?

J'ai parlé du premier pseudo-élément avant, parlons maintenant du deuxième pseudo-élément :

:after : Ajouter du contenu après l'élément est également très simple , n'est-ce pas ? , remplacez simplement le avant dans le code précédent par après.

Regardons le code :

<title>PHP中文网</title>
<style type="text/css">
p:after{content: "这里是PHP中文网"}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话</P>
</body>

Copier après la connexion

D'accord, le code est sorti, voyons si l'effet affiché dans le navigateur est le même que ci-dessus :

Quels sont les pseudo éléments CSS ? Introduction détaillée aux pseudo-éléments CSS (avec exemples inclus)

C'est exactement la même chose que mentionné ci-dessus, sauf que le contenu est ajouté à la fin, ce qui est évident.

Parlons maintenant de l'utilisation du troisième pseudo-élément :

: first-line : définissez le changement de la première ligne, et la deuxième ligne restera inchangée .

Prenons un exemple :

<title>PHP中文网</title>
<style type="text/css">
p:first-line{color:red}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话</P>
</body>

Copier après la connexion

Comme il doit être affiché sur la première ligne, j'ai copié le texte plusieurs fois. Jetons un œil à l'effet de l'affichage du navigateur :

Quels sont les pseudo éléments CSS ? Introduction détaillée aux pseudo-éléments CSS (avec exemples inclus)

La première ligne a-t-elle complètement changé, mais les deuxième et troisième lignes n'ont pas changé ? Cela permettra à tout le monde de connaître plus facilement l'utilisation de ces pseudo-éléments ? . (Si vous voulez en voir plus, rendez-vous sur le site PHP chinois

Manuel d'apprentissage CSS pour apprendre)

Le dernier est : pseudo-élément de première lettre :

: first-letter : Oui Définit la variation de la première lettre du texte.

Changeons la première phrase du texte ci-dessus en anglais. Regardons maintenant le code :

<style type="text/css">
p:first-letter{color:red}
</style>

Copier après la connexion

Regardez le rendu :

Quels sont les pseudo éléments CSS ? Introduction détaillée aux pseudo-éléments CSS (avec exemples inclus) La première lettre du texte a changé. Est-ce réussi ? Généralement, on l'utilise pour obtenir des effets comme l'amplification.

Ce qui précède représente l'intégralité du contenu de cet article sur les pseudo-éléments de style CSS. Quatre pseudo-éléments couramment utilisés sont introduits, dans l'espoir d'aider tout le monde (si vous souhaitez en savoir plus sur le style CSS, rendez-vous sur le site Web PHP chinois

manuel d'apprentissage CSS

colonne pour apprendre). Si vous avez des questions, vous pouvez laisser un message ci-dessous. 【Recommandation de l'éditeur】

Comment ajouter un style de bordure à un tableau CSS ? Résumé des styles de bordure de tableau CSS (avec exemples complets)

Comment faire en sorte que HTML une balise change de couleur au survol de la souris, contrôler CSS une explication détaillée du style de survol de la souris

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Quels sont les pseudo éléments CSS ? Introduction détaillée aux pseudo-éléments CSS (avec exemples inclus)