CSS【03】：CSS 基礎選擇器與三種引入方式
阿新 • • 發佈：2018-12-26
基礎選擇器
- 選擇器：css 選擇 html 標籤的一個工具，是將 css 與 html 建立起聯絡，那麼 css 就可以控制 html 樣式
- 選擇器其實就是給 html 標籤起名字
標籤選擇器
作用：根據指定的標籤名稱，在當前介面中找到所有該名稱的標籤，然後設定屬性
格式：
標籤名稱 { 屬性: 值; }注意點：
- 標籤選擇器選中的是當前介面中所有的標籤，而不能單獨選中某一個標籤
- 標籤選擇器無論標籤藏得多深都能選中
id選擇器
作用：根據指定的 id 名稱找到對應的標籤，然後設定屬性
格式：
#id名稱 { 屬性: 值; }注意點：
- 每個 HTML 標籤都有一個屬性叫做 id，也就是說每個標籤都可以設定 id
- 在同一個介面中 id 的名稱是不可以重複的
- 在編寫 id 選擇器時一定要在 id 名稱前面加上 #
- id 的名稱是有一定的規範的
- id 的名稱只能由字母、數字、下劃線組成（a-z 0-9 _）
- id 名稱不能以數字開頭
- id 名稱不能是 HTML 標籤的名稱，不能是（a h1 img input ...）
- 在企業開發中一般情況下如果僅僅是為了設定樣式，我們不會使用id，因為在前端開發中 id 一般留給 js 使用的
類選擇器
作用：根據指定的類名稱找到對應的標籤，然後設定屬性
格式：
.類名 { 屬性: 值; }注意點：
- 每個 HTML 標籤都有一個屬性叫做 class，也就是說每個標籤都可以設定類名
- 在同一個介面中 class 的名稱是可以重複的
- 在編寫 class 選擇器時一定要在 class 名稱前面加上
. - 類名的命名規範和 id 名稱的命名規範一樣
- 類名就是專門用來給 CSS 設定樣式的
- 在 HTML 中每個標籤可以同時繫結多個類名
CSS三種引入方式
行間式
<div style="width: 100px; height: 100px"> </div> <!-- 簡單直接,針對性強 -->
- 樣式書寫在標籤的 style 全域性屬性中
- 樣式格式為
key: value(單位) - 以
;隔開多個樣式，最後的;可以省略
內聯式
<head>
<style>
選擇器 {
width: 100px;
height: 100px;
}
</style>
</head>
<!-- 解耦合了,可讀性強 -->- 樣式書寫在 head 標籤內的 style 標籤中
- 樣式格式為
選擇器 { 樣式塊 } - 樣式塊
key: value(單位)
外聯式
/* index.css檔案 */
選擇器 {
width: 100px;
height: 100px;
}
/* 適合團隊高效率開發, 耦合性低, 複用性強 */<!-- index.html -->
<link rel='stylesheet' type='text/css' href='./index.css'>- 樣式書寫在外部 css 檔案中，不需要寫任何標籤
- 樣式格式為
選擇器 { 樣式塊 } - 樣式塊
key: value(單位) - 以
;隔開多個樣式，最後的;可以省略
三種引入"優先順序"分析
1. 沒有優先順序
2. 不同的屬性樣式協同操作,相同的樣式採用覆蓋機制,選擇邏輯最下方的
3. 行間式一定是邏輯最下方的樣式