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