css基礎語法一（選擇器與css導入方式）
頁面中，所有的CSS代碼，需要寫入到<style></style>標簽中。style標簽的type屬性應該選擇text/css，但是type屬性可以省略。
CSS修改頁面中的所有標簽，必須借助選擇器選中。選擇器中，可以寫多對CSS屬性，用{}包裹： 每個屬性名與屬性值之間用:分隔，多對屬性之間，必須用;分隔。
選擇器{
屬性1:屬性值1;
屬性2:屬性值2;
}
【CSS常用選擇器】
1、標簽選擇器
寫法： HTML標簽名{}
作用： 可以選中頁面中，所有與選擇器同名的HTML標簽。
2、 類選擇器(class選擇器)
寫法： .class名{}
調用： 在需要調用選擇器樣式的標簽上，使用class="class名"調用選擇器
優先級： >標簽選擇器
3、ID 選擇器
寫法： #ID名{}
調用： 需要調用樣式的標簽，起一個id="ID名"
優先級： ID選擇器>class選擇器
註意： 一個頁面中，不能出現同名ID
【Class選擇器與ID選擇器的區別】
1、 寫法不同:class選擇器用.聲明，ID選擇器用#聲明；
2、 優先級不同： ID選擇器>class選擇器
3、 作用範圍不同： class選擇器可以多次調用，ID選擇器只能使用一次。
【選擇器的命名規範】
1、只能有字母、數字、下劃線、減號組成；
2、 開頭不能是數字。也不能是只有一個減號。
一般，起名要求有語義，使用英文單詞與數字的組合。
4、通用選擇器
寫法： *{}
作用： 可以選中頁面中所有的HTML標簽。
優先級： 最低！！！
5、並集選擇器
寫法： 選擇器1,選擇器2,……,選擇器n{}
生效規則： 多個選擇器取並集，只要標簽滿足其中任意一個選擇器，樣式即可生效。
6、交集選擇器
寫法： 選擇器1選擇器2……選擇器n{} 所有選擇器緊挨著，沒有分隔
生效規則： 多個選擇器取交集，則必須滿足所有選擇器的要求，才能生效
7、後代選擇器
寫法： 選擇器1 選擇器2 …… 選擇器n{} 選擇器之間空格分隔
生效規則： 只要滿足，後一選擇器是前一個選擇器的後代，即可成效。（後代包括子代、孫代、重孫代。。。）
通俗的講：只要後一個選擇器，在前一個選擇器裏面即可。
8、子代選擇器
寫法： 選擇器1>選擇器2>……>選擇器n{} 選擇器之間用>分隔
生效規則： 必須滿足，後一個選擇器是前一個選擇器的直接子代，才能生效。（中間不能間隔任何標簽）
【優先級的權重問題】
1、CSS生效的第一原則是“近者優先”！即，哪個選擇器作用於最裏層標簽，則這個選擇器生效；
2、當選擇器作用於同一層時，可以根據優先級權重，進行累加計算：
ID選擇器*100 > class選擇器*10 > 標簽選擇器*1
註意： 並集選擇器，相當於多個選擇器拆開寫，所以，並集選擇器的優先級不能累加。
3、 當選擇器作用於同一層，且優先級權重相等時。則，寫在最後的選擇器生效。
【引入CSS的三種方式】
1、 行內樣式表：直接在HTML標簽中，使用style=""的方式引用；
<div style="height: 100px;"></div>
優點： 使用靈活，優先級權重最高？
缺點：不符合W3C關於“內容與表現分離”的要求；不利於樣式復用；
2、 內部樣式表： 在<head></head>標簽中，使用<style>標簽包裹CSS代碼；
特點： 一定程度的實現了HTML與CSS的分離，但是分離不夠徹底，沒有辦法多頁面共用樣式。
3、 外部樣式表： 將CSS單獨寫入CSS文件中，並與HTML文件關聯。
優點： 徹底實現HTML與CSS的分離，符合W3C規範，有利於多頁面復用統一樣式；
【 導入CSS文件的兩種方式】
① 在<head>標簽中，使用link鏈接：
<link rel="stylesheet" type="text/css"href="css/02-CSS.css" />
② 在<style>標簽中，[email protected]：
@import url("css/02-CSS.css");
【兩種導入方式的區別】
① link屬於標準的HTML標簽，[email protected]；
② link可以兼容所有低版本瀏覽器，[email protected]；
③ link是將兩個文件鏈接起來，起橋梁作用； [email protected]；
④ link會在HTML文件邊加載的過程中，邊鏈接CSS文件；
@import會在HTML文件全部加載完以後，再導入CSS文件；
綜上所述，我們使用link鏈接的方式，加載CSS文件。
css基礎語法一（選擇器與css導入方式）