ホームページ > 記事 > ウェブフロントエンド > CSSコンテンツ属性の使い方
CSSコンテンツ属性の使い方
- 青灯夜游オリジナル
- 2019-05-28 17:28:464124ブラウズ
css content 属性は、生成されたコンテンツを挿入するために使用されます。多くの場合、フローティングをクリアしたり、生成されたコンテンツを要素のコンテンツの前または後ろに配置したりするために、:before セレクターおよび :after セレクターとともに使用されます。すべてのブラウザは content 属性をサポートしています。
css コンテンツ属性を使用するにはどうすればよいですか?
content 属性は、生成されたコンテンツを挿入するために使用されます。多くの場合、フロートをクリアしたり、生成されたコンテンツをコンテンツの前に配置したりするために、:before セレクターおよび :after セレクターと組み合わせて使用されます。要素以降の。
基本構文:
content: normal | string | attr() | uri() | counter();
●Normal: デフォルト値。
● 文字列: テキストの内容 (通常は文字列) を検索します。
##●attr(): 要素の属性値を挿入します。構文: attr(attribute)。 ● uri(): 外部リソース ファイルを挿入します。これは、画像、音声、ビデオ ファイル、またはブラウザでサポートされているその他のリソースです。 ●counter(): ソート識別子の挿入に使用されるカウンター。counter() は数値だけでなく、英数字やローマ数字も追加できます。構文:content:couter(カウンター名,数値型)
説明: この属性は、要素の前後に配置される生成コンテンツを定義するために使用されます。デフォルトでは、これは多くの場合インライン コンテンツですが、このコンテンツが作成するボックスのタイプは、表示属性を使用して制御できます。
注: すべてのブラウザは content 属性をサポートしています。 Internet Explorer 8 (以降) は、!DOCTYPE が指定されている場合、content 属性をサポートします。
css コンテンツ属性の使用例
1. CSS コンテンツ属性は、float をクリアするために疑似クラスを使用します。
css の content 属性は、疑似要素の前後に特別に適用されます。最も一般的なアプリケーションは、疑似クラスを使用して float をクリアすることです。//一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}原則: 2. CSS content 属性は、擬似要素を使用してコンテンツをページに挿入します
1) プレーン テキストを挿入しますUsage: content: "Inserted Article"、または content:none はコンテンツを挿入しません 例:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入纯文字</title>
<style>
h1::after{
content:",在h1后插入内容"
}
h2::after{
content:none
}
</style>
</head>
<body>
<h1>这是h1</h1>
<h2>这是h2</h2>
</body>
</html>レンダリング: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入文字符号</title>
<style>
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;}
</style>
</head>
<body>
<h1>这是h1</h1>
<h2>这是h2</h2>
</body>
</html>レンダリング: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入图片</title>
<style>
p::after {
content: url(cssCSSコンテンツ属性の使い方);
border: 1px solid powderblue;
}
</style>
</head>
<body>
<p>这是一段测试文字,文字后面是图片：</p>
</body>
</html>レンダリングの前後に画像を挿入します:
以上がCSSコンテンツ属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。