CSS3之利用選擇器和content屬性在頁面中插入內容
阿新 • • 發佈：2019-02-13
使用選擇器在頁面中插入文字
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> p:before { content: '你好,'; color: white; background-color: orange; font-family: '黑體'; } p:after { content: ',見到你很高興!'; color: white; background-color: orange; font-family: 黑體; } p.zhang:after { content: none; } p.zhang:before { content: none; } </style> </head> <body> <p>小紅</p> <p class="zhang">張林</p> <p>王強</p> </body> </html>
在標題前插入影象檔案
在CSS3中，使用content屬性的attr（屬性名）來指定attr的值。這樣可以將某個屬性的屬性值顯示出來。<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> h1:after { content: url(img.png); } </style> </head> <body> <p>王強</p> </body> </html>
新增編號<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> img:after { content: attr(alt); display: block; } </style> </head> <body> <p align="center"> <img src="xp.png" alt="系統圖片" width="200" height="200" /> </p> </body> </html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h3:before
{
content: '第'counter(count)'章';
color: red;
font-family: 黑體;
font-size: 24px;
}
h3
{
counter-increment: count;
}
</style>
</head>
<body>
<h3>HTML5簡介</h3>
<h3>HTML5結構</h3>
<h3>多媒體播放</h3>
<h3>本地儲存</h3>
<h3>表單與檔案</h3>
<h3>新增元素</h3>
</body>
</html>
使用before選擇器或after選擇器的counter屬性，不但可以在編號中追回文字和設定樣式，還可以為編號設定編號型別。
指定編號型別可以使用list-style-type屬性，常用的編號種類介紹如下：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h1:before
{
content: counter(count, upper-roman)'.';
color: red;
font-family: 黑體;
}
h1
{
counter-increment: count;
}
h2:before
{
content: counter(count1)'.';
color: red;
font-family: 黑體;
}
h2
{
counter-increment: count1;
margin-left: 50px;
}
</style>
</head>
<body>
<h1>建立網站及站點資訊</h1>
<h2>網站建設理論</h2>
<h1>安裝IIS伺服器</h1>
<h2>站點管理</h2>
<h1>網站欄目及版塊設計</h1>
<h2>網頁文字概述</h2>
<h1>設計產品資訊版塊</h1>
<h2>多彩文字設計</h2>
</body>
</html>
在符號兩邊嵌入文字元號
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h1:before
{
content: open-quote;
color: red;
font-family: 黑體;
}
h1:after
{
content: close-quote;
color: red;
font-family: 黑體;
}
h1
{
quotes: "《" "》";
}
</style>
</head>
<body>
<h1>ASP基礎教程與實驗指導</h1>
<h1>計算機組裝</h1>
<h1>HTML5從新手到高手</h1>
</body>
</html>
content屬性主要用來插入內容，而該屬性與before和after偽元素配合使用，將生成的內容放在一個元素內容的前面或後面。另外，該內容建立的框型別可以用display屬性控制。
content: normal string attr() uri() counter()
normal 預設值。
string 插入文字內容。
attr() 插入元素的屬性值。
uri() 插入一個外部資源（影象、聲頻、視訊或瀏覽器支援的其他任何資源）
counter() 計數器，用於插入排序標識。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.text
{
width: 400px;
height: 50px;
line-height: 50px;
overflow: hidden;
text-align: center;
color: #ff0000;
border: #993300 solid 1px;
}
#text_c:before
{
content: "您使用的瀏覽器支援content屬性";
}
</style>
</head>
<body>
<div id="text_c" class="text">
---content屬性
</div>
</body>
</html>