CSS是什麼
首先，在之前的html僅僅是寫了一個架構，頁面并不工整，美觀。而CSS正是解決了這一問題。
HTML僅僅隻是表示頁面的結構和内容，而CSS描述的是頁面的樣式（包括大小/位置/字型/顔色/背景等）
基本語言規範
選擇器+{一條/N條聲明}
- 選擇器決定下面的這些聲明針對誰起作用（修改誰）
- 聲明決定修改哪些内容
- 聲明的屬性是鍵值對，使用 ; 來區分鍵值對，使用 : 區分鍵和值。
- CSS代碼可以放到HTML檔案中，通常是放到style标簽中
- style标簽可以放到頁面上的任意位置，一般放到head标簽内
- CSS使用來作為注釋
引入方式
内部樣式表
也就是通過style标簽，來寫CSS。寫在style标簽中，嵌入到HTML的标簽内部。
優點：讓樣式和頁面結構分離。
缺點：分離的不夠徹底。
内聯樣式
通過HTML标簽中的style屬性來應用一些樣式。（通常要搭配JS來使用）
這種寫法隻适合樣式很簡單的情況，如果樣式很複雜就會變得很亂。
内聯樣式隻是針對于目前的元素生效（不用寫選擇器，也不用寫{}，隻要寫CSS屬性和值就行。
缺點：
- 定義内聯樣式需要在每個 HTML 标簽中定義 style 屬性，很不友善；
- 在内聯樣式中使用雙引号或單引号時要特别小心，因為 HTML 标簽的屬性通常都會使用雙引号來包裹屬性的值，例如<input type="text">；
- 在内聯樣式中定義的樣式不能再其它任何地方重用；
- 内聯樣式在後期維護時很不友善，因為一個網站通常有很多頁面組成，當修改頁面樣式時需要對頁面逐個修改；
- 添加過多的内聯樣式會導緻 HTML 文檔的體積增大。
外部樣式
- 建立一個css檔案。
- 使用link标簽引入css
也就是說：把CSS代碼單獨提取出來，放到了一個CSS檔案中，然後要在HTML代碼中通過link标簽來引用這個CSS檔案。
<link rel="stylesheet" href="CSS檔案路徑" target="_blank" rel="external nofollow" >
這個方法，可以讓多個HTML複用同一份樣式。類似于Java中定義的一個方法，不光要定義還要調用。
這種link标簽，一般習慣于放入html的head标簽中，這個标簽可以存在多份（通過多個link來引用不同的CSS）。
優點：樣式和結構徹底分離了。
缺點：受到浏覽器緩存的影響，修改後不一定立即生效。
關于大小寫和空格規範
雖然CSS不分大小寫，但是開發時統一使用小寫。
- 冒号後面要帶一個空格
- 選擇器和 { 之間也要有一個空格
選擇器
選擇器功能
選中頁面中指定的标簽元素
要先選中元素，才能設定元素的屬性。
可以一次選中一個，也可以一次選中多個。
選擇器種類
基礎選擇器
由單個選擇器構成
标簽選擇器
選擇器就是html的标簽名。
特點：
能快速把同一類型的标簽都選擇出來。但是不能差異化選擇。
類選擇器
特點：
差異化表示不同的标簽
通過類選擇器，可以随心所欲的選擇任意想要的元素。首先要在CSS代碼中建立一個類名，在對應的HTML元素中，通過class來引入這個類名，此時具有該類名的元素，就都會應用上相關的CSS屬性。
一些文法方面的細節：
- 類名用 . 開頭
- 下方的标簽使用class屬性來調用
- 一個類可以被多個标簽使用，一個标簽也能使用多個類（多個類名要使用空格分割開）
- 如果是長的類名，可以使用 - 來分割，不要使用純數字或者中文以及标簽名來命名類名。
id選擇器
id選擇器和類選擇器類似。
- CSS中使用 # 開頭來表示id選擇器
- id選擇器的值和html中某個元素的id值相同
- HTML的元素id不必帶 #
- id是唯一的，不能被多個标簽使用。
通配符選擇器
使用 * 的定義，選取所有的标簽。
最大的用途是：取消浏覽器的預設樣式。
小結
| 作用 | 特點 | |
| 标簽選擇器 | 能選出所有相同标簽 | 不能差異化選擇 |
| 類選擇器 | 能選出一個或多個标簽 | 根據需求選擇，最靈活常用 |
| id選擇器 | 能選出一個标簽 | 同一個id在一個HTML中隻能出現一次 |
| 通配符選擇器 | 選擇所有的标簽 | 特殊情況下使用 |
複合選擇器
後代選擇器
後代選擇器又叫包含選擇器，選擇某個父元素中的某個子元素。（通過多個選擇器的組合，能夠選中某個選擇器的子/孫子選擇器。
選擇器1 選擇器2 {樣式聲明}
- 選擇器1和選擇器2之間要用空格分割。
- 選擇器1是父級，選擇器2是子級。隻選選擇器2，不會影響到選擇器1.
可以是任意基礎選擇器的組合。
子選擇器
和後代選擇器相似，但隻能選擇子标簽
選擇器1>選擇器2 {樣式聲明}
- 使用大于号分割
- 隻能選親兒子，不能選孫子元素
并集選擇器
用于選擇多組标簽（集體聲明）
元素1，元素2{樣式聲明}
- 通過逗号分割多個元素
- 表示同時選中元素1和元素2
- 任何基礎選擇器都可以使用并集選擇器
- 并集選擇器建議豎着寫，每個選擇器占一行。（最後一個選擇器不能加逗号）
僞類選擇器
1.連結僞類選擇器
| a:link | 選擇未通路過的連結 |
| a:visited | 選擇已經被通路過的連結 |
| a:hover | 選擇滑鼠指針懸停上的連結 |
| a:active | 選擇活動連結 |
2.:force僞類選擇器
選取擷取焦點的input表單元素。
小結哎
| 選擇器 | 作用 | 注意事項 |
| 後代選擇器 | 選擇後代元素 | 可以是孫子元素 |
| 子選擇器 | 選擇子元素 | 隻能選親兒子，不能選孫子 |
| 并集選擇器 | 選擇相同樣式的元素 | 更好的做到代碼重用 |
| 連結僞類選擇器 | 選擇不同狀态的連結 | |
| :focuse 僞類選擇器 | 選擇被選中的元素 |
常用元素屬性
字型屬性
設定字型
字型大小
注意機關。
标題标簽需要單獨指定大小。
字型粗細
文字樣式
文本屬性
文本顔色
- 預定義的顔色值：直接寫單詞
- 十六進制形式
- RGB方式
RGB方式：使用R，G，B來表示色光三原色。計算機中針對R，G，B三個分量，分别使用一個位元組表示。數值越大，表示該分量顔色越濃。
文本對齊
控制文字水準方向的對齊（也能控制圖檔等元素居中或靠右
text-align: [值]；
- center：居中對齊
- left：左對齊
- right：右對齊
文本裝飾
text-decoration：[值]
underline：下劃線
none：什麼都沒有，可以用于給a标簽去掉下劃線
overline：上劃線
line-through：删除線
文本縮進
控制段落的首行縮進。(不會影響到其他行)
text-indent：[值]；
- 機關可以使用px或者em。
- 使用em作為機關更好，1個em就是目前元素的文字大小。
- 縮進可以是負的，表示向左縮進。
行高
行高指的是上下文本之間的基線距離。
line-height：[值]
行高=上邊距+下邊距+字型大小
當行高等于元素高度時，就可以實作文字居中對齊
背景屬性
背景顔色
background-color: [值];
預設是transparent，透明的，可以通過設定顔色的方式修改。
背景圖檔
background-image: url(......);
背景平鋪
background-repeat:[平鋪方式] ;
- repeat：平鋪
- no-repeat：不平鋪
- repeat-x：水準平鋪
- repeat-y：垂直平鋪
背景顔色和背景圖檔可以同時存在，背景圖檔在背景顔色的上方。
背景位置
background-position: x,y;
這裡的參數有三種不同風格：
1.方向名詞（top，left，right）
2.精确機關：坐标或百分比
3.混合機關：同時包含方位名詞和精确機關
關于參數：
- 如果參數的兩個值都是方位名詞,則前後順序無關.
- 如果隻指定了一個方位名詞,則第二個預設居中.
- 如果參數是精确值,則的的第一個肯定是x,第二個肯定是y.
- 如果參數是精确值,且隻給了一個數值,則該數值一定是x坐标,另一個預設垂直居中.
- 如果參數是混合機關,則第一個值一定為x,第二個值為y坐标.
左手坐标系
計算機中的平面坐标系，一般是左手坐标系。
背景尺寸
background-size: length | percentage | cover | contain ;
- 可以填具體的數值: 如 40px 60px 表示寬度為 40px, 高度為 60px
- 也可以填百分比: 按照父元素的尺寸設定.
- cover: 把背景圖像擴充至足夠大，以使背景圖像完全覆寫背景區域。
- contain: 把圖像圖像擴充至最大尺寸，以使其寬度和高度完全适應内容區域、可能會露出一部方背景色。
圓角矩形
border-radius：length;
length是内切圓的半徑，數值越大，弧線越強烈。
圓形
如果想得到一個圓，首先要有一個正方形，假設正方形的寬度為20px，此時設定border-radius的值為100px即可（寬度的一半）
圓角矩形
讓border-radius的值為矩形高度的一半即可