CSS使用方式及選擇器
CSS概述
- 1.CSS，全稱“Cascading Style Sheets”，用於設定HTML標籤的樣式，它的基本結構如下：
基本結構
div{width: 480px; height: 320px; }
包含：選擇符div;樣式屬性：width和height;樣式屬性值
- 2.Css使用方式
樣式表主要有4種方式，即，
- “內嵌樣式”：寫在style標籤對裡面。
舉例
<style>
div{
color: red;
}
</style>
- “行內樣式”：直接寫在標籤行上面。
舉例
<div style="color: red;">hello</div>
- “外鏈樣式”：單獨寫一個css檔案，通過link標籤引入。
舉例
舉例
<style>
@import url("./index.css");
</style>
匯入式可以同時匯入多個樣式,但匯入每個檔案時要如同寫內嵌樣式時，在每個屬性值的末尾加上一個分號結尾。
四種方式的選擇：
1.在開發中關於css樣式一般或多或少都會使用一些行內樣式與內嵌樣式，但是主體還是通過引入單獨的css檔案進行使用的。
2.Link與@import兩種方式都可以引入單獨的css檔案,我們一般選擇link標籤，即外鏈式。
3.Link與@import一些區別
（1）<link>除了載入CSS檔案以外，它還能載入其它型別檔案，如“icon”，而“@import”只能載入CSS檔案
給網頁加上圖示：<link rel="shortcut icon" href="oa.jpg">
（2）<link>在現代的瀏覽器中是多執行緒載入的，也就是說在通過該標籤載入一個檔案的時候<body>標籤內的DOM也在執行同步的載入。載入效率高於@import
（3）<link>
<link>標籤，修改<link>的屬性值等）。而“@import”寫在<style>標籤內部或CSS檔案內（寫在<style>標籤內和CSS檔案內的寫法一致），是無法通過JavaScript進行操作的。
- CSS的基礎選擇器主要有三個：“標籤選擇器”、“類選擇器”和“ID選擇器”。
標籤選擇器
<style>
div {
font-size: 32px;
color: brown;
width: 300px;
height: 100px;
background-color: antiquewhite;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
</style>
類選擇器
.sle{
font-size: 32px;
color: brown;
width: 300px;
height: 100px;
background-color: antiquewhite;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
</style>
<style>
#sle {
font-size: 32px;
color: brown;
width: 300px;
height: 100px;
background-color: antiquewhite;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
</style>
- 一個完整的HTML頁面是有很多不同的標籤組成，而標籤選擇器，則是決定哪些標籤採用相應的CSS樣式。
- 後代選擇器
後代選擇器是對某元素所巢狀的指定元素進行選擇，每個選擇符之間用空格進行分割，多個巢狀層次應該以多個空格進行分割
後代選擇器
<style>
div p {
font-size: 32px;
color: brown;
width: 300px;
height: 100px;
background-color: antiquewhite;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
div .son{
color: blue;
}
</style>
- 子選擇器
子選擇器區別與後代選擇器的地方就是，後代選擇器可以選擇巢狀在標籤內部任意層級的標籤元素，而自選擇器只能選擇當前標籤往內一層的元素。每個選擇符之間用“>”進行分割。
<style>
div>p {
font-size: 32px;
color: brown;
width: 300px;
height: 100px;
background-color: antiquewhite;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
div>span {
display: inline-block;
width: 400px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
text-align: center;
line-height: 100px;
}
</style>
- 偽類選擇器
偽類選擇器和其它選擇器有所不同，它是通過觸發一定的“事件”來實現效果，也就是說如果不進行任何操作是看不到該選擇器的CSS樣式設定的。
通用偽類選擇器如下（如果要同時生效，順序不能變）:
作用於a標籤上的偽類選擇器如下：
a:link {color: #FF0000} /* 未訪問的連結 */
a:visited {color: #00FF00} /* 已訪問的連結 */
a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
a:active {color: #0000FF} /* 選定的連結 */
- 群組選擇器
群組選擇器的使用範疇是，多個選擇器使用同一個樣式或者同一組樣式。這在做CSS樣式初始化，CSS框架設計以及後期CSS程式碼優化時會經常使用。
群組選擇器
p,div,h1,.mydiv,#par{
color:red;
}
作用於“，”分隔的所有標籤,類選擇器，ID選擇器。
- 同級元素選擇器
選定當前標籤同級的其它指定標籤。
同級元素有兩種，即“+”和“~”，
“+”只能選擇該標籤相鄰的下一個標籤
“~”能選擇該標籤後的所有同級標籤。
p ~ div{
color: brown;
}
<body>
<a href="https://www.baidu.com/">點選一下</a>
<div>hello style!</div>
<p>hello</p>
<div>hello stye!</div>
<h1>hello hello</h1>
<h1>hello hello</h1>
<div>hello</div>
</body>
-
屬性選擇器
1. [屬性名]{...樣式設定內容...} 舉例：[title]{ color;red; } 2.[屬性名="屬性值"]{...樣式設定內容...} 3.[type^="datetime"]{...樣式設定內容...} 舉例：[title^="iam"]{ color;red; } 4.[title$="picture"]{...樣式設定內容...} 舉例：[title$="h1"]{ color;red; } 5.[title*="is"]{...樣式設定內容...} 將標籤中的一個屬性名名為“title”，屬性值含有“is”的屬性名值對作為一個選擇器 舉例：[title*="h1"]{ color;red; } 6.[title~="a"]{...樣式設定內容...} 將標籤中的一個屬性名名為“title”，屬性值含有空格分隔的詞為“a”的屬性名值對作為一個選擇器 這個規則會選擇 title 文字包含 "a" 的所有影象 舉例：[title~="a"]{ color;red; } 7.[title|="this"]{...樣式設定內容...} 將標籤中的一個屬性名名為“title”，屬性值等於“this”或以“this”開頭的屬性名值對作為一個選擇器。以連字元(-)連線的如lang ="this-us"，也算以this開頭 上面這個規則會選擇 title 屬性等於 this 或以 this- 開頭的所有元素 舉例：[title|="this"]{ color;red; } -
4.權重
當樣式衝突時，將根據【權重+就近原則】來判斷以誰的樣式為準。
- 基本型別選擇器權重
行列樣式：1000
Id選擇器： 100
Class選擇器：10【屬性選擇器】
標籤選擇器：1
*任意符選擇器：0 （大於預設樣式與繼承驗樣式）
- 組合選擇器權重
群組選擇器： 單獨計算
後代，子代，兄弟等選擇器：權重相加
- 就近原則
當權重值相同時，誰和要設定的html標籤隔得近，誰的權重就高。
- 先比較權重，權重相同依據就近原則
- 繼承比預設的大，但是比賦予的權重小；
- 後代，子代，兄弟等選擇器，權重相加(.name>p,權重為10+1=11)
- 群組選擇器： 單獨計算(div,p,h1,.name ，#pra 權重分別為：1，1，1，10,100)