css基礎
1.css樣式規則
選擇器{屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；}
CSS樣式中的選擇器嚴格區分大小寫，屬性和值不區分大小寫，按照書寫習慣一般將“選擇器、屬性和值”都采用小寫的方式。如果屬性的值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態下的引號。例如：
p{font-family:"Times New Roman";}
在css代碼中空格是不被解析的，花括號以及分號前后的空格可有可無。所以，可以使用空格鍵、Tab鍵、回車鍵等對樣式代碼進行排版，提高代碼可讀性。例如：
h1{font-size:20px;color:red;}
屬性的值和單位之間不允許出現空格。
2.引入css樣式表
使用css修飾網頁元素時，首先需要引入css樣式表，常用的引入方式有3種。
（1）行內式：行內式是通過標記的style屬性來設置元素的樣式，其基本語法格式如下：
<標記名 style="屬性1:屬性值1；屬性2:屬性值2;屬性3:屬性值3;">內容</標記名>
該語法中style是標記的屬性，實際上任何HTML標記都擁有style屬性，用來設置行內式，其中屬性和值的書寫規范與CSS樣式規則相同。行內式只對其所在的標記及嵌套在其中的子標記起作用。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS行內式</title>
</head>
<body>
<p style="font-size:14px; color:red">字體、顏色 、背景的控制及整體排版等。<p>
<p style="font-size:16px; color:blue;">通過更改CSS樣式，可以輕松控制網頁的表現樣式。</p>
</body>
</html>
通過上面的代碼可以看出來，行內式也是通過標記的style屬性來控制樣式的，並沒有做到結構與表現的分離，所以一般很少使用。通常，只有在樣式規則較少且只在該元素上使用一次，或者需要臨時修改某個樣式規則時使用。
`表現與結構分離`(單獨表現在前后加"`")
表現:css
結構:html
（2）內嵌式：內嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標記中，並且使用<style>標記定義，其基本語法格式如下：
<head>
<style type="text/css">
選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}
</style>
</head>
在這個語法中，<style>標記一般位於<head>標記中的<title>標記之后，也可以把它放在HTML文檔的任何地方。但是由於瀏覽器是從上到下解析代碼的，把CSS代碼放在頭部便於提前被下載和解析，以避免網頁內容下載后沒有樣式修飾，同時必須設置type的屬性值為“text/css”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS內嵌式</title>
<style type="text/css">
h2{ text-align:center;color:red;}
p{font-family:"微軟雅黑";font-size:16px;}
</head>
<body>
<h2>滕王閣序</h2>
<p>時維九月，序屬三秋。潦水盡而寒潭清，煙光凝而暮山紫。</p>
</body>
</html>
內嵌式CSS樣式只對其所在的HTML頁面生效，因此，僅設計一個頁面時，使用內嵌式是個不錯的選擇。但如果是一個網站，不建議使用這種方式，因為它不能充分發揮CSS代碼的重用優勢。
（3）鏈入式：鏈入式是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過<link />標記將外部樣式表文件鏈接到HTML文檔中，基本格式語法如下：
<head> <link href="CSS文件路徑" type="text/css" rel="stylesheet" /> </head>
該語法中，<link />標記需要放在<head>頭部標記中，並且必須指定<link />標記的三個屬性，這三個屬性介紹如下：
- href：定義所鏈接外部樣式表文件里的URL
- type：定義所鏈接文檔的類型，在這里需要指定為“text/css”,表示鏈接的外部條件為CSS樣式表。
- rel：定義當前文檔與被鏈接文檔之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。