標籤：link 命名規範 .class css常用 相容 ros 簽名 屬性 連結
頁面中，所有的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選取器>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>標籤中，使用@import匯入：
@import url("css/02-CSS.css");
【兩種匯入方式的區別】
① link屬於標準的HTML標籤，而@import不是標準標籤；
② link可以相容所有低版本瀏覽器，而@import只在CSS2之後能用；
③ link是將兩個檔案連結起來，起橋樑作用； 而@import相當於將CSS檔案複製到HTML檔案中；
④ link會在HTML檔案邊載入的過程中，邊連結CSS檔案；
@import會在HTML檔案全部載入完以後，再匯入CSS檔案；
綜上所述，我們使用link連結的方式，載入CSS檔案。
css基礎文法一（選取器與css匯入方式）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
