LZ-Says：風平浪靜之後，還會存在什麼？
前言
前端好玩的有很多，不同的屬性，不同的組合，生成 666 的頁面。
But，LZ 還是有很多都是屬於知其然而不知其所以然。
Today，簡單回顧有關 CSS 那點事兒～
一、CSS 簡述
僞前段一枚，如有不正，歡迎指正。
- 總說 CSS ，CSS，那麼什麼是 CSS 呢？
CSS(Cascading Style Sheets) 層疊樣式表，它用來描述網頁的行爲、表現，也就是最終用戶所見到網頁的樣子。
在 CSS 中，主要分爲如下幾種樣式：
- 內部樣式（行內樣式）： 將 CSS 樣式直接寫到 style 中且當前 Settings 只對當前元素起作用。此方式不方便複用，耦合度太高。
<p style="color:red;"></p>
- 內部樣式： 將 CSS 樣式寫到頭部中的 style 標籤內。
<head>
<style type="text/css"> <!-- 說明此文本是 css -->
/**
* CSS 註釋
*/
</style>
</head>
- 外部樣式： 將共有 CSS 樣式提取一個 css 文件中，隨後在使用的頁面中通過 link 進行引入即可，這樣可以使結構和表現分離，並且可以通過瀏覽器的緩存加快用戶訪問，提升用戶訪問體驗性。
<link rel="stylesheet" type="text/css" href="CSS 地址(相對地址)" />
二、CSS 語法
CSS 語法相對來說比較簡單，主要由倆部分構成：
- 選擇器： 通過選擇器器可以選中⻚頁⾯面中指定的元素，並且將聲明塊中的樣式應⽤用到選擇器器對應的元素上。
- 聲明塊： 聲明塊緊跟選擇器器後⾯面，內部主要爲 n 組值對結構，⽤用來描述當前樣式;多個聲明間使用 ; 隔開且聲明樣式名以及樣式值之間使⽤用 : 來連接。
簡單舉個例子：
div p {
color:#666;
}
這裏簡單提起下有關元素的內容：
- 塊級元素例如： p、h1~6。特點：獨佔⼀行；
- div 屬於默認塊元素，且沒有默認值；
- 內聯元素(⾏內元素)，只佔⽤自身⼤大⼩小的元素，例如：a、img、span；span 同樣沒有默認值，一般用來設置某種狀態；
- 塊元素主要⽤於⻚面中的佈局，⽽內聯元素則主要⽤於顯示內部內容；
- a 元素可以包含任意元素，但是不能包含自身；
- p 元素不不能放置任何的塊元素。
而關於元素之間的層級，這裏簡單說下：
<div>
<p>
<span></span>
</p>
<p>
<span></span>
</p>
<span></span>
<div>
以上述代碼段爲例，我們可以簡單知曉其具有如下幾類元素：
- 父、子元素；
- 祖先、後代元素；
- 兄弟元素
其次，來簡短說明他們之間的關係：
- 父元素： 直接包含⼦元素的元素；
- 子元素： 直接被⽗元素包含的元素；
- 祖先元素： 直接或間接包含後代元素的元素，父元素也是祖先元素；
- 後代元素： 直接或間接被祖先元素包含的元素，子元素也是後代元素；
- 兄弟元素： 擁有相同⽗元素的元素。
最後我們來描述下代碼段中的元素關係：
- body 算 div 的父元素，div 算 p 的父元素；
- span 算 p 的子元素，p 算 div 的子元素；
- div 算 span 的祖先元素，body 算 span 的祖先元素；
- span 算 div 的後代元素，p 算 div 的後代元素；
- span 算 p 的兄弟元素。
三、元素選擇器
下面開始列舉有意義的事兒咯。
- 通配選擇器： 爲當前頁面所有元素設置樣式。
![在這裏插入圖片描述]()
- 元素選擇器： 通過元素選擇器選中該⻚面中所有指定元素設置樣式。
![在這裏插入圖片描述]()
- ID 選擇器： 通過元素 ID 屬性選中唯一的一個元素設置樣式。
![在這裏插入圖片描述]()
- 類選擇器： 爲相同 class 屬性值的元素設置樣式。
![在這裏插入圖片描述]()
- 並集選擇器： 可以同時選中多個選擇器對應的元素並設置樣式。
![在這裏插入圖片描述]()
- 交集選擇器（複合選擇器）： 可以同時選中滿足多個選擇器的元素並設置樣式。例如設置 p 標籤且 class 爲 test 的元素樣式，如下。
![在這裏插入圖片描述]()
- 後代元素選擇器： 選中指定元素的指定後代元素。
![在這裏插入圖片描述]()
選中 ID 爲 name 的元素且後代 id 爲 id 的元素並設置樣式。
![在這裏插入圖片描述]()
- 子元素選擇器： 爲指定父元素下的指定子元素設置樣式（注意：IE 6 及以下不支持子元素選擇器）
![在這裏插入圖片描述]()
- 兄弟選擇器： 選擇某個元素的兄弟選擇器。
![在這裏插入圖片描述]()
- 僞類元素選擇器： 表示元素的某種狀態，例如已訪問、未訪問等。
/**
* 默認樣式
*/
a:link{
color:blue;
}
/**
* 訪問過的樣式，只能設置字體顏色，原因涉及到用戶隱私
*/
a:visited{
color:blue;
}
/**
* 表示鼠標移上的樣式 （IE 6 不支持超鏈接以外內容使用）
*/
a:hover{
color:blue;
}
/**
* 激活時樣式 表示當前超鏈接被點擊（點擊中） （IE 6 不支持超鏈接以外內容使用）
*/
a:active{
color:blue;
}
/**
* 獲取焦點時樣式
*/
input:focus{
color:blue;
}
/**
* 選中文本時樣式
*/
p::selection{
...
}
/**
* 設置第一個字樣式
*/
p:first-letter{
}
/**
* 設置第一行樣式
*/
p:first-line{
...
}
/**
* 元素最前邊樣式
*/
p:before{
...
}
/**
* 元素最後面樣式
*/
p:after{
...
}
- 否定僞類選擇器： 從已選中的元素中剔除某些元素。
/**
* 爲除了 className = "" or id = "" 的 p 元素設置某種樣式
*/
p:not(className/ID){
...
}
- 選擇指定屬性元素
![在這裏插入圖片描述]()
- 選取指定屬性的元素
![在這裏插入圖片描述]()
當然還包含其他類型屬性，如下：
<style>
/**
* 選中第一個子元素
*/
p:first-child {
...
}
/**
* 選中最一個子元素
*/
p:last-child {
...
}
/**
* 選中任意一個子元素
*/
p:nth-child(選中位置/even 表示偶數位置的子元素/odd 表示奇數的子元素)) {
...
}
/**
* 選中第一個子元素
*/
p:first-of-type {
...
}
/**
* 選中最一個子元素
*/
p:last-of-type {
...
}
/**
* 選中任意一個子元素
*/
p:nth-of-type {
...
}
</style>
type 和 child 區別在於
child 在所有子元素中查找，而 type 則在當前類型的子元素排列
- 列舉特殊的屬性： title 可爲任意標籤指定
![在這裏插入圖片描述]()
樣式的繼承
例如頁面中所有文字均爲 30 px，則只需要簡單設置如下：
body{
font-size=30px;
}
也就是說在 CSS 中，父類元素的樣式會被子元素繼承，背景定位等樣式不會被繼承。
選擇器優先級
按照數字劃分級別，如下所示：
- 內聯樣式優先級 1000
- ID 選擇器優先級 100
- 類和僞類優先級 10
- 元素選擇器優先級 1
- 通配優先級 優先級 0
- 繼承的樣式 無優先級
個人公衆號
不定期發佈博文，最近有點忙，感謝老鐵理解，歡迎關注～
