|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。 本章給大家介紹如何使用css3新增屬性content？content屬性的使用（代碼實(shí)例），詳解css3 content（內(nèi)容）屬性，讓大家知道如何利用content屬性如何插入清除浮動，插入內(nèi)容。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。一、詳解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() ： 插入一個外部資源文件，可以是圖像，音頻，視頻文件或?yàn)g覽器所支持的其他任何資源。 counter() ： 計(jì)數(shù)器，用于插入排序標(biāo)識,counter()不僅可以追加數(shù)字編號，還可以追加字母編號或羅馬數(shù)字編號，語法：content:couter(計(jì)數(shù)器名，編號種類) 3、瀏覽器支持：
所有瀏覽器都支持 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)容為一個點(diǎn)的塊級素，再利用clear:both清除浮動。 2、css content屬性利用偽元素實(shí)現(xiàn)頁面中的內(nèi)容插入 1）插入純文字 用法：content:"插入的文章"，或者content:none不插入內(nèi)容 例： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入純文字</title>
<style>
h1::after{
content:",在h1后插入內(nèi)容"
}
h2::after{
content:none
}
</style>
</head>
<body>
<h1>這是h1</h1>
<h2>這是h2</h2>
</body>
</html>效果圖：
2）插入文字符號 可以使用css content屬性的以下屬性值實(shí)現(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>
h1 {quotes: "(" ")";/*利用元素的quotes屬性指定文字符號*/}
h1::before {content: open-quote;}
h1::after {content: close-quote;}
h2 {quotes: "\"" "\"";/*添加雙引號要轉(zhuǎn)義*/}
h2::before {content: open-quote;}
h2::after {content: close-quote;}
</style>
</head>
<body>
<h1>這是h1</h1>
<h2>這是h2</h2>
</body>
</html>效果圖：
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>效果圖：
總結(jié)：以上是css content屬性的應(yīng)用的一些例子，很簡單，大家可以自己動手編寫試試。 以上就是如何使用css3新增屬性content？content屬性的使用（代碼實(shí)例）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！ 網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個人學(xué)習(xí)測試使用，請?jiān)谙螺d后24小時內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
