首頁 > 文章 > web前端 > css content屬性怎麼用

css content屬性怎麼用

青灯夜游原創: 2019-05-28 17:28:464156瀏覽

css content屬性用於插入產生的內容，常和:before選擇器和:after選擇器搭配使用，清除浮動或將產生的內容放在一個元素內容的前面或後面。所有瀏覽器都支援 content 屬性。

css content屬性怎麼用

css content屬性怎麼用？

content屬性用於插入產生的內容，常和:before選擇器和:after選擇器配合使用，清除浮動或將產生的內容放在一個元素內容的前面或後面。

基本語法：

content: normal | string | attr() | uri() | counter();

●　normal ：預設值。

●　string ：查入文字的內容，一般是一個字串。

●　attr() ：插入元素的屬性值，語法：attr(attribute)。

●　uri() ：插入一個外部資源文件，可以是圖像，音頻，視頻文件或瀏覽器所支援的其他任何資源。

●　counter() ：計數器，用於插入排序標識,counter()不僅可以追加數字編號，還可以追加字母編號或羅馬數字編號，語法：content:couter(計數器名，編號種類)

說明：此屬性用於定義元素之前或之後放置的生成內容。預設地，這往往是行內內容，不過該內容創建的框類型可以用屬性 display 控制。

註解：所有瀏覽器都支援 content 屬性。如果已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支援 content 屬性。

css content屬性的使用範例

#1、css content屬性利用偽類別after清除浮動

#css的content屬性專門應用在before/after 偽元素上，最常見的應用是利用偽類清除浮動。

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

原則：

after偽元素透過 content 在元素的後面產生了內容為一個點的區塊級素，再利用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>

效果圖：

css content屬性怎麼用

##2 ）插入文字符號

可以使用css content屬性的下列屬性值實作文字符號的插入（刪除）：

●　none：設定Content，如果指定成Nothing;

●　 open-quote：設定Content是開口引號；

●　 close-quote：設定Content是閉合引號；

# ●　 no-open-quote：如果指定，移除內容的開始引號；

●　no-close-quote：如果指定，移除內容的閉合引號；

●　 inherit：指定的content屬性的值，應該從父元素繼承。

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>

效果圖：

css content屬性怎麼用

3)、插入圖片

css content屬性也可以直接在元素前/後插入圖片

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插入图片</title>
		<style>
			p::after {
				content: url(csscss content屬性怎麼用);
				border: 1px solid powderblue;
			}
		</style>
	</head>

	<body>
		<p>这是一段测试文字,文字后面是图片：</p>
	</body>

</html>

效果圖：

css content屬性怎麼用 #

以上是css content屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css String 字符串插入排序继承 Attribute 选择器 display 伪类伪元素

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css empty-cells屬性怎麼用下一篇：css empty-cells屬性怎麼用

看更多