CSS 카운터(카운터)란 무엇입니까?

이 글의 내용은 CSS 카운터(counter)가 무엇인지 소개하여 CSS 카운터와 관련된 속성을 간단하게 이해할 수 있도록 하는 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS 카운터란 무엇인가요?

Counter는 CSS를 사용하여 요소에 자동으로 번호를 매길 수 있는 강력한 도구입니다. 페이지의 모든 요소를 ​​쉽게 계산하고 정렬된 목록과 유사한 기능을 수행하는 데 사용할 수 있습니다. 그러나 정렬된 목록과 비교할 때 CSS 카운터는 모든 요소를 ​​계산할 수 있으며 개인화된 계산을 구현할 수도 있습니다. [관련 동영상 튜토리얼 추천: CSS3 튜토리얼]

css 카운터 관련 속성

# 🎜🎜#

1, counter-reset

counter-reset 속성은 하나 이상의 CSS 카운터를 정의하고 초기화하는 데 사용됩니다. 카운터 이름을 지정하는 값으로 하나 이상의 식별자를 사용할 수 있습니다.

사용 구문:

counter-reset: [ <标识符> <整数>? ]+ | none | inherit

각 카운터 이름 뒤에는 카운터의 초기 값을 지정하는 선택적 값이 올 수 있습니다.

참고:

1) 키워드 none, 상속 및 이니셜은 카운터 이름으로 사용할 수 없습니다. 키워드 없음, 상속은 카운터 값으로 사용할 수 있습니다. 속성을 재설정합니다.

설정하지 않으면 카운터가 설정 해제됩니다. 상속 설정은 요소의 상위 요소에서 카운터 재설정 값을 상속합니다. counter-reset 속성의 기본값은 없음입니다.

2), 카운터의 초기 값은 카운터가 표시될 때 첫 번째 숫자/값이 아닙니다.

즉, 카운터가 1부터 표시되기 시작하려면 카운터 재설정의 초기 값을 0으로 설정해야 한다는 뜻입니다. 0은 기본 초기 값이므로 생략하면 기본적으로 0으로 재설정됩니다. 카운터 재설정은 음수 값을 허용합니다. 따라서 카운터가 0부터 표시되기 시작하도록 하려면 초기 값을 -1로 설정하면 됩니다.

예:

someSelector{ 
    counter-reset: counterA;  /*计数器counterA 初始，初始值为0*/ 
    counter-reset: counterA 6;  /*计数器counterA 初始，初始值为6*/ 
    counter-reset: counterA 4 counterB;  /*计数器counterA 初始，初始值为4，计数器counterB  初始，初始值为0*/ 
    counter-reset: counterA 4 counterB 2;  /*计数器counterA 初始，初始值为4，计数器counterB 初始，初始值为2*/ 
}

2, counter-increment

counter-increment 속성은 다음 중 하나를 지정하는 데 사용됩니다. CSS 카운터의 증분 값입니다. 증가할 카운터의 이름을 지정하는 하나 이상의 식별자를 값으로 사용합니다.

사용 구문:

counter-increment: [ <标识符> <整数>? ]+ | none | inherit

각 카운터 이름(식별자) 뒤에는 번호를 매길 값을 지정하는 선택적 <정수> 값이 올 수 있습니다. 카운터는 요소가 나타날 때마다 증가해야 합니다. 기본 증분은 1입니다. 0과 음의 정수가 허용됩니다. 음의 정수가 지정되면 카운터가 감소합니다.

counter-increment 속성은 counter-reset 속성과 함께 사용해야 합니다. 예를 살펴보겠습니다.

article {    /* 定义和初始化计数器 */
    counter-reset: section; /* 'section' 是计数器的名称 */
}
article h2 {    /* 每出现一次h2,计数器就增加1 */
    counter-increment: section; /* 相当于计数器增量：第1节； */
}

3. ) function#🎜🎜 #CSS 카운터를 표시하려면 counter() 함수를 content 속성과 함께 사용해야 합니다. CSS 카운터 이름을 매개변수로 사용하고 이를 콘텐츠 속성에 값으로 전달합니다. 이 속성은 카운터를 생성된 콘텐츠로 표시하기 위해 :before 의사 요소를 사용합니다.

예:

h2:before {    
    content: counter(section);
}

counter() 함수에는 counter(이름)과 counter(이름, 스타일)의 두 가지 형식이 있습니다.

name 매개변수는 표시할 카운터의 이름입니다. counter-reset 속성을 사용하여 카운터의 이름을 지정하세요.

