CSS樣式表
行內樣式表
- 格式：
<標簽 style="屬性1:屬性值; 屬性2:屬性值" > - 顧名思義，行內樣式表就是寫在標簽內部的谣光，如果只有一點點樣式要修改可以使用它扇调。
內部樣式表
- 格式：
<head>
<style type="text/csss">
選擇器 {屬性:屬性值;}
</style>
</head> - 內部樣式表一般寫在head標簽內。
外部樣式表
- 外部樣式表意思是：把html和css分離抢肛，HTML文件只寫html代碼狼钮，CSS文件只寫css樣式。
- 通過<link>標簽把css文件引入到html文件中捡絮。這個在實際工作中是最常用的熬芜。
三種樣式表的區(qū)別:
- 行內樣式表，默認權重最高福稳，但是完全沒有分離涎拉，且只能控制一個標簽，用得最少的圆；
- 內部樣式表鼓拧，默認權重次之，初步實現(xiàn)分離越妈，可以控制一個頁面季俩，用得較少；
- 外部樣式表梅掠，默認權重最低酌住，完全實現(xiàn)分離，可以控制整個站點所有頁面阎抒，用得最多酪我。
拓展：
-
導入式樣式表
- 格式：
<style> @import url(xxx.css); </style>(如果在css文件中引入，不用寫style標簽) - 它的作用與link鏈入式是一樣的且叁。區(qū)別在于都哭，它既可以在html文件中導入css文件，還可以在css文件中導入css文件，而且@import是在html加載完之后才加載css欺矫，低版本瀏覽不支持纱新，js也不能調用。
- 格式：
CSS三大特性
層疊性
- 在css書寫時不可避免的會出現(xiàn)樣式?jīng)_突汇陆，就是先后寫了一樣的屬性怒炸，但是屬性值不同。這個時候就會根據(jù)css的層疊性來執(zhí)行毡代，最終顯示的結果是后寫的阅羹。
- 所以css層疊性就是指，如果樣式出現(xiàn)沖突教寂，那么執(zhí)行后寫的樣式捏鱼。也可以理解為就近，誰離標簽越近就執(zhí)行誰酪耕。
- 小技巧：根據(jù)層疊性原理导梆，css設置時，大的整體樣式寫前面迂烁，小的樣式寫后面看尼。
繼承性
- css中會出現(xiàn)子元素如果不單獨寫樣式會繼承部分父元素的樣式。
- 一般與文字相關的屬性會繼承盟步，例如:字體藏斩，顏色，字號却盘，行高等屬性狰域。
- 而與盒模型相關的屬性不會繼承，例如：外邊距黄橘，內邊距兆览，背景，定位塞关，浮動抬探，元素高度等。
- 所以在工作中繼承性的應用多是把一些文字樣式寫在body內描孟，子元素繼承即可驶睦，可以起到節(jié)省代碼量的效果。
- 注意：繼承樣式的權重為0最低匿醒！
權重性（重點）
- 首先要清楚一個問題，之前說的層疊性是沒有涉及到css的權重性的缠导，就是當所有樣式的權重值都相同的廉羔，層疊性的就近原則才會其效果，就是離標簽最近的優(yōu)先執(zhí)行僻造。
- 以下是各類型權重的排序：
-
憋他！important當在屬性值后加上這個后孩饼，它的權重值永遠是最高的，無限大竹挡。 -
行內標簽樣式（就是直接寫在標簽中的）镀娶，權重值為1,0,0,0 -
id選擇器權重值為0,1,0,0 -
類或者偽類選擇器權重值為0,0,1,0 -
標簽選擇器權重值0,0,0,1 -
*通配符選擇器或者繼承樣式權重值為0,0,0,0
-
- 注意：權重值是可以累計但是不能進位的。例如揪罕，
div ul li(0,0,0,3),a:hover(0,0,1,1)梯码，.nav ul li(0,0,1,2)。 - 通過以上例子就能知道好啰，多個選擇器組合轩娶，權重是可以累計的。但是永遠不能進位框往，就是說哪怕你寫十個標簽選擇器鳄抒，它的權重也是0,0,0,10而不是0,0,1,0，另外要記住一點椰弊，不管父元素的權重多高许溅，對子元素永遠是繼承過來0的權重。
- 特殊標簽
a和h秉版，你可能會發(fā)現(xiàn)如果給body設置一個通用樣式后贤重，對a和h標簽不起作用。原因是瀏覽器渲染時默認就賦給了它們標簽選擇器的樣式沐飘，就是說它們本身是有權重的游桩，所以不會繼承。所以想要a和h標簽有樣式耐朴，你必須要單獨寫借卧。
- 以下是各類型權重的排序：
CSS背景設置
背景顏色設置
- 使用
background-color:顏色；可以設置頁面的背景顏色筛峭，這個是可以和背景圖像一起設置的铐刘，當背景圖像沒有填滿頁面，那么剩余的地方就會被背景顏色填充影晓。 - 注意：不管是設置背景顏色還是背景圖片镰吵，它都是應用到頁面最底層。所以它與
<img>插入圖片不同挂签，是可以在背景上放置各種元素的疤祭。
背景圖像設置
- 使用
background-image:url()；來設置背景圖像饵婆。 - 注意url()中的圖片地址可以用""包裹勺馆，也可以不用，都能生效。但這里提倡直接寫地址即可草穆。
背景圖像顯示設置
- 使用
background-repeat:repeat|no-repeat|repeat-x|repeat-y;來設置背景圖像顯示樣式 - 設置背景圖像的默認值是repeat（平鋪）灌灾，就是把整個頁面都用背景圖來鋪滿。no-repeat是不平鋪悲柱，repeat-x是橫向平鋪锋喜，repeat-y是縱向平鋪。
背景圖片位置設置
- 使用
background-position:X軸 Y軸;來設置背景圖片位置 - 關于X軸和Y軸的值有幾種設置方式：
- 1.方位詞豌鸡。
left center right - 2.準確數(shù)值嘿般。 百分數(shù) 單位值（px等）
- 方位詞很好理解就是，左中右三個方位直颅。準確數(shù)值是基于x軸和y軸來計算的博个，假如你設置
background-position：30px center,那么背景圖的位置在靠左的中間。所以說準確數(shù)值就是XY軸0刻度到圖片邊框的距離功偿。 - 通常來說只使用方位詞的話盆佣，沒有限制寫得順序。但是為了避免出現(xiàn)混淆械荷，這里統(tǒng)一規(guī)定共耍，必須按照
X軸 Y軸這樣的順序來寫。 - 發(fā)現(xiàn)一個問題吨瞎，如果給body設置背景圖痹兜，不指定高度寬度的話，會出現(xiàn)找不到頁面高度颤诀，這個時候Y軸只有設置px單位才能正常顯示字旭，方位詞和百分比會出錯。
- 1.方位詞豌鸡。
