CSS3 콘텐츠 속성-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3 콘텐츠 속성

伊谢尔伦

Feb 03, 2017 pm 02:08 PM

CSS에는 4가지 주요 의사 요소가 있습니다: 이전/이후/첫 번째 문자/첫 번째 줄 이전/이후 의사 요소 선택기에는 페이지에 콘텐츠를 삽입할 수 있는 콘텐츠 속성이 있습니다.

일반 텍스트 삽입

content: "기사 삽입" 또는 content:none은 콘텐츠를 삽입하지 않습니다.

#html
<h1 id="这是h">这是h1</h1>
<h2 id="这是h">这是h2</h2>
#css
h1::after{
    content:"h1后插入内容"
}
h2::after{
    content:none
}

삽입된 텍스트 기호

다음을 사용할 수 있습니다. content 속성 여는 따옴표 속성 값과 닫는 따옴표 속성 값은 문자열 양쪽에 대괄호, 작은 따옴표, 큰 따옴표 등 중첩된 리터럴 기호를 추가합니다. 여는 따옴표는 시작 텍스트 기호를 추가하는 데 사용되고 닫는 따옴표는 끝 텍스트 기호를 추가하는 데 사용됩니다. 위 CSS 수정:

h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}
h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

이미지 삽입

콘텐츠 속성

#html
<h3 id="这是h">这是h3</h3>

#css
h3::after{
    content:url(图片路径)
}

요소의 속성 값 삽입

요소 앞/뒤에 이미지를 직접 삽입할 수도 있습니다.

content 속성은 attr을 직접 사용해 요소의 속성을 얻어 해당 위치에 삽입할 수 있습니다.

#html
<a href="http://www.php.cn">这是链接</a>

#css
a:after{
    content:attr(href);
}

항목 번호 삽입

여러 항목에 연속 번호를 추가하려면 콘텐츠의 카운터 속성을 사용하세요.

#html
<h1 id="大标题">大标题</h1>
<p>文字</p>
<h1 id="大标题">大标题</h1>
<p>文字</p>
<h1 id="大标题">大标题</h1>
<p>文字</p>
<h1 id="大标题">大标题</h1>
<p>文字</p>

#css
h1:before{
    content:counter(my)&#39;.&#39;;
}
h1{
    counter-increment:my;
}

항목 번호 수정

기본 삽입 항목 숫자 1,2,3이라는 숫자입니다. . . 자동 증가, 프로젝트 번호에 텍스트와 스타일을 추가할 수도 있지만 여전히 위의 html을 사용하고 CSS 수정은 다음과 같습니다.

h1:before{
    content:&#39;第&#39;counter(my)&#39;章&#39;;
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

번호 유형 지정

컨텐츠 사용(카운터 이름) , 숫자 유형) 형식 이 구문은 숫자 유형에 대한 참조는 ul의 list-style-type 속성 값을 기반으로 할 수 있습니다. 위 html을 이용하여 CSS를 다음과 같이 수정합니다.

h1:before{
    content:counter(my,upper-alpha);
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

숫자 중첩

큰 숫자는 중간 숫자 안에 중첩되고, 중간 숫자는 작은 숫자 안에 중첩됩니다.

#html
<h1 id="大标题">大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1 id="大标题">大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1 id="大标题">大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>

#css
h1::before{
    content:counter(h)&#39;.&#39;;
}
h1{
    counter-increment:h;
}
p::before{
    content:counter(p)&#39;.&#39;;
    margin-left:40px;
}
p{
    counter-increment:p;
}

예제의 출력에서 볼 수 있듯이 p의 숫자가 연속되어 있습니다. 각 h1 다음에 세 개의 p의 번호를 다시 지정하면 counter-reset 속성을 사용하여 이를 재설정할 수 있습니다. 위 h1의 CSS를 수정하면

h1{    
    counter-increment:h;    
    counter-reset:p;
}

와 같이 더 복잡한 중첩을 달성할 수도 있습니다. 레벨 중첩.

#html
<h1 id="大标题">大标题</h1>
<h2 id="中标题">中标题</h2>
<h3 id="小标题">小标题</h3>
<h3 id="小标题">小标题</h3>
<h2 id="中标题">中标题</h2>
<h3 id="小标题">小标题</h3>
<h3 id="小标题">小标题</h3>
<h1 id="大标题">大标题</h1>
<h2 id="中标题">中标题</h2>
<h3 id="小标题">小标题</h3>
<h3 id="小标题">小标题</h3>
<h2 id="中标题">中标题</h2>
<h3 id="小标题">小标题</h3>
<h3 id="小标题">小标题</h3>

#css
h1::before{
    content:counter(h1)&#39;.&#39;;
}
h1{
    counter-increment:h1;
    counter-reset:h2;
}
h2::before{
    content:counter(h1) &#39;-&#39; counter(h2);
}
h2{
    counter-increment:h2;
    counter-reset:h3;
    margin-left:40px;
}
h3::before{
    content:counter(h1) &#39;-&#39; counter(h2) &#39;-&#39; counter(h3);
}
h3{
    counter-increment:h3;
    margin-left:80px;
}

전체 데모는 아래에 제공됩니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS content</title>
<style>
.string p:after {
    margin-left: -16px;
    background: #fff;
    content: "支持";
    color: #f00;
}

.attr p:after {
    content: attr(title);
}

.url p:before {
    content: url(https://img.php.cn/upload/article/000/000/009/587d87ecca52d563.jpg);
    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>

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.