style 매개변수는 카운터의 스타일을 정의하는 데 사용됩니다. 기본적으로 카운터는 십진수를 사용하여 형식화됩니다. 즉, 카운터는 숫자 형식으로 콘텐츠를 생성합니다. 그러나

css list-style-type 속성

에서 사용 가능한 모든 스타일을 카운터에도 사용할 수 있습니다. . 이는 십진수 카운터, 로마 문자로 표시되는 카운터, 낮은 알파벳 문자 등을 생성할 수 있음을 의미합니다. 가능한 모든 카운터 스타일은 다음과 같습니다. disc: 채워진 원 스타일

circle: 속이 빈 원 스타일

square: 채워진 사각형 스타일 #🎜🎜 #

decimal: 아라비아 숫자 스타일

lower-roman: 소문자 로마 숫자 스타일

upper-roman: 대문자 로마 숫자 스타일

lower-alpha: 소문자 영문자 스타일

upper-alpha: 대문자 영문자 스타일

none: 글머리 기호 사용 안 함

armenianl: 전통 아르메니아어 숫자 스타일

cjk-ideographic: 밝은 표의 문자 스타일

georgian: 전통 조지아어 숫자 스타일

lower-greek: 기본 그리스어 소문자 스타일 # 🎜🎜#

hebrew: 전통 히브리어 숫자 스타일

hiragana: 일본어 히라가나 문자 스타일

hiragana-iroha: 일본어 플랫 가나 일련 번호 스타일

# 🎜🎜#katakana: 일본어 가타카나 문자 스타일

katakana-iroha: 일본어 가타카나 일련번호 스타일

lower-latin: 라틴 소문자 스타일

upper-latin: 라틴 대문자 스타일

다음은 카운터를 표시하기 위해 소문자 로마 문자 사용을 지정하는 예입니다.

ul li:before {    
content: counter(my-counter, lower-roman);
}

#🎜🎜 #4. counters() 함수

CSS 카운터를 표시하려면 counters() 함수를 content 속성과 함께 사용해야 합니다. counter() 함수와 마찬가지로 counters() 함수는 content 속성에 값으로 전달됩니다. 그런 다음 content 속성은 :before 의사 요소를 사용하여 생성된 콘텐츠로 카운터를 표시합니다.

counters() 함수에도 카운터(이름, 문자열)와 카운터(이름, 문자열, 스타일)라는 두 가지 형식이 있습니다.

name参数也是要显示的计数器的名称。可以使用counter-reset属性来指定计数器的名称。

而counters()函数与counter(）函数（单数形式）区别在于：counters() 函数可以用于设置嵌套计数器。

嵌套计数器是用于为嵌套元素（如嵌套列表）提供自动编号。如果您要将计数器应用于嵌套列表，则可以对第一级项目进行编号，例如，1，2，3等。第二级列表项目将编号为1.1，1.2，1.3等。第三级项目将是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。

string参数用作不同嵌套级别的数字之间的分隔符。例如，在'1.1.2'中，点（'.'）用于分隔不同的级别编号。如果我们使用该counters()函数将点指定为分隔符，则它可能如下所示：

content: counters(counterName, ".");

如果希望嵌套计数器由另一个字符分隔，例如，如果希望它们显示为“1-1-2”，则可以使用短划线而不是点作为字符串值：

content: counters(counterName, "-");

和counter(）函数一样，style参数是用来定义计数器的风格。默认情况下，计数器使用十进制数字格式化。具体关于style参数的设置可以参照counter(）函数的style参数。

以下是一个示例，指定嵌套计数器将使用lower-roman字符显示，并使用点作为分隔符：

ul li:before {    
   content: counters(my-counter, ".", lower-roman);
}

css计数器（counter）的示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Tester</title>
        <style type="text/css">
            body{
                counter-reset: section;
            }
            h1{
                counter-reset: subsection;
            }
             
            h1:before{
                counter-increment: section;
                content: counter(section) ".";
            }
             
            h3:before{
                counter-increment: subsection;
                content: counter(section) "." counter(subsection) " ";
            }
        </style>
    </head>
    <body>
        <h1 id="css计数器教程">css计数器教程</h1>
        <h3 id="css计数器">css计数器</h3>
        <h3 id="css计数器的相关属性">css计数器的相关属性</h3>
        <h3 id="示例说明">示例说明</h3>
         
        <h1 id="css计数器教程">css计数器教程</h1>
        <h3 id="css计数器">css计数器</h3>
        <h3 id="css计数器的相关属性">css计数器的相关属性</h3>
        <h3 id="示例说明">示例说明</h3>
    </body>
</html>

效果图：

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

위 내용은 CSS 카운터(카운터)란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!