如何在css3中使用新增屬性content

發(fā)布時間：2020-07-21 10:16:27 來源：億速云閱讀：140 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)如何在css3中使用新增屬性content，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

一、詳解content屬性

1、content屬性的作用：

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

2、基本語法：

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

normal ：默認(rèn)值。

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

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

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

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

3、瀏覽器支持：

如何在css3中使用新增屬性content

所有瀏覽器都支持 content 屬性。

注：IE8只有指定!DOCTYPE才支持Content屬性。

二、css content屬性的應(yīng)用

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

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

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

原理：

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

2、css content屬性利用偽元素實現(xiàn)頁面中的內(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>

效果圖：

如何在css3中使用新增屬性content

2）插入文字符號

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

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

open-quote 設(shè)置Content是開口引號；

close-quote 設(shè)置Content是閉合引號；

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

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

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

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

<!DOCTYPE html>
<html>

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

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

</html>

效果圖：

如何在css3中使用新增屬性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>這是一段測試文字,文字后面是圖片：</p>
	</body>

</html>

效果圖：

如何在css3中使用新增屬性content

總結(jié)：以上是css content屬性的應(yīng)用的一些例子，很簡單，大家可以自己動手編寫試試。

以上就是如何在css3中使用新增屬性content，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

如何在css3中使用新增屬性content

猜你喜歡

最新資訊

相關(guān)推薦

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