《CSS3知識點》
一.引入樣式
1.行內樣式表
<h1 style="color: red;font-size: 18px;">10-30</h1>
2.內部樣式表(在head標籤裡面,title標籤下面)
<style type="text/css">
h2{
color: yellow;
font-size: 20px;
}
</style>
優點
方便在同頁面中修改樣式
缺點
不利於在多頁面間共享複用程式碼及維護，對內容與樣式的分離也不夠徹底
3.外部樣式表
<link href="../css/index.css" rel="stylesheet" type="text/css"/>
匯入式
<style type="text/css">
@import "../css/index.css";
</style>
嵌入式和匯入式的區別：
1.<link/>標籤屬於XHTML，@import是屬於CSS2.1
2.使用<link/>連結的CSS檔案先載入到網頁當中，再進行編譯顯示
3.使用@import匯入的CSS檔案，客戶端顯示HTML結構，再把CSS檔案載入到網頁當中
4.@import是屬於CSS2.1特有的，對不相容CSS2.1的瀏覽器是無效的
4.樣式優先順序
行內>內部>外部
就近原則
二.基本選擇器
1.標籤選擇器(通過標籤名稱定位)
h2{
color: red;
}
2.類選擇器(通過標籤中class屬性的值定位，值可以重複，不能以數字開頭)
.class01{
color:yellow;
}
<h2 class="class01">10-30</h2>
<h1 class="class01">10-31</h1>
3.ID選擇器(通過標籤中id屬性的值定位，值不可以重複，不能以數字開頭)
#id01{
color: red;
}
<h2 id="id01">10-30</h2>
<h1 id="id02">10-31</h1>
4.基本選擇器的優先順序
不遵循就近原則，無論哪一種樣式表的匯入，都遵循：id選擇器>類選擇器>標籤選擇器
三.高階選擇器
1.層次選擇器
/*後代選擇器*/
li p{
background-color: yellow;
}
/*子選擇器*/
body>p{
background-color: aqua;
}
/*相鄰兄弟*/
.class01+p{
background-color: red;
}
/*通用選擇器*/
.class01~p{
background-color: blue;
}
2.結構偽類選擇器
ul li:first-child{
background-color: yellow;
}
ul li:last-child{
background-color: red;
}
ul li:nth-child(even){
background-color: blue;
}
/*匹配元素型別*/
p:first-of-type{
background-color: pink;
}
p:last-of-type{
background-color: green;
}
p:nth-of-type(3){
background-color: aqua;
}
3.屬性選擇器
/*包含id屬性*/
a[id]{
background-color: red;
}
/*包含target屬性，並且值為_blank*/
a[target=_blank]{
background-color: yellow;
}
/*包含title屬性，並且值以we開頭*/
a[title^=we]{
background-color: aqua;
}
/*包含title屬性，並且值以e結尾*/
a[title$=e]{
background-color: black;
}
/*包含class屬性，並且值包含it*/
a[class*=it]{
background-color: blue;
}