ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3コンテンツ属性の実装手順
CSS3コンテンツ属性の実装手順
- php中世界最好的语言オリジナル
- 2017-12-01 10:01:492040ブラウズ
:before"、":after" 疑似クラスが CSS3 に登場したことはわかっているので、今日は CSS3 の content 属性を実装する手順を説明します。以下はケースです。見てみましょう。
css3 の ":before"、":after" 疑似クラスで使用されます。
次のように記述できます。
h1:after{
content:'h1后插入的文本';
...}これら 2 つのセレクターの機能と効果については、ここでは紹介しません。主に、前述の css 属性の内容 :after および :before 擬似要素とともに使用して、オブジェクトの前後にコンテンツを表示します。
normal: none と同じように動作します。
none: 値を生成しません。 attr>: タグ属性値を挿入します9bb6a7d109b3f2bf35f7e2e9bd87f98a: 指定された絶対アドレスまたは相対アドレスを使用して、外部リソース (画像、音声、ビデオ、またはブラウザーでサポートされているその他のリソース) を挿入します98c455a79ddfebb79781bff588e7b37e: 文字列を挿入します
counter( name):名前付きカウンターを使用します
counter(name,
list-style-type): 名前付きカウンターを使用し、指定された list-style-type 属性に準拠します counters(name, string): すべての名前付きカウンターを使用します 名前付きカウンター
counters(name, string, list-style-type): すべての名前付きカウンターを使用し、指定された list-style-type 属性に準拠します。
no-close-quote: quotes 属性の post タグを挿入しません。ネストレベル
no-open-quote: quotes 属性のフロントタグを挿入しませんが、ネストレベルを下げます
close-quote: quotes 属性のポストタグを挿入します
open-quote: フロントタグを挿入します。属性の
ここで理解するのが難しい値は次のとおりです: counter(name);
以下は主にこのセクションを要約し、最後に各値のデモを示します。
たとえば、次の html があります。構造:
<ul> <li>这个是有序列表</li> <li>这个是有序列表</li> <li>这个是有序列表</li> <li>这个是有序列表</li> <li>这个是有序列表</li></ul>
各 li の後に現在の li インデックス値を追加したい:
ul li{
counter-increment:index;
}
ul li:after{
content:'统计：'counter(index);
display:block;
line-height:35px;
}説明:
count(name) ここでの名前は事前に指定する必要があり、それ以外の場合はすべての値が 0 になります。
count(name,list-style-type) ここで list-style-type は CSS の list-style-type 属性の値です 完全なデモを以下に示します<!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>
これらを読んでいると思いますメソッドをマスターした後は、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。
CSS3 の翻訳属性の詳細な紹介
以上がCSS3コンテンツ属性の実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。