css3を使用してcontent属性を追加するにはどうすればよいですか? content 属性の使用法 (コード例)-CSSチュートリアル-php.cn

css3を使用してcontent属性を追加するにはどうすればよいですか? content 属性の使用法 (コード例)

青灯夜游

リリース： 2018-09-25 16:41:48

オリジナル

3564 人が閲覧しました

この章では、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. ブラウザのサポート:

css3を使用してcontent属性を追加するにはどうすればよいですか? content 属性の使用法 (コード例)

#すべてのブラウザは content 属性をサポートします。

注: IE8 は、!DOCTYPE が指定されている場合にのみ Content 属性をサポートします。

2. css content 属性の適用

1. css content 属性は、float をクリアするために疑似クラスを使用します。

css の content 属性は、疑似要素の前後最も一般的なアプリケーションは、疑似クラスを使用して浮動小数点数をクリアすることです。

//一种常见利用伪类清除浮动的代码
.clearfix:after {
    content:"."; //这里利用到了content属性
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}
.clearfix {
    *zoom:1;
}

ログイン後にコピー

原則:

after 疑似要素は、コンテンツを使用して、要素の 1 ポイント後ろのコンテンツを持つブロックレベルの要素を生成し、次に、clear:both を使用してクリアします。フロート。

2. CSS content 属性は、擬似要素を使用してページにコンテンツを挿入します。

1) プレーンテキストを挿入します。

使用法: content: "挿入された記事"、または 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>

ログイン後にコピー

レンダリング:

css3を使用してcontent属性を追加するにはどうすればよいですか? content 属性の使用法 (コード例)

2) テキストシンボルを挿入します

CSS content 属性の次の属性値を使用して、テキストシンボルの挿入 (削除) を実装できます。

none Nothing として指定した場合、コンテンツを設定します。 ## open-quote コンテンツを開始引用符に設定します。

close-quote コンテンツを終了引用符に設定します。

no-open-quote 指定した場合は、コンテンツの開始引用符を削除します。

no-close-quote if 指定すると、コンテンツの終了引用符が削除されます。

継承指定されたコンテンツ属性の値は、親要素から継承される必要があります。

content 属性の open-quote 属性値と close-quote 属性値は、文字列の両側に括弧、一重引用符、二重引用符などのネストされたテキスト記号を追加します。 open-quote は開始テキストシンボルを追加するために使用され、close-quote は終了テキストシンボルを追加するために使用されます。

<!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)、画像を挿入します css3を使用してcontent属性を追加するにはどうすればよいですか? content 属性の使用法 (コード例)

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 属性の使用法 (コード例)