4.1 CSS 基本概念
CSS：Cascade Style Sheet 層疊樣式表。
樣式表： 樣式的集合，定義HTML元素顯示的方式。
4.2 CSS 的使用
使用 CSS 的三種方式：
-
外部樣式表：需要配合外部的 CSS 樣式文件使用
index.html 頁面
<!-- index.html --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS 樣式</title> <!-- 外部樣式表 --> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="div1"></div> </body> </html>style.css 頁面
/* style.css */ #div1{ width: 200px; height: 200px; background: #ef5576; } -
內部樣式表
index.html
<head> ...... <style type="text/css"> #div1 { width: 400px; height: 400px; background: blue; } </style> </head> -
內聯樣式表
index.html
<body> <div style="width: 500px; height:500px; background: yellow"> ...... </div> </body>
優先級： 內聯 CSS > 內部 CSS > 外部 CSS
結論：
- 如果一個樣式在多個網頁中使用，只能使用外部 CSS 樣式表。
- 如果一個樣式只是在一個頁面中使用，可以考慮放到內部樣式表。
- 除非有特殊情況，否則一般不建議使用內聯樣式。
4.3 CSS 的格式
格式：
選擇器 {
屬性1: 值;
屬性2: 值;
......
}
注釋的格式：
/* 這是注釋的內容 */
注意：
- 如果值是字符串，可以使用雙引號也可以使用單引號。
- 如果要聲明多個屬性，必須通過分號進行隔開。
- CSS 中不區分大小寫，但是建議使用小寫。
4.4 CSS 選擇器
描述如何選擇HTML氧元素
4.4.1 元素選擇器
選擇 HTML 文檔中的元素
p {
background: yellow;
}
一旦選擇使用，頁面中的所有 p 元素都會被選中並變成黃色背景。
4.4.2 類選擇器
選擇文檔中元素指定的類，類是通過 class 屬性去指定的；多個元素可以使用同一個類。
html 文件
<div id="div1">
<p class="c1" id="p1">段落1</p>
<p class="c1" id="p2">段落2</p>
<p class="c1">段落3</p>
<p>段落4</p>
<p>段落5</p>
</div>
css 文件
.c1 {
background: green;
}
效果圖
4.4.3 id 選擇器
選擇HTML文檔中元素指定的ID
ID是通過id屬性去設置的，每一個元素指定的id不能重復。
html 文件
<div id="div1">
<p class="c1" id="p1">段落1</p>
<p class="c1" id="p2">段落2</p>
<p class="c1">段落3</p>
<p id="p4">段落4</p>
<p>段落5</p>
</div>
css 文件
.c1 {
background: green;
}
#p4 {
background: #f5ff00;
}
效果圖
