CSS 基礎チュートリアル

CSS 盒モデル

CSS3基本教程

CSS リファレンスマニュアル

CSS @規則(RULES)

css レイアウト(网页布局)CSS ワード-wrap（自動改行）

CSS カウンタ(计数器)

CSS counterカウンタは変数に似ています。これらはCSSによって維持され、CSSルールによって増やされ、使用回数を追跡することができます。主な用途は、指定されたルールでノード要素の使用回数を計算することです。

CSS counterカウンタは、CSSに基づくシンプルな増加および生成された内容の数字を表示するのに役立ちます。

CSSカウンタ属性

以下はCSSカウンタと一緒に使用される属性の一覧です：

counter-reset：カウンタを生成またはリセットするために使用されます。
counter-increment：カウンタの値を増やすために使用されます。
content：生成された内容を挿入するために使用されます。
counter()またはcounters()関数：カウンタの値を要素に追加するために使用されます。

注意：CSSカウンタを使用する前に、counterを使用する必要があります。-resetでそれを再設定します。

CSS Counter オンラインサンプル

ページにカウンタを作成し、次の各要素にカウンタの値を増やす例を示します。

以下の例を参照してください：

例

<!DOCTYPE html>　　
<html>　　　　　　
<head>　　
<style>　　
body {　　
　　　　counter-reset: section;　　
}　　
h2::before {　　
　　　　counter-increment: section;　　
　　　　content: "Section " counter(section) ": ";　　
}　　
</style>　　
</head>　　
<body>　　
<h1>CSS Counters カウンタ例:</h1>　　
<h2>Java チュートリアル</h2>　　
<h2>HTML チュートリアル</h2>　　
<h2>CSS チュートリアル</h2>　　
<h2>Oracle チュートリアル</h2>　　
<p><strong>注意:</strong>　IE8　ブラウザ下で使用する場合は、!DOCTYPE を宣言する必要があります.</p>　　
</body>　　
</html>

テストを見て‹/›

注意：上記の例では、主体選択子でページにカウンタを作成し、各h2要素がカウンタの値を増やし、各要素の先頭に「Section <カウンタの値>：」を追加します。2要素。

CSSネストカウンタ

カウンタ内にカウンタを作成することもできます。これをカウンタネストと呼びます。以下に例を示してネストカウンタを説明します。

以下の例を参照してください：

例

<!DOCTYPE html>　　
<html>　　
<head>　　
<style>　　
body {　　
　　　　counter-reset: section;　　
}　　
h1　{　　
　　　　counter-reset: subsection;　　
}　　
h1::before {　　
　　　　counter-increment: section;　　
　　　　content: "Section " counter(section) ". ";　　
}　　
h2::before {　　
　　　　counter-increment: subsection;　　
　　　　content: counter(section) "." counter(subsection) " ";　　
}　　
</style>　　
</head>　　
<body>　　
<h1>Java チュートリアル:</h1>　　
<h2>Core Java チュートリアル</h2>　　
<h2>Servlet チュートリアル</h2>　　
<h2>JSP ツールチュートリアル</h2>　　
<h2>Spring ツールチュートリアル</h2>　　
<h2>Hibernate ツールチュートリアル</h2>　　
　　
<h1>ウェブ技術チュートリアル：</h1>　　
<h2>HTML ツールチュートリアル</h2>　　
<h2>CSS ツールチュートリアル</h2>　　
<h2>jQuery ツールチュートリアル</h2>　　
<h2>Bootstrap ツールチュートリアル</h2>　　
　　
<h1>データベースチュートリアル：</h1>　　
<h2>SQL ツールチュートリアル</h2>　　
<h2>MySQL ツールチュートリアル</h2>　　
<h2>PL/>SQL ツールチュートリアル</h2>　　
<h2>Oracle ツールチュートリアル</h2>　　
<p><strong>注意:</strong>　!DOCTYPEが指定されている場合にのみ、IE8これらの属性のみサポートされています。</p>　　
</body>　　
</html>

テストを見て‹/›

注意：上記の例では、セクションに対するカウンタが作成され、セクション内にネストされたカウンタとして名前が「subsection」のカウンタが作成されています。

異なるネストレーションレベルのカウンタ

ネストレーションカウンタを使用してプロファイルリストを作成できます。異なるネストレーションレベルのカウンタ間に文字列を挿入するのに役立ちます。

以下の例を参照してください：

例

<!DOCTYPE html>　　
<html>　　
<head>　　
<style>　　
ol {　　
　　　　counter-reset: section;　　
　　　　list-style-type: none;　　
}　　
　　
li::before {　　
　　　　counter-increment: section;　　
　　　　content: counters(section,".") " ";　　
}　　
</style>　　
</head>　　
<body>　　
<h2>異なるネストレーションレベルのカウンタ</h2>　　
<ol>　　
　　<li>item</li>　　
　　<li>item　　
　　　　<ol>　　
　　　　　　<li>item</li>　　
　　　　　　<li>item</li>　　
　　　　　　<li>item　　
　　　　　　　　<ol>　　
　　　　　　　　　　<li>item</li>　　
　　　　　　　　　　<li>item</li>　　
　　　　　　　　　　<li>item</li>　　
　　　　　　　　</ol>　　
　　　　　　</li>　　
　　　　　　<li>item</li>　　
　　　　</ol>　　
　　</li>　　
　　<li>item</li>　　
　　<li>item</li>　　
</ol>　　
<p><strong>注意:</strong>　!DOCTYPEが指定されている場合にのみ、IE8これらの属性のみサポートされています。</p>　　
</body>　　
</html>

テストを見て‹/›

css レイアウト(网页布局)CSS ワード-wrap（自動改行）