CSS 概述
CSS：Cascading Style Sheet，層疊樣式表幕庐。CSS 的作用就是給 HTML 頁面標簽添加各種樣式久锥，定義網頁的顯示效果。簡單一句話：CSS 將網頁內容和顯示樣式進行分離异剥，提高了顯示功能。
CSS 語法：
選擇器{ 屬性名: 屬性值; 屬性名: 屬性值; }
CSS 的注釋：
注意：CSS 只有/* */這種注釋絮重，沒有//這種注釋冤寿。
而且注釋要寫在<style>標簽里面才算生效哦。
CSS樣式速查：
CSS 和 HTML 結合的方式（樣式表）
1青伤、CSS 和 HTML 結合方式一：行內樣式
采用 style 屬性督怜。范圍只針對此標簽適用。
該方式比較靈活狠角，但是對于多個相同標簽的同一樣式定義比較麻煩号杠，適合局部修改
2、CSS 和 HTML 結合方式二：內嵌樣式表
在 head 標簽中加入<style>標簽丰歌，對多個標簽進行統(tǒng)一修改姨蟋，范圍針對此頁面。
該方式可以對單個頁面的樣式進行統(tǒng)一設置立帖，但對于局部不夠靈活眼溶。
3、CSS 和 HTML 結合方式三：引入外部樣式表 css 文件
引入樣式表文件的方式又分為兩種：
（1）采用<link>標簽晓勇。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
（2）采用 import堂飞，必須寫在<style>標簽中，并且必須是第一句绑咱。例如：@import url(a.css) ;
兩種引入樣式方式的區(qū)別：外部樣式表中不能寫標簽绰筛，但是可以寫 import 語句。
三種樣式作用優(yōu)先級描融？
行內樣式>內聯(lián)樣式>外部樣式
CSS選擇器
CSS 選擇器:就是指定 CSS 要作用的標簽铝噩，那個標簽的名稱就是選擇器。意為：選擇哪個容器稼稿。以下為4種基本選擇器
標簽選擇器：針對一類標簽
ID 選擇器：針對某一個特定的標簽使用
類選擇器：針對你想要的所有標簽使用
通用選擇器（通配符）：針對所有的標簽都適用
標簽選擇器
標簽選擇器薄榛，選擇的是頁面上所有這種類型的標簽讳窟，所以經常描述“共性”，無法描述某一個元素的“個性”敞恋。
舉例：
p{ font-size:14px; }
上方選擇器的意思是說：所有的<p>標簽里的內容都將顯示 14 號字體丽啡。
標簽選擇器需要注意的是：
（1）所有的標簽，都可以是選擇器硬猫。比如 ul补箍、li、label啸蜜、dt坑雅、dl、input衬横。
（2）無論這個標簽藏的多深裹粤，一定能夠被選擇上。
（3）選擇的所有蜂林，而不是一個遥诉。
ID選擇器
針對某一個特定的標簽來使用，只能使用一次噪叙。css 中的 ID 選擇器以”#”來定義
舉例：
#mytitle{ border:3px dashed green; }
id 選擇器的選擇符是“#”矮锈。
任何的 HTML 標簽都可以有 id 屬性。表示這個標簽的名字睁蕾。這個標簽的名字苞笨，可以任取，但是：
（1）只能有字母子眶、數(shù)字瀑凝、下劃線。
（2）必須以字母開頭壹店。
（3）不能和標簽同名猜丹。比如 id 不能叫做 body、img硅卢、a射窒。
另外，特別強調的是：HTML 頁面将塑，不能出現(xiàn)相同的 id脉顿，哪怕他們不是一個類型。比如頁面上有一個 id 為 pp 的 p点寥，一個 id 為 pp 的 div艾疟，是非法的！
類選擇器
針對你想要的所有標簽使用。優(yōu)點：靈活蔽莱。
css 中用.來表示類弟疆。舉例如下：
.one{ width:800px; }
特性：
和 id 非常相似，任何的標簽都可以攜帶 id 屬性和 class 屬性盗冷。class 屬性的特點：
特性 1：類選擇器可以被多種標簽使用怠苔。
特性 2：同一個標簽可以使用多個類選擇器。用空格隔開仪糖。舉例如下：（正確）
<h3 class="teshu zhongyao">我是一個h3啊</h3>
初學者常見的錯誤柑司，就是寫成了兩個 class。舉例如下：（錯誤）
<h3 class="teshu" class="zhongyao">我是一個h3啊</h3>
通配符*通用選擇器
通用選擇器锅劝，將匹配任何標簽攒驰。不建議使用，IE 有些版本不支持故爵，大網站增加客戶端負擔玻粪。
效率不高，如果頁面上的標簽越多稠集，效率越低奶段，所以頁面上不能出現(xiàn)這個選擇器。
舉例：
- {
margin-left: 0px;
margin-top: 0px;
}
高級選擇器：
后代選擇器
交集選擇器
并集選擇器
偽類選擇器
1剥纷、后代選擇器
定義的時候用空格隔開，對于E F這種格式呢铆，表示所有屬于 E 元素后代的 F 元素晦鞋，有這個樣式」卓耍空格就表示后代悠垛。
后代選擇器，就是一種平衡：共性娜谊、特性的平衡确买。當要把某一個部分的所有的什么，進行樣式改變纱皆，就要想到后代選擇器湾趾。描述的是祖先結構。
例如：
<style type="text/css">
.div1 p {
color: red;
}
</style>
空格就表示后代派草。.div1 p 表示.div1的后代所有的p
注意：這兩個標簽不一定是連續(xù)緊挨著的搀缠，只要保持一個后代的關聯(lián)即可。也就是說近迁，選擇的是后代艺普，不一定是兒子。
2.交集選擇器
定義交集選擇器的時候，兩個選擇器之間緊密相連歧譬。一般是以標簽名開頭岸浑，比如div.haha，再比如p.special瑰步。
如果后一個選擇器是類選擇器矢洲，則寫為div.special；如果后一個選擇器 id 選擇器面氓，則寫為div#special兵钮。
來看下面這張圖就明白了：
注意:
交集選擇器沒有空格。所以舌界，沒有空格的div.red（交集選擇器）和有空格的div .red（后代選擇器）不是一個意思掘譬。
3、并集選擇器
定義的時候用逗號隔開 三種基本選擇器都可以放進來
選擇器都具備定義的樣式呻拌。
p,
h1,
#mytitle,
.one {
color: red;
}
4葱轩、偽類選擇器
偽類：同一個標簽，根據(jù)其不同的種狀態(tài)藐握，有不同的樣式靴拱。這就叫做“偽類”。偽類用冒號來表示猾普。
比如div是屬于box類袜炕，這一點很明確，就是屬于box類初家。但是a屬于什么類偎窘？不明確。因為需要看用戶點擊前是什么狀態(tài)溜在，點擊后是什么狀態(tài)陌知。所以，就叫做“偽類”掖肋。
靜態(tài)偽類和動態(tài)偽類
偽類選擇器分為兩種仆葡。
（1）靜態(tài)偽類：只能用于超鏈接的樣式。如下：
:link “鏈接”：超鏈接點擊之前
:visited “訪問過的”：鏈接被訪問過之后
（2）動態(tài)偽類：針對所有標簽都適用的樣式志笼。如下：
:hover “懸脱刂眩”：鼠標放到標簽上的時候
:active “激活”： 鼠標點擊標簽，但是不松手時籽腕。
:focus 是某個標簽獲得焦點時的樣式（比如某個輸入框獲得焦點）
常見樣式與屬性
盒子模型
英文即box model嗡呼。無論是div、span皇耗、還是a都是盒子南窗。
但是，圖片、表單元素一律看作是文本万伤，它們并不是盒子窒悔。這個很好理解，比如說敌买，一張圖片里并不能放東西简珠，它自己就是自己的內容。
盒子中的區(qū)域
一個盒子中主要的屬性就5個：width虹钮、height聋庵、padding、border芙粱、margin祭玉。如下：
width和height：內容的寬度、高度（不是盒子的寬度春畔、高度）脱货。
padding：內邊距。
border：邊框律姨。
margin：外邊距振峻。
浮動
float 屬性用于定位和格式化內容，例如讓圖像向左浮動到容器中的文本那里择份。
float 屬性可以設置以下值之一：
left - 元素浮動到其容器的左側
right - 元素浮動在其容器的右側
none - 元素不會浮動（將顯示在文本中剛出現(xiàn)的位置）扣孟。默認值。
inherit - 元素繼承其父級的 float 值
浮動特性：
浮動的元素脫標荣赶。
性質2：浮動的元素互相貼靠哈打。
浮動的元素有“字圍”效果。
收縮讯壶，一個浮動的元素，如果沒有設置width湾盗，那么將自動收縮為內容的寬度伏蚊。
定位：
CSS的定位屬性有三種，分別是絕對定位格粪、相對定位躏吊、固定定位。
position: absolute;
position: relative;
position: fixed;
絕對定位
定義橫縱坐標帐萎。原點在父容器的左上角或左下角比伏。橫坐標用left表示，縱坐標用top或者bottom表示疆导。
特性：
（1）如果用top描述赁项，那么參考點就是頁面的左上角，而不是瀏覽器的左上角：
（2）如果用bottom描述，那么參考點就是瀏覽器首屏窗口尺寸悠菜，對應的頁面的左下角：
相對定位
讓元素相對于自己原來的位置舰攒，進行位置調整
相對定位的定位值(負數(shù)表示相反的方向)
left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移
固定定位
就是相對瀏覽器窗口進行定位。無論頁面如何滾動悔醋，這個盒子顯示的位置不變摩窃。
z-index屬性：
表示誰壓著誰。數(shù)值大的壓蓋住數(shù)值小的芬骄。
有如下特性：
（1）屬性值大的位于上層猾愿，屬性值小的位于下層。
（2）z-index值沒有單位账阻，就是一個正整數(shù)蒂秘。默認的z-index值是0。
（3）如果大家都沒有z-index值宰僧，或者z-index值一樣材彪，那么在HTML代碼里寫在后面，誰就在上面能壓住別人琴儿。定位了的元素段化，永遠能夠壓住沒有定位的元素。
（4）只有定位了的元素造成，才能有z-index值显熏。也就是說，不管相對定位晒屎、絕對定位喘蟆、固定定位，都可以使用z-index值鼓鲁。而浮動的元素不能用蕴轨。
CSS常見問題
指定了CSS樣式，效果卻沒有呈現(xiàn)
原因可能有：
1骇吭、拼寫有誤橙弱，標簽未封死或者加入了中文字符。
2燥狰、該元素本身無此樣式
3.集成錯誤棘脐，多次指定樣式，將按優(yōu)先級選用
