CSS : Cascading Style Sheet 層疊式樣式表
HTML 用于控制網(wǎng)頁的結(jié)構(gòu)，CSS則用于控制網(wǎng)頁的外觀，想要做出美觀好看的網(wǎng)頁，CSS是必須的
引入外部樣式表：
它的屬性 rel 和 type是固定的
語法：
<link rel="stylesheet" type="text/css" href="CSS文件路徑" />
引入內(nèi)部樣式表
type屬性也是固定的
語法：
<style type="text/css">
...
</style>
引入行內(nèi)樣式表
語法：
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
</head>
<body>
<div style="color:red";> 這里有一段紅色字體的話</div>
<div style="color:green";> 這里有一段綠色字體的話</div>
<div style="color:yellow";> 這里有一段黃色字體的話</div>
</body>
</html>
效果：
CSS選擇器
HTML中有兩個屬性，如下：
id屬性
id具有唯一性，不可重復
class屬性
class元素可以重復
CSS選擇器 – 元素選擇器
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
<style type="text/css">
div{color:red;}
</style>
</head>
<body>
<div>這里有一段紅色字體的話</div>
<p>這里是另外一段話</p>
</body>
</html>
由于選擇的元素是 div元素，所以只有div項能顯示紅色字體
效果：
CSS選擇器 – id選擇器
之前提到 id 是唯一的，可以用在這里進行選擇
用法：
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
<style type="text/css">
#x{color:red;}
</style>
</head>
<body>
<div id="x">這里有一段紅色字體的話</div>
<p>這里是另外一段話</p>
<div>這里還有一段話</div>
</body>
</html>
這里我定義了一個id叫做 x , 然后css選擇器使用了 #x 選擇了 id選擇器。
效果：
CSS選擇器 – class選擇器
用法：
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
<style type="text/css">
.x{color:red;}
</style>
</head>
<body>
<div class="x">這里有一段紅色字體的話</div>
<p>這里是另外一段話</p>
<div>這里還有一段話</div>
<div class="x">這里好像還有一段紅色字體的話</div>
</body>
</html>
如例：
這里我有兩個class，都叫做x,我使用 .x 選擇器選中，相同class都會吃到樣式
CSS選擇器 – 后代選擇器
用法：
這里我們使用id="x", id="y" 分別定義了父類x,y,然后分別設定了父類下的屬性的樣式
可以看到下面
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
<style type="text/css">
#x div{color:red;}
#y p{color: brown;}
</style>
</head>
<body>
<div class="x">這里有一段紅色字體的話</div>
<p>這里是另外一段話</p>
<div>這里還有一段話</div>
<div class="x">這里好像還有一段紅色字體的話</div>
<div id="x">
<div>x---123</div>
<p>y --- 123 </p>
</div>
<div id="y">
<div>CSS</div>
<P> XAS </P>
</div>
</body>
</html>
結(jié)果：
CSS選擇器 – 群組選擇器
用法：
使用p, div {color:blue;} 定義群組 p和 div都顯示藍色字體，沒有覆蓋后代選擇器定義的顏色文章來源：http://www.zghlxwxcb.cn/news/detail-803669.html
<!DOCTYPE html>
<html>
<head>
<title>表單</title>
<meta charset="utf-8"/>
<style type="text/css">
#x div{color:red;}
#y p{color: brown;}
p, div {color:blue;}
</style>
</head>
<body>
<div class="x">這里有一段紅色字體的話</div>
<p>這里是另外一段話</p>
<div>這里還有一段話</div>
<div class="x">這里好像還有一段紅色字體的話</div>
<h6>h6-1</h6>
<div id="x">
<div>x---123</div>
<p>y --- 123 </p>
<h6>h6</h6>
</div>
<div id="y">
<div>CSS</div>
<P> XAS </P>
</div>
<div class="y">
<div>CSS</div>
<P> XAS </P>
</div>
<div class="y">
<div>CSS</div>
<P> XAS </P>
</div>
</body>
</html>
效果：
可以看到貌似兩個父類下的所有未定義字體顏色的元素都變成了藍色，而父類外的，也沒被群組定義的，字體顏色未改變
文章來源地址http://www.zghlxwxcb.cn/news/detail-803669.html
到了這里，關于HTML---CSS-引入樣式表和選擇器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
