1. 選擇器
1.1 id 選擇器
- 語(yǔ)法
用 "
#標(biāo)簽名" 定義
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">受id選擇器影響</p>
<p>不受選擇器影響</p>
</body>
</html>
-
顯示結(jié)果
image.png
1.2 class 選擇器
- 語(yǔ)法
用 "
元素.標(biāo)簽名" 定義
如：p.class1
不寫(xiě)元素表示所有
- 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-SONG</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">標(biāo)題居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
2. 樣式
2.1 內(nèi)聯(lián)樣式
- 作用
當(dāng)個(gè)別元素需要使用特殊樣式時(shí)
- 方法
在相關(guān)標(biāo)簽中加入樣式屬性。
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body style="background-color:red;">
<h2 style="background-color:yellow;color:blue">黃底藍(lán)字的標(biāo)題</h2>
<p style="background-color:green;">綠底黑字的段落</p>
</body>
</html>
2.2 內(nèi)部樣式表
- 語(yǔ)法
在head中定義CSS表
- 示例
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<h1 style="text-align:center;">標(biāo)題</h1>
<p>段落內(nèi)容和body是head中style定義的</p>
</body>
</html>
-
輸出
image.png
2.3 外部樣式表
指定外部文件定義CSS表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
說(shuō)明：
- rel 是鏈接的類(lèi)型，此處說(shuō)明是 style sheet
- type 是外聯(lián)文件的類(lèi)型
- href 是外聯(lián)文件的位置
2.4 多重樣式優(yōu)先級(jí)
如果一個(gè)元素有幾個(gè)樣式則
（內(nèi)聯(lián)樣式）Inline style > （內(nèi)部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認(rèn)樣式
image.png
