CSS基礎知識一
CSS樣式的引用方式主要有三種：
｜－內聯方式
｜－嵌入式
｜－外部方式
1.內聯方式
內聯方式是最基礎的CSS程式碼引用方式，直接將CSS樣式程式碼嵌入到HTML程式碼中，是最不好維護的一種方式。類似於：
<body>
<div style="color:green;font-size: 20px;">這是通過內聯方式引用CSS程式碼</div>
</body>
</html>2.嵌入式
一般的我們會將CSS程式碼寫在HTML檔案的<head>標籤裡面，至少是寫在<body>標籤的最開頭，這是因為在瀏覽器請求網頁資料的時候可能會一部分一部分的傳送/獲取，首先得到CSS樣式程式碼不至於在網速太慢的情況下使網頁顯示出現錯亂的情況，而Javascript的程式碼一般放置在<body>標籤的最後面。
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{color:red;font-size: 20px}
</style>
</head>
<body>
<div>這是通過嵌入方式引用CSS程式碼</div>
</body>從上面的程式碼中可以看到，我們不是把CSS程式碼直接嵌入到HTML中，而是將CSS程式碼寫在<head>標籤中，通過屬性選擇器來引用對應的樣式程式碼。
為了維護方便，有時會將CSS程式碼寫在一個.css的檔案中，在HTML檔案的<head>中引入。
index.css檔案如下:
#id_div{color:red;font-size: 20px}在index.html檔案的<head>中進行CSS樣式檔案引入：
<head lang="en"> <meta charset="UTF-8"> <title></title> <link href="index.css" type="text/css" rel="stylesheet"> </head> <body> <div id="id_div">這是通過外部引用方式引用CSS程式碼</div> </body>
［注意］
三種CSS程式碼引用方式中，若CSS樣式有重複，那麼CSS樣式繪製的優先順序為：
內聯方式 > 嵌入方式 > 外部引用方式
CSS樣式選擇器
對於CSS嵌入引用方式和外部引用方式，一般都要用樣式選擇器來引入到對應的HTML程式碼中，CSS的樣式選擇器主要有以下幾種：
標籤選擇器、類選擇器、ID選擇器、通用選擇器、子選擇器、包含選擇器、偽類選擇器、組合選擇符號。
（1）標籤選擇器：使用HTML標籤標註選擇器的名稱
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
div{color: red; font-size: 20px}
</style>
</head>
<body>
<div>標籤選擇器 一</div>
<div>標籤選擇器 二</div>
</body>上面的程式碼中，我們在<head>標籤中使用div聲明瞭一組CSS樣式，系統就會將<body>中所有<div>標籤的CSS樣式都改為這一組樣式，而無需我們引入：
（2）類選擇器
HTML的標籤可以通過class來設定類名稱，多個HTML可以有相同的class，類選擇器的命名方式類似於：
.類選擇器名次{CSS樣式程式碼}
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
.div_class{color: red; font-size: 20px}
</style>
</head>
<body>
<div class="div_class">標籤選擇器 一</div>
<div>標籤選擇器 二</div>
</body><body>中有兩個<div>，其中一個設定了class，效果：
（3）ID選擇器
HTML的每一個標籤可以設定唯一的ID，與類不一樣，標籤的ID相互之間不能相同，ID選擇器命名方式為：
#ID選擇其名稱{CSS樣式程式碼}
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
#div_ID{color: green; font-size: 20px}
</style>
</head>
<body>
<div id="div_ID">標籤選擇器 一</div>
<div>標籤選擇器 二</div>
</body>ID選擇器只會改變設定了該ID的HTML標籤的CSS樣式：
（4）子選擇器
子選擇器是用來定位父元素的某些子元素，由兩部分組成，前半部分是表明父元素，後半部分表明子元素，兩個元素之間使用>進行連線，父元素和子元素表明可以使用標籤選擇器、類選擇器或者ID選擇器。
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
#div_ID>p{color: red;font-size: 30px}
div>.class_span{color:green;font-size: 20px}
</style>
</head>
<body>
<div id="div_ID">
<p>子選擇器 一</p>
</div>
<div>
<span class="class_span">子選擇器 二</span>
</div>
<div>子選擇器使用 > 進行連線</div>
</body>上面的程式碼中有兩個CSS樣式引入的地方，#div_ID>p將會定位到id="div_ID"的標籤下的<p>標籤；div>.class_span會定位到所有一代子標籤有class="class_span"的標籤：
（5）包含選擇器
包含選擇器和子選擇器很像，包含選擇器是為了定位父元素下的某些元素，但是是使用空格連線兩個定位標籤：
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
#div_ID p{color: blue;font-size: 30px}
.div_class>p{color: greenyellow; font-size: 20px}
</style>
</head>
<body>
<div id="div_ID">
<div>
<p>包含選擇器 一</p>
</div>
<p>包含選擇器 二</p>
</div>
<div>包含選擇器使用 空格 進行連線</div>
<div class="div_class">
<div>
<p>子選擇器 一</p>
</div>
<p>子選擇器 二</p>
</div>
<div>子選擇器使用 > 進行連線</div>
</body>上面的程式碼中同時使用了包含選擇器和子選擇器，id="div_ID"為<dic>使用了包含選擇器，class="div_class"的<div>標籤使用了子選擇器：
［注意］
從上面的效果可以看出，子選擇器和包含選擇器都是通過組合的模式來定位元素，不同的是，子選擇器只能定位到第一代子元素，而包含選擇器可以定位到父元素下面所有滿足條件的元素。
（6）通用選擇器
通用選擇器使用＊號來宣告，通用選擇器作用的範圍是當前HTML檔案中所有的標籤元素。
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
* {color: olivedrab; font-size: 20px}
#id_p{color: red; font-size: 30px}
.class_div{color: green}
span{color: blue}
</style>
</head>
<body>
<p id="id_p">通用選擇器 一</p>
<span>通用選擇器 二</span>
<div class="class_div">通用選擇器 三</div>
<span>通用選擇器 四</span>
<div>通用選擇器使用 * 宣告</div>
</body>效果如下：
可以看到，<body>中沒有單獨設定選擇其的元素都會被通用選擇器作用，改變樣式，這是因為通用選擇器的優先順序是最低的。
［注意］
相同的元素上若有多個選擇器定位，那麼就取決於各個選擇器的權值，一般的：
｜－通用選擇器的權值： 0.1
｜－標籤選擇器的權值： 1
｜－類選擇器的權值： 10
｜－ID選擇器的權值： 100
系統會選擇權值最高的選擇器進行CSS渲染，對於子選擇器和包含選擇器的權值等於連線符兩邊的兩種選擇器的權值值和。
（7）偽類選擇器
偽類選擇器的相容性不是很好，最常用的場景就是滑鼠在元素上滑過的效果。
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
a:hover{color:red; font-size: 30px}
</style>
</head>
<body>
<a href="#">滑鼠滑過的效果</a>
</body>（8）分組選擇符
有時候幾個不同的選擇器可能會有相同的CSS程式碼的部分，那麼就可以使用分組選擇符的方式同時完成CSS程式碼新增：
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
div,.class_span,#id_p{color: red;font-size: 20px}
</style>
</head>
<body>
<div>組合選擇符號 一</div>
<span class="class_span">組合選擇符號 二</span>
<p id="id_p">組合選擇符號 三</p>
</body>效果：
文字排版
font-family
font-size 字號
color 字型顏色
font-weight：bold 粗體
italic 斜體
text-decoration:underline 下劃線
text-decoration:line-through 刪除線
text-indent:2em 中文段落縮排
line-height 行間距
letter-spacing 字間距/字母間距
【說明】
1.em單位，em為本元素font-size的數值，當font-size=14px，那麼1em=14px;
2.字型的百分比：
div{
font-size:20px;
line-height:200%;
}上面程式碼表示行間距為font-size的200%。
3.行間距
line-height減去font-size之後，將差值平分就是字型距當前元素頂部/底部的距離。