Maison >interface Web >tutoriel CSS >É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:492038parcourir
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:'h1后插入的文本';
...}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:'统计：'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 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!