Maison > interface Web > tutoriel CSS > le corps du texte

Comment utiliser les sélecteurs pour insérer le contenu requis dans la page en CSS3 (code ci-joint)

不言
Libérer: 2018-08-24 10:27:08
original
2018 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser les sélecteurs CSS3 pour insérer le contenu requis dans la page. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1 Utilisez un sélecteur pour insérer du contenu

Utilisez le sélecteur après ou avant pour définir le contenu à insérer dans l'attribut de contenu du sélecteur lorsque le contenu est inséré. est du texte Lors de l'insertion de texte, vous devez ajouter des guillemets simples ou doubles des deux côtés du texte inséré.

<style type="text/css">
h2:before{  content:‘COLUMN’;}
</style>
Copier après la connexion

2 Spécifiez les éléments individuels à ne pas insérer

Utilisez la valeur d'attribut none de l'attribut content

<style type="text/css">
h2.sample:before{  content:none;}
</style>
Copier après la connexion

3 Insérer des images Fichier

<style type="text/css">
h2:before{  content:url(mark.png);}
</style>
Copier après la connexion

4 Afficher la valeur de l'attribut alt comme titre de l'image

dans l'attribut content en précisant "attr (nom de l'attribut)" Sous la forme de , la valeur d'un certain attribut peut être affichée.

img:after{
content:attr(alt);
display:block;
text-align:center;
}
Copier après la connexion

5 Utilisez l'attribut content pour insérer le numéro d'article

(1) Ajoutez des numéros consécutifs avant plusieurs titres

1. valeur de l'attribut counter dans l'attribut content pour ajouter des nombres consécutifs à plusieurs éléments

: before{ content: counter (nom du compteur);} (utilisez un compteur pour calculer le nombre, et le compteur peut être nommé arbitrairement)

2. Vous devez également ajouter la spécification de l'attribut de contre-incrément de l'élément dans le style de l'élément. Afin d'utiliser la numérotation continue, vous devez définir la valeur d'attribut du contre-incrément. incrémenter l'attribut au sélecteur avant ou après la sélection. Le nom du compteur spécifié dans la valeur de l'attribut du compteur.

{ contre-incrément : le nom du compteur spécifié dans le sélecteur avant ou après}

h1:before{content:counter(mycounter);}
h1{counter-increment:mycounter;}//1、2、3.......
Copier après la connexion

(2) Ajouter du texte au numéro d'article

h1:before{content:‘第’counter(mycounter)‘章’;}//第1章大标题、第2章大标题.........
Copier après la connexion

(3) Spécifiez le type de numéro

1. En utilisant l'attribut de contenu du sélecteur avant ou après, vous pouvez ajouter non seulement des nombres numériques, mais également des nombres alphabétiques ou des chiffres romains.

content: counter (nom du compteur, type de numérotation)

2 Vous pouvez utiliser la valeur de l'attribut list-style-type pour spécifier le type de numérotation. lettres majuscules, utilisez l'attribut « upper-alpha », utilisez l'attribut « upper-roman » lorsque vous spécifiez des lettres romaines majuscules.

h1:before{content:counter(mycounter,upper-alpha)‘.’;}// A.、B.、C.、
Copier après la connexion

(4) Imbrication de nombres

h1:before{content:counter(mycounter);}//1(1、2、3...)、2(1、2、3...)、........
h1{counter-increment:mycounter;counter-reset:subcounter;}(将中编号进行重置)
h2:before{content:counter(subcounter);}
h2{counter-increment:subcounter;margin-left:40px}
Copier après la connexion

(5) Incorporation de grands nombres dans des nombres du milieu

h2:before{content:counter(mycounter)‘-’ counter(subcounter)‘.’;}//1-1、1-2
Copier après la connexion

(6) Ajout des deux côtés de la chaîne Symboles de texte imbriqués

1. Vous pouvez utiliser la valeur d'attribut de guillemet ouvert et la valeur d'attribut de guillemet fermant de l'attribut de contenu pour ajouter des symboles de texte imbriqués tels que des crochets, des guillemets simples et des guillemets doubles des deux côtés. de la chaîne.

2. La valeur de l'attribut open-quote est utilisée pour ajouter le début du symbole de texte imbriqué, et la valeur de l'attribut close-quote est utilisée pour ajouter la fin du symbole de texte imbriqué.

3. Utilisez l'attribut quotes dans le style de l'élément pour spécifier les symboles de texte imbriqués à utiliser

h1:before{  content:open-quote; }
h1:after { content:close-quote; }
h1{   quotes:"(" ")"   }//形如:   (标题)
Copier après la connexion

Recommandations associées :

CSS3 Series 1. (Présentation, sélecteur, utiliser le sélecteur pour insérer du contenu)_html/css_WEB-ITnose

Comment insérer du contenu dans la page en css3

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal