複合選擇器，塊元素，行內元素，CSS背景，CSS層疊性、繼承性和優先順序
阿新 • • 發佈：2020-10-14
這篇筆記主要講了CSS快捷鍵的使用方法，複合選擇器，塊元素，行內元素，CSS背景，CSS層疊性、繼承性和優先順序
Emmet語法(快捷鍵)
快速生成HTML結構語法
-
生成多個相同標籤，標籤名*3 (注，中間不要有空格)
-
父子級標籤 例：ul和li 可以寫 ul>li
- 兄弟關係用+
-
可以直接 .nav ，生成
<div class="nav"></div>- .可以換# 生成id標籤
- 可以更換其他標籤，例：p.one 生成
<p class="one"></p>
-
生成類名有順序 .demo$*5
- 注：$從1開始排序
-
生成標籤內容帶預設文字 例：div{預設文字}
示例：5個div標籤，裡面從1到5，屬性class從demo1到demo5
.demo${$}*5
- 1
快速生成CSS樣式語法
- tac可以快速生成
test-align: center; - 基本上都是首字母+引數
快速格式化程式碼
-
快捷鍵Shift+Alt+f
-
為了方便操作，在儲存時自動格式化程式碼 (VScode)
- 檔案->首選項->設定
- 搜尋emmet.include
- 在setting.json的使用者下新增下列語句
"editor.formatOnType":true, "editor.formatOnSave":true- 1
- 2
CSS複合選擇器
- 複合選擇器就是基礎選擇器結合而成的
- 包括：後代選擇器，子選擇器，並集選擇器，偽類選擇器
後代選擇器 ※
- 又稱包含選擇器，可以選擇父元素裡的子元素
- 例，選擇所有ol標籤裡的li都更改屬性
ol li {
color: red;
/* 選擇ol裡的所有li元素 */
}
- 1
- 2
- 3
- 4
-
中間用空格隔開
-
更改的是後代的 (只要是後代都可以被選中，無論幾代) 樣式
-
對同名標籤的區分
- 對一個標籤新增class屬性
- .class屬性+後代名
- 注：中間的過程標籤可以省略
<style> .nav li { color: pink; } </style> <ul class="nav"> <li>pink</li> </ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
子選擇器
- 選擇離得最近的子元素
- 元素1>元素2 {樣式宣告}
<style>
ul>li {
color: pink;
}
</style>
<ul>
<li><a href="#">會變粉</a></li>
<li><a href="#">不會變粉</a></li>
</ul>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 元素1是父元素，元素2是子元素
- 只能選擇離得最近的子元素(不包括幾代之後的元素)
並集選擇器 ※
- 可以選擇多組標籤，樣式相同，來集體宣告
<style>
div,
p {
color: pink;
}
</style>
<div>會變粉</div>
<p>會變粉</p>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
-
用逗號隔開，逗號可以理解為和的意思
-
任何樣式選擇器都可以作為並集選擇器的一部分
-
語法規範：並集選擇器的標籤要豎著寫
偽類選擇器
- 給選擇器新增特殊效果
- 語法 : + 元素
連結偽類選擇器
| 屬性 | 解釋 |
|---|---|
| a:link | 選擇所有未被訪問的連結 |
| a:visited | 選擇所有已被訪問的連結 |
| a:hover | 選擇滑鼠指標位於其上鍊接 |
| a:active | 選擇活動連結 (滑鼠按下未抬起的連結) |
小知識：未選擇連結經常使用的顏色#333
連結偽類的注意事項
-
為了確保生效，要按照 link->visited->hover->active 的順序宣告
-
連結和標題標籤一樣，都要單獨指定樣式
-
開發中經常的寫法：
- 先給a寫一個樣式
- 然後在給hover(經過的時候)寫一個樣式(藍色+下劃線)
:focus偽類選擇器
- 選取獲得焦點 (游標) 的表單元素
<style>
input:focus {
background-color: pink;
/* 誰獲得了游標，就改變誰的背景色 */
}
</style>
<input type="text">
<input type="text">
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
CSS元素顯示模式
元素的顯示模式
- 元素 (標籤) 以什麼方式顯示，例如
<div>獨自佔一行 - 分類：塊元素，行內元素
塊元素
-
包括：
<h1>,<p>,<div>,<ul>,<ol>,<li>,其中<div>是最典型的塊元素 -
特點：
- 自己獨佔一行
- 可以設定高度寬度及內外邊距
- 寬度預設和容器(父級寬度)一樣寬
- 是一個容器及盒子，裡面可以放其他元素
-
注意：文字類的塊元素不允許放其他元素,例如
<p>和<h1>
行內元素(內聯元素)
-
包括：
<a>,<strong>,<body>,<em>,<span>... -
特點：
- 一行可以顯示多個行內元素
- 直接設定寬度高度設定無效
- 預設寬度為內容的寬度
- 行內元素，只能容納文字或行內元素
-
注意：
- 連結裡面不能再放連結元素
- 特殊連結
<a>裡面可以放塊級元素，但是要給<a>轉化一下塊級模式 (下面元素模式轉換有寫)
行內塊元素
-
特殊元素：
<img />,<input />,<td>同時具有塊元素和行內元素的特點，稱為行內塊元素 -
特點：
- 一行可以有多個行內塊元素，但中間有空白縫隙
- 預設寬度是內容的寬度
- 高度，行高，外邊距以及內邊距都可以控制
元素總結
| 元素名 | 特點 |
|---|---|
| 塊元素 | 可以指定大小，獨佔一行 |
| 行內元素 | 不能指定大小，一行可以放多個 |
| 行內塊元素 | 可以指定大小，一行可以放多個，大小由內容來決定 |
元素顯示模式的轉換
-
一種元素需要另外一種元素的特性
-
例如增加a的觸發範圍 (使一個行內元素有塊元素的性質)
-
在CSS裡面新增
display: bolck轉化塊元素：
<style>
a {
width: 150px;
height: 50px;
display: block;
/* 這句話把a標籤轉化為塊元素 */
}
</style>
<a herf="#">我是塊元素</a>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 在CSS裡面新增
display: inline轉化為行內元素
<style>
div {
display: inline;
}
</style>
<div>我是行內元素</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 在CSS裡新增
display: inline-block轉化為行內塊元素
<style>
span {
width: 100px;
height: 30px;
display: inline-block;
}
</style>
<span>我既可以指定大小，又可以一行放多個</span>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
snipaste工具的使用
- 一個截圖工具，兼具取色的功能
- F1截圖，F3置頂，Alt取色
課堂案例
-
側邊欄的效果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-HczfYLVF-1581249072737)(image/xiaomi_drawer.png)] -
程式碼實現在demo5.html中
小知識：在li中垂直居中
只要行高和盒子高相等，然後就垂直居中了
程式碼line-height: 40px
行高小於盒子高度，文字會偏上
行高大於盒子高度，文字則偏下
CSS的背景
- 背景顏色，背景圖片，背景平鋪，背景圖片位置，背景影象固定
背景顏色
- 定義背景顏色：
background-color: transparent | color;
- 1
- transparent：背景色透明 (預設值)
- color：顏色
背景圖片
- 定義背景圖片場景：logo，裝飾性小圖片，超大圖片
- 優點：便於控制位置
background-image: none | url();
background-image: url();
/* 不要忘記url() */
- 1
- 2
- 3
- 4
- none：無背景圖 (預設值)
- url()：使用絕對地址或相對地址指定圖片
背景平鋪
- 定義背景平鋪：
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
- 1
- repeat-x：沿x軸平鋪(橫向)
- 背景圖片在背景顏色之上
背景圖片位置重要
- 背景圖片位置屬性：
background-position: x y;
/* 一共兩個引數 x 和 y */
- 1
- 2
引數表：
| 引數值 | 說明 |
|---|---|
| length(精確位置) | 百分數 | 由浮點數值和單位識別符號(px)組成的長度值 |
| position(方位名詞) | top | center | bottom | left |center | right |
-
方位名詞：
- 第一個引數是x軸方向，第二個引數是y軸方向
- 引數沒有順序
- 只宣告一個引數，預設另一個為center
-
背景圖片適合超大圖片，背景圖片適合水平居中
背景圖片精確位置
- 第一個引數為x座標，第二個為y座標
background-position: 20px 20px;
- 1
- 只指定一個值，另一個值預設垂直居中
- 精確單位(數值)和文字單位可以混合使用，但一定要注意引數順序
背景影象固定
- 把圖片固定在網頁上，用來做視差滾動
background-attachment: scroll | fixed;
- 1
- scroll：背景影象滾動 (預設值)
- fixed：背景影象固定
背景圖片複合寫法
- 和字型一樣有複合寫法，但是背景圖片引數沒有順序
- 下面是推薦書寫的順序：
- 注意:背景圖片地址為：url( )
background: 背景顏色 | 背景圖片地址 | 背景平鋪 | 背景圖片滾動 | 背景圖片位置 ;
- 1
背景色半透明
- 程式碼示例
background-color: rgba(0,0,0,0.3);
- 1
- a為透明度，取值範圍[0,1]
- 可以省略透明度前面的0，例0.3 -> .3
CSS三大特性
層疊性
- 對同一個選擇器選擇相同樣式不同的引數：
- 遵循就近原則，誰離標籤近就執行哪個樣式 (後來者居上)，但是不衝突的部分不會被覆蓋
繼承性
- 子標籤會繼承父標籤的某些樣式(可以繼承的樣式text- ,font- ,line- ,color- )
- 在F12中可以看到inherited from xxx
行高的繼承
body {
font: 12px/1.5 "Microsoft YaHei";
/* 字型大小/行高 字型 */
}
- 1
- 2
- 3
- 4
- 行高可以沒有單位
- 沒有單位的意思是當前元素文字大小的1.5倍
優先順序
- 給同一個元素指定了多個選擇器，就會有優先順序產生
- 選擇器相同，根據層疊性排序
- 權重排序：繼承或* -> 元素選擇器 -> 類選擇器，偽類選擇器 -> ID選擇器 -> 行內樣式style="" -> !important重要的
| 引數值 | 權重 |
|---|---|
| 繼承或* | 0,0,0,0 |
| 元素選擇器 | 0,0,0,1 |
| 類選擇器，偽類選擇器，子選擇器 | 0,0,1,0 |
| ID選擇器 | 0,1,0,0 |
| 行內樣式style="" | 1,0,0,0 |
| !important重要的 | 無窮大 |
- !important使用方法 (優先順序無窮大)：
div {
color: blue!important;
}
- 1
- 2
- 3
- a連結瀏覽器預設指定了一個樣式，所以優先順序和元素選擇器一樣(0,0,0,1)
權重疊加
- 複合選擇器會出現權重疊加的問題
- 例：
<style>
/* ul和li的權重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
ul li {
color: green;
}
/* li的權重 0,0,0,1 */
li {
color: blue;
}
/* .nav和li的權重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
color: pink;
}
</style>
<body>
<ul class="nav">
<li>我是綠色</li>
</ul>
</body>
- 注：權重不會出現進位