一.引入樣式
	
	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檔案載入到網頁當中
			
 
[email protected]是屬於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;
        }