CSS
1、什麼是css
css全稱：cascading style sheet 就是層疊樣式表的意思。
2、css的作用
CSS就是爲了裝飾我們的網頁，讓我們的網頁看起來漂亮。
從語義的角度去描述網頁的結構 html
從審美的角度去描述網頁的樣式 CSS
從交互的角度去描述網頁的動效 JS
3、CSS如何去用
CSS由兩部分組成：
選擇器 + 屬性
屬性：
- 文本類
font-family：字體選擇
font-size： 字體大小設置
color： 字體顏色
font-weight：字體粗細
font-style： 字體傾斜
text-align： 文字在盒子內水平方向
text-decoration：文字下劃線設置
line-height：行高
- 背景類
background-color： 設置背景顏色
background-image： 設置背景圖片
- 位置類
盒子模型
浮動
定位
4、選擇器
①標籤選擇器
標籤名{ 屬性：屬性值；}
標籤選擇器特點：選擇頁面上所有的這類型的標籤。
這類選擇器處理的是共性的問題，面對個性的問題的時候就顯得沒什麼用了。
②id選擇器
#id名{ 屬性：屬性值；}
id選擇器的特點：因爲id名是網頁上獨一無二的，所以，id選擇器只能選擇到一個標籤。
它就是隻能處理個性的問題。但是id選擇器在CSS中用的很少，爲了和JS區分。因爲JS當中以後用的id很多。所以在CSS當中爲了避免重複，很少用。
③類選擇器class選擇器
.類名{ 屬性：屬性值；}
一個標籤可以擁有多個類，不同的標籤也可以擁有相同的類，這就造成了類選擇器非常實用。
它不但可以處理個性問題，還可以處理共性問題。
類選擇器用到最後，我們要學會抽象公共類。
公共類是整個頁面上公有的屬性。比如頁面上有很多個標籤都是紅色的，那麼我們就要把這個紅色給抽象出來。用一個類表示。在設計網頁的時候，當寫到有這個紅色屬性的標籤時，同時就把這個類名給添加上。這就是公共類的用法。這樣的做法，會讓你省很多力。
④ 通配符選擇器
*{ 屬性：屬性值；}
這個東西不常用，但是在我們教學期間會用很多。
通常情況下會用於CSS初始化。在實際項目中，要看公司允許不允許你這樣用。
⑤並集選擇器
選擇器1，選擇器2...{ 屬性：屬性值；}
選擇器1選擇到的標籤 和 選擇器2選擇到的標籤 他們都會被添加上這個屬性樣式。也就是說選擇器1選擇到的標籤 和 選擇器2選擇到的標籤樣式相同，我們就可以用並集選擇器來去做。
實際開發當中真正的CSS初始化，用的就是並集選擇器。
通配符選擇器和並集選擇器通常都會用來對CSS初始化，但是*的效率比並集選擇器的效率低。因此實際開發當中用並集選擇器來對CSS初始化。
⑥交集選擇器
div.c1{
color: red;
}
選擇器1選擇器2{ 屬性：屬性值；}
這個選擇器說的是選擇器1選擇到的標籤和選擇器2選擇到的標籤之間的公共部分，會被添加屬性。
⑦後代選擇器
選擇器1 選擇器2{ 屬性：屬性值；}
選擇器1下的選擇器2所選擇到的標籤被添加屬性樣式。這個選擇器叫做後代選擇器。
後代選擇器，選擇的是選擇器1的後代裏面符合選擇器2的標籤。後代不但包含兒子輩也包含孫子輩，還包含所有的小輩。
⑧子代選擇器
選擇器1>選擇器2{ 屬性：屬性值；}
選擇器1的兒子裏面符合選擇器2的標籤被添加屬性樣式。這個叫做子代選擇器。
子代選擇器和後代選擇器很像，但是後代選擇器選擇的是選擇器1所有的後代。而子代選擇器選擇的是選擇器1的兒子一代，再往後選擇不上。
5、CSS的性質
①css有繼承性
css屬性當中以 color font line text開頭的屬性具有繼承性。
一個家族的祖先如果設置了這四個屬性其中任意一個，那麼它的這個屬性會有繼承性，也就是說它的所有的後代都會繼承這個設置的屬性。但是不允許中間有哪一代造反，如果中間有哪一代造反設置了相同的屬性，但是屬性值不一樣，那麼這一代和這一代之後的後代會繼承造反的這一代。
②CSS有層疊性
CSS層疊性表現在兩方面：
- 當多個選擇器同時選擇到相同的一個標籤，並且給這個標籤添加不同的屬性，那麼這些屬性最終會疊加到這個標籤上。
- 當多個選擇器同時選擇到相同的一個標籤，並且給這個標籤添加的屬性如果相同，但是屬性值不一樣，接下來遵循以下規則：
- A 首先要計算這多個選擇器的權值大小，如果這些選擇器的權值各不相同，那麼誰大最終聽誰的。id選擇器100 類選擇器10 標籤選擇器1。
- B 如果計算的權值大小全部相同，那麼要看順序，誰離這個標籤近就聽誰的，也可以這麼說，誰寫在後面聽誰的。
- C 如果我們在判斷優先級時發現標籤有行內樣式，那麼行內樣式的權值是1000，優先級別最高。什麼時候都會聽行內的。
- D 我們在判斷優先級時如果出現繼承情況，繼承的權值是0；
6、大小的表示單位
-
px是像素
-
% 百分比表示方式是一個相對單位，相對其父級元素
-
em 也是一個相對單位，相對的是父級元素的字體大小。
em在沒有任何設置的情況下，1em=16px 當我們設置一個家族的字體，讓祖先元素爲1em，那麼這個祖先元素字體大小就是默認的16px。接着，我們讓這個祖先的兒子設置字體爲2em，那麼這個兒子的字體大小就是32px。現在這個兒子又有一個兒子去設置了字體爲1em，現在這個em就不再是16px，而是相對父親字體的大小，1em就變成了32px。因此呢，em單位如果用在家族的嵌套很多時候，會比較亂。
-
rem 是根據em改良而來的，它也是一個相對單位，相對的是跟元素的字體大小。
em家族嵌套多了會很亂，因爲em的值是父級元素的字體大小，父級元素字體大小不確定，所以em的值就不確定。用多了em會亂，但是rem相對的就是html根元素的字體。無論嵌套多少，都是相對它的字體，因此rem的值是確定的，不會亂。
7、顏色值得表示方式
- 英文單詞法：在實際項目中不常用，因爲單詞有侷限。
- RGB十進制表示法：rgb（red值，green值，blue值）
rgb十進制表示方式，每個值範圍0~255；
- RGB十六進制表示方法：#ffffff
前兩個f表示r的值 中間兩個f表示g的值 後面兩個f表示b的值 如果留個f相同可以簡寫成三個 。這種表示方式是實際開發項目中應用最多的。
- rgba帶有透明度的顏色值表示法：color: rgba(128,128,128,0.1);
這個表示方法和rgb10進製表示法很像，就是多了一個數字，最後的a的數值可以從0~1,1代表不透明 0代表全透明。中間值代表半透明。一般都填寫的是小數，半透明。