CSS3 콘텐츠 속성 구현 단계-CSS 튜토리얼-php.cn

CSS3 콘텐츠 속성 구현 단계

php中世界最好的语言

풀어 주다： 2017-12-01 10:01:49

원래의

2131명이 탐색했습니다.

우리는 CSS3에 :before", ":after" 의사 클래스가 등장한 것을 알고 있으므로 오늘은 CSS3의 content 속성을 구현하는 단계를 알려드리겠습니다. 다음은 사례이므로 살펴보겠습니다.

css3 ":before", ":after" 의사 클래스에 나타납니다.

다음과 같이 작성할 수 있습니다.

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

로그인 후 복사

이 두 선택기의 기능과 효과는 여기서 소개하지 않습니다. 위에서 언급한 CSS 속성 콘텐츠 :after 및 :before 의사 요소와 함께 사용하여 객체 앞이나 뒤의 콘텐츠를 표시합니다.

content 값:

normal: none과 동일하게 동작합니다.

none: 값을 생성하지 않습니다. attr>: 태그 속성 값 삽입: 지정된 절대 또는 상대 주소를 사용하여 외부 리소스(이미지, 오디오, 비디오 또는 브라우저에서 지원하는 기타 리소스)를 삽입합니다. 문자열

counter( name) 삽입: 명명된 카운터 사용

counter(name,list-style-type): 명명된 카운터를 사용하고 지정된 목록 스타일 유형 속성을 준수합니다.

counters(name, string): 모든 명명된 카운터 사용 명명된 카운터

counters(name, string, list-style-type): 명명된 모든 카운터를 사용하고 지정된 list-style-type 속성을 준수합니다.

no-close-quote: quote 속성의 post 태그를 삽입하지 않지만 증가합니다. 중첩 수준

no-open-quote: quote 속성의 앞 태그를 삽입하지 않지만 중첩 수준을 줄입니다.

close-quote: quote 속성의 뒤 태그를 삽입합니다.

open-quote: 앞 태그를 삽입합니다.

여기에서 이해하기 어려운 값은 다음과 같습니다: counter(name); 구조:

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

로그인 후 복사

각 li 뒤에 현재 li 인덱스 값을 추가하고 싶습니다.

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

로그인 후 복사

설명:

count(name) 여기에 이름을 미리 지정해야 합니다. 그렇지 않으면 모든 값이 0이 됩니다

;

count(name,list-style-type) 여기서 list-style-type은 CSS의 list-style-type 속성 값입니다.

전체 데모는 아래에 나와 있습니다

100

<!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>