如何使用css3新增屬性content？ content屬性的使用（程式碼實例）-css教學-PHP中文網

如何使用css3新增屬性content？ content屬性的使用（程式碼實例）

青灯夜游

發布： 2018-09-25 16:41:48

原創

3509 人瀏覽過

本章跟大家介紹如何使用css3新增屬性content？ content屬性的使用（程式碼實例），詳解css3 content（內容）屬性，讓大家知道如何利用content屬性如何插入清除浮動，插入內容。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

一、詳解content屬性

1、content屬性的作用：

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

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屬性。

二、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>

登入後複製

效果圖：

如何使用css3新增屬性content？ 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>

登入後複製

效果圖：

如何使用css3新增屬性content？ content屬性的使用（程式碼實例）

3)、插入圖片

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插入图片</title>
		<style>
			p::after {
				content: url(css如何使用css3新增屬性content？ content屬性的使用（程式碼實例）);
				border: 1px solid powderblue;
			}
		</style>
	</head>

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

</html>

登入後複製

效果圖：

如何使用css3新增屬性content？ content屬性的使用（程式碼實例）