CSSカウンター(カウンター)とは

この記事の内容は、CSS カウンター (カウンター) とは何かを紹介し、CSS カウンターの関連プロパティを誰でも簡単に理解できるようにすることです。困っている友人は参考にしていただければ幸いです。

CSS カウンターとは何ですか?

カウンターは CSS3 が提供する強力なツールで、CSS を使用して要素に自動的に番号を付けることができます。これを使用すると、ページ上の要素を簡単にカウントし、順序付きリストと同様の機能を実現できます。ただし、順序付きリストと比較すると、CSS カウンターはあらゆる要素をカウントでき、パーソナライズされたカウントも実装できます。 [おすすめの関連ビデオチュートリアル: CSS3 チュートリアル ]

CSS の関連プロパティカウンター

1、カウンター-reset

counter-reset 属性は、1 つ以上の CSS カウンターを定義および初期化するために使用されます。カウンタの名前を指定する値として 1 つ以上の識別子を取ることができます。

使用構文:

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

各カウンタ名の後には、カウンタの初期値を指定するオプションの 値を続けることができます。

注:

1) キーワード none、inherit、initial はカウンタ名として使用できません。キーワード none とinherit は counter-reset 属性の値として使用できます。

none を設定するとカウンタの設定が解除され、inherit を設定すると要素の親要素からカウンタ リセット値が継承されます。 counter-reset 属性のデフォルト値は none です。

2)、カウンターの初期値は、カウンターが表示されたときの最初の数値/値ではありません。

これは、カウンターの表示を 1 から開始したい場合は、counter-reset の初期値を 0 に設定する必要があることを意味します。 0 はデフォルトの初期値であるため、これを省略すると、デフォルトでゼロにリセットされます。counter-reset では負の値が許可されます。したがって、カウンターの表示を 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 属性は、1 つ以上の CSS カウンターの増分値を指定するために使用されます。 。インクリメントするカウンタの名前を指定する 1 つ以上の識別子を値として受け取ります。

使用構文:

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

各カウンター名 (識別子) の後に、要素の出現ごとに番号を付けることを指定するオプションの 値を続けることができます。カウンタをインクリメントする必要がある場合。デフォルトの増分は 1 です。ゼロと負の整数が許可されます。負の整数が指定された場合、カウンタはデクリメントされます。

counter-increment 属性は、counter-reset 属性と組み合わせて使用​​する必要があります。例を見てみましょう:

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

3。 ## CSS カウンターを表示するには、#counter() 関数を content 属性とともに使用する必要があります。 CSS カウンター名をパラメーターとして受け取り、それを値として content プロパティに渡します。このプロパティは、:before 疑似要素を使用してカウンターを生成されたコンテンツとして表示します。

例:

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

counter() 関数には、counter(name) と counter(name, style) の 2 つの形式があります。

name パラメーターは、表示されるカウンターの名前です。カウンターの名前を指定するには、counter-reset 属性を使用します。

style パラメーターは、カウンターのスタイルを定義するために使用されます。デフォルトでは、カウンターは 10 進数を使用してフォーマットされます。つまり、カウンターは数値の形式でコンテンツを生成します。ただし、

css list-style-type 属性

の使用可能なスタイルはすべてカウンターでも使用できます。つまり、10 進数のカウンタ、ローマ字、小文字などで表示されるカウンタを作成できるということです。可能なカウンター スタイルはすべて次のとおりです。 disc: 実線の円スタイル

circle: 中空の円スタイル

square: 実線の正方形スタイル

10 進数: アラビア数字style

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() 関数には、counters(name, string) とcounters(name, string, style) という 2 つの形式もあります。

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 中国語 Web サイトの他の関連記事を参照してください。