Maison > Article > interface Web > Étapes de mise en œuvre des attributs de contenu CSS3

Étapes de mise en œuvre des attributs de contenu CSS3

php中世界最好的语言original: 2017-12-01 10:01:491987parcourir

Nous savons que les pseudo-classes de :before" et ":after" apparaissent en CSS3, nous allons donc aujourd'hui vous apprendre les étapes pour implémenter l'attribut content de CSS3. Ce qui suit est un cas, jetons un coup d'œil.

Les pseudo-classes ":before" et ":after" sont apparues en css3

Vous pouvez écrire ainsi :

h1:after{
content:&#39;h1后插入的文本&#39;;
...}

Les fonctions et effets de celles-ci. deux sélecteurs sont ici, je ne le présenterai pas ici ; je parlerai principalement du contenu de l'attribut CSS mentionné ci-dessus, qui est utilisé avec les pseudo-éléments :after et :before pour afficher le contenu avant ou après l'objet

<.>La valeur du contenu :

normal : se comporte de la même manière que none value

none : ne génère aucune valeur 3e684153e93e7e840fb9f880e130f634 : insère une valeur d'attribut de balise 9bb6a7d109b3f2bf35f7e2e9bd87f98a : insère une adresse externe en utilisant l'adresse absolue ou relative spécifiée (image, audio, vidéo ou toute autre ressource prise en charge par le navigateur) 98c455a79ddfebb79781bff588e7b37e : Insérer une chaîne

counter(name) : Utiliser le compteur nommé <.>

counter(name,

list-style-type

) : utilisez des compteurs nommés et respectez l'attribut list-style-type spécifié counters(name,string) : utilisez tous les compteurs nommés

counters(name, string, list-style-type) : utilisez tous les compteurs nommés et respectez l'attribut list-style-type spécifié

no-close-quote : Do ne pas insérer l'attribut quotes après la balise. Mais augmenter son niveau d'imbrication

no-open-quote : n'insère pas l'attribut quotes de la balise front Mais diminue son niveau d'imbrication

close-. quote : insère l'attribut quotes. Post-mark

open-quote : Insère la pré-marque de l'attribut quotes

Les valeurs difficiles à comprendre ici sont : counter(name );

Ce qui suit est un résumé Dans cette section, une démo de chaque valeur sera donnée à la fin,

Par exemple, j'ai la structure html suivante :

Je souhaite ajouter la valeur actuelle de l'index li après chaque li :

<ul>
<li>这个是有序列表</li>
<li>这个是有序列表</li>
<li>这个是有序列表</li>
<li>这个是有序列表</li>
<li>这个是有序列表</li></ul>

Explication :

ul li{
counter-increment:index;
}
ul li:after{
content:&#39;统计：&#39;counter(index);
display:block;
line-height:35px;
}

count(name) Le nom ici doit être spécifié à l'avance, sinon toutes les valeurs sera 0;

count(name, list-style-type) Le list-style-type ici est la valeur de l'attribut list-style-type en CSS; La DÉMO complète est donnée ci-dessous

<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS content</title><meta name="author" content="phpstudy.net"><meta name="copyright" content="www.phpstudy.net"><style>
.string p:after {
margin-left: -16px;
background: #fff;
content: "支持";
color: #f00;}
.attr p:after {
content: attr(title);}
.url p:before {
content: url(https://pic.cnblogs.com/avatar/779447/20160817152433.png);
display: block;}
.test ol {
margin: 16px 0;
padding: 0;
list-style: none;}
.counter1 li {
counter-increment: testname;}
.counter1 li:before {
content: counter(testname)":";
color: #f00;
font-family: georgia,serif,sans-serif;}
.counter2 li {
counter-increment: testname2;}
.counter2 li:before {
content: counter(testname2,lower-roman)":";
color: #f00;
font-family: georgia,serif,sans-serif;}
.counter3 ol ol {
margin: 0 0 0 28px;}
.counter3 li {
padding: 2px 0;
counter-increment: testname3;}
.counter3 li:before {
content: counter(testname3,float)":";
color: #f00;
font-family: georgia,serif,sans-serif;}
.counter3 li li {
counter-increment: testname4;}
.counter3 li li:before {
content: counter(testname3,decimal)"."counter(testname4,decimal)":";}
.counter3 li li li {
counter-increment: testname5;}
.counter3 li li li:before {
content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":";}</style></head><body><ul>
<li>
<strong>string：</strong>
<p>你的浏览器是否支持content属性：否</p>
</li>
<li>
<strong>attr：</strong>
<p title="如果你看到我则说明你目前使用的浏览器支持content属性"></p>
</li>
<li>
<strong>url()：</strong>
<p>如果你看到我的头像图片则说明你目前使用的浏览器支持content属性</p>
</li>
<li>
<strong>counter(name)：</strong>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
</li>
<li>
<strong>counter(name,list-style-type)：</strong>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
</li>
<li>
<strong>counter(name)拓展应用：</strong>
<ol>
<li>列表项
<ol>
<li>列表项
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
</li>
<li>列表项</li>
</ol>
</li>
<li>列表项
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
</li>
<li>列表项
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
</li>
</ol>
</li></ul></body></html>

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php. Site chinois !

Lecture connexe :

Introduction détaillée de CSS3 à l'attribut translation

Introduction détaillée de CSS3 à l'attribut background-size

Étapes pour implémenter l'effet de halo rotatif avec 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!

Déclaration：

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

Article précédent：Tutoriel sur l'utilisation de l'animation CSSArticle suivant：Tutoriel sur l'utilisation de l'animation CSS

Articles Liés

Voir plus