一.引入樣式

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檔案載入到網頁當中

二.基本選擇器

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;
}