css中如何使用content屬性

發(fā)布時(shí)間：2020-09-24 13:32:19 來(lái)源：億速云閱讀：177 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)css中如何使用content屬性的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧。

css content屬性用于插入生成的內(nèi)容，常和:before選擇器和:after選擇器配合使用，清除浮動(dòng)或?qū)⑸傻膬?nèi)容放在一個(gè)元素內(nèi)容的前面或后面。所有瀏覽器都支持 content 屬性。

css content屬性怎么用？

content屬性用于插入生成的內(nèi)容，常和:before選擇器和:after選擇器配合使用，清除浮動(dòng)或?qū)⑸傻膬?nèi)容放在一個(gè)元素內(nèi)容的前面或后面。

基本語(yǔ)法：

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

●　normal ：默認(rèn)值。

●　string ：查入文本的內(nèi)容，一般是一個(gè)字符串。

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

●　uri() ：插入一個(gè)外部資源文件，可以是圖像，音頻，視頻文件或?yàn)g覽器所支持的其他任何資源。

●　counter() ：計(jì)數(shù)器，用于插入排序標(biāo)識(shí),counter()不僅可以追加數(shù)字編號(hào)，還可以追加字母編號(hào)或羅馬數(shù)字編號(hào)，語(yǔ)法：content:couter(計(jì)數(shù)器名，編號(hào)種類)

說(shuō)明：該屬性用于定義元素之前或之后放置的生成內(nèi)容。默認(rèn)地，這往往是行內(nèi)內(nèi)容，不過該內(nèi)容創(chuàng)建的框類型可以用屬性 display 控制。

注釋：所有瀏覽器都支持 content 屬性。如果已規(guī)定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 屬性。

css content屬性的使用示例

1、css content屬性利用偽類after清除浮動(dòng)

css的content屬性專門應(yīng)用在 before/after 偽元素上，最常見的應(yīng)用是利用偽類清除浮動(dòng)。

//一種常見利用偽類清除浮動(dòng)的代碼
.clearfix:after {
    content:"."; //這里利用到了content屬性
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}
.clearfix {
    *zoom:1;
}

原理：

after偽元素通過 content 在元素的后面生成了內(nèi)容為一個(gè)點(diǎn)的塊級(jí)素，再利用clear:both清除浮動(dòng)。

2、css content屬性利用偽元素實(shí)現(xiàn)頁(yè)面中的內(nèi)容插入

1）插入純文字

用法：content:"插入的文章"，或者content:none不插入內(nèi)容

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插入純文字</title>
		<style>
			h2::after{
			    content:",在h2后插入內(nèi)容"
			}
			h3::after{
			    content:none
			}
		</style>
	</head>
	<body>
		<h2>這是h2</h2>
        <h3>這是h3</h3>
	</body>
</html>

效果圖：

css中如何使用content屬性

2）插入文字符號(hào)

可以使用css content屬性的以下屬性值實(shí)現(xiàn)文字符號(hào)的插入（刪除）：

●　none：設(shè)置Content，如果指定成Nothing；

●　 open-quote：設(shè)置Content是開口引號(hào) ；

●　 close-quote：設(shè)置Content是閉合引號(hào)；

●　 no-open-quote：如果指定，移除內(nèi)容的開始引號(hào) ；

●　no-close-quote：如果指定，移除內(nèi)容的閉合引號(hào) ；

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

content屬性的open-quote屬性值和close-quote屬性值在字符串兩邊添加諸如括號(hào)、單引號(hào)、雙引號(hào)之類的嵌套文字符號(hào)。open-quote用于添加開始的文字符號(hào)，close-quote用于添加結(jié)束的文字符號(hào)。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插入文字符號(hào)</title>
		<style>
			h2 {quotes: "(" ")";/*利用元素的quotes屬性指定文字符號(hào)*/}
			h2::before {content: open-quote;}
			h2::after {content: close-quote;}
			
			h3 {quotes: "\"" "\"";/*添加雙引號(hào)要轉(zhuǎn)義*/}
			h3::before {content: open-quote;}
			h3::after {content: close-quote;}
		</style>
	</head>

	<body>
		<h2>這是h2</h2>
		<h3>這是h3</h3>
	</body>

</html>

效果圖：

css中如何使用content屬性

3)、插入圖片

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插入圖片</title>
		<style>
			p::after {
				content: url(css3.jpg);
				border: 1px solid powderblue;
			}
		</style>
	</head>

	<body>
		<p>這是一段測(cè)試文字,文字后面是圖片：</p>
	</body>

</html>

效果圖：

css中如何使用content屬性

感謝各位的閱讀！關(guān)于css中如何使用content屬性就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

css中如何使用content屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