ホームページ > 記事 > ウェブフロントエンド > css3を使用してcontent属性を追加するにはどうすればよいですか? content 属性の使用法 (コード例)
css3を使用してcontent属性を追加するにはどうすればよいですか? content 属性の使用法 (コード例)
- 青灯夜游オリジナル
- 2018-09-25 16:41:483506ブラウズ
この章では、css3 を使用して content 属性を追加する方法を紹介します。 content 属性の使用法 (コード例)、css3 content (コンテンツ) 属性の詳細な説明により、content 属性を使用して挿入、フロートのクリア、およびコンテンツの挿入を行う方法を誰もが知ることができます。困っている友人は参考にしていただければ幸いです。
1. content 属性の詳細な説明
1. content 属性の役割:
content 属性は、多くの場合 :before を使用して、生成されたコンテンツを挿入するために使用されます。セレクターと :after セレクター float をクリアしたり、生成されたコンテンツを要素のコンテンツの前後に配置したりする場合に使用されます。
2. 基本構文:
content: normal | string | attr() | uri() | counter();
normal: デフォルト値。
string: テキストの内容 (通常は文字列) を検索します。
attr(): 要素の属性値を挿入します。構文: attr(attribute)。
uri(): 外部リソース ファイルを挿入します。これは、画像、音声、ビデオ ファイル、またはブラウザーでサポートされているその他のリソースです。
counter(): ソート識別子の挿入に使用されるカウンター。counter() は数値だけでなく、英数字またはローマ数字も追加できます。 構文: content:couter (カウンター名、数値タイプ)
3. ブラウザのサポート:
//一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}原則: <!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>レンダリング:  "153786337850877css3を使用してcontent属性を追加するにはどうすればよいですか? content 属性の使用法 (コード例)")
<!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>レンダリング:
3)、画像を挿入します 
css content 属性を直接追加することもできます要素の前後に画像を挿入します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入图片</title>
<style>
p::after {
content: url(csscss3を使用してcontent属性を追加するにはどうすればよいですか? content 属性の使用法 (コード例));
border: 1px solid powderblue;
}
</style>
</head>
<body>
<p>这是一段测试文字,文字后面是图片：</p>
</body>
</html>レンダリング:
概要: 上記は、CSS コンテンツ属性の適用例です。簡単です。自分で書いてみてください。 
以上がcss3を使用してcontent属性を追加するにはどうすればよいですか? content 属性の使用法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。