認識CSS樣式
CSS全稱爲”層疊樣式表(Cascading Style Sheets)”, 它主要是用於定於HTML內容在瀏覽器內的顯示樣式，如文字大小，顏色，字體加粗等。
如下列代碼:
p{
font-size:12px;
color:red;
font-weight:bold;
}使用CSS樣式的一個好處是通過定義某個樣式， 可以讓不同網頁位置的文字有着統一的字體，字號或者顏色等。
示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識CSS樣式</title>
<style type="text/css">
p{
font-size:20px;/*設置文字字號*/
color:red;/*設置文字顏色*/
font-weight:bold;/*設置字體加粗*/
}
</style>
</head>
<body>
<p>何時杖爾看南雪，我與梅花兩頭白!</p>
</body>
</html>CSS樣式的優勢
爲什麼使用CSS樣式來設置網頁的外觀樣式呢？右邊編輯器是一段文字，我們想把 超酷的互聯網，服務及時貼心，有趣易學 這三個短語的文本顏色設置爲紅色，這時 就可以通過設置樣式來設置，而且只需要編寫一條CSS樣式語句。
第一步：把這三個短語用<span></span> 標籤括起來。
第二部：寫入Demo
span{color:red;}觀察結果窗口文字的顏色是否變爲紅色了。
示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS樣式的優勢</title>
<style type="text/css">
span{
color:blue;
}
</style>
</head>
<body>
<p><span>超酷的互聯網</span>、IT技術創新的網絡一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專注服務互聯網工程師快速成爲技術高手！</p>
</body>
</html> CSS代碼語法
CSS樣式由 選擇符 和 聲明 組成，而 聲明 又由 屬性 和 值 組成， 如下圖所示:
選擇符：
又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段(p)的文字將變成藍色，而其它的元素(如ol)不會受到影響。
聲明： 在英文大括號”{}”中的就是聲明，屬性和值直接用英文冒號:隔開。當有多條聲明時，中間可以英文分號:分隔，如下所示:
p{font-size:12px;color:red;}注意：
- 最後一條聲明可以沒有分好，但是爲了以後修改方便，一般也加上分號。
- 爲了使用樣式更加容易閱讀，可以將每條代碼寫在一個新行內，如下圖所示：
p{font-size:12px; color:red;}示例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS代碼語法</title>
<style type="text/css">
p{
font-size:12px;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<p>超酷的互聯網、IT網絡一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專注服務互聯網工程師快速成爲技術高手！</p>
</body>
</html>內聯式CSS樣式，直接寫在現有的HTML標籤中
CSS樣式可以寫在哪些地方呢? 從CSS樣式代碼插入的形式來看基本可以分爲以下三種: 內聯式， 嵌入式， 外部式 。
內聯式 CSS樣式表就是把CSS代碼直接寫在現有的HTML標籤，如下面代碼:
<p style="color":red>這裏的文字是紅色。</p>注意要寫在元素的開始標籤裏。
並且CSS樣式代碼要寫在style=""雙引號中 ，如果有多條CSS樣式代碼設置可以寫在一起，中間用分號給開。如下代碼:
<p style="color:red; font-size:12px">這裏文字是紅色。</p>示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標籤</title>
<style type="text/css">
span{
color:red;
}
</style>
</head>
<body>
<p><span style="color:blue">超酷的互聯網</span>、IT技術免費學習平臺，創新的網絡一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專注服務互聯網工程師快速成爲技術高手！</p>
</body>
</html>嵌入式 CSS樣式, 寫在當前的文件中
現在有一個任務，把上述代碼中的”超酷互聯網”、”服務及時貼心”、”有趣易學” 這三個短詞文字字號修改爲18px。如果用我們學習的內聯式CSS樣式進行設置將是一件很頭疼的事情(爲每一個<>span標籤加入style=”font-size : 18px”語句)，本小節講解一種新的方法嵌入式CSS樣式來實現這個任務。
嵌入式CSS樣式，就是可以把CSS樣式代碼寫在 <style type="text/css"></style> 標籤之間。如下面代碼實現把三個 <span> 標籤中的文字設置爲紅色:
<style type="text/css">
span{
color:red;
}
</style>嵌入式CSS樣式必須寫在 <style></style> 之間，並且一般情況下嵌入式CSS樣式寫在 <head></head> 之間。如右邊編輯器中的代碼。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css樣式</title>
<style type="text/css">
span{
color:blue;
}
</style>
</head>
<body>
<p><span>超酷的互聯網</span>、IT技術網絡一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專注服務互聯網工程師快速成爲技術高手！</p>
</body>
</html>外部式CSS樣式, 寫在單獨的一個文件中
外部式CSS樣式(也可以成爲外聯式)就是把CSS代碼寫一個單獨的外部文件中，這個CSS樣式文件以 .css 爲擴展名， 在<head> 內(不是在style 標籤內) 使用 <link> 標籤將CSS樣式文件鏈接到HTML文件內，如下代碼:
<link href="base.css" rel="stylesheet" type="text/css" />注意:
- CSS樣式文件名稱以有意義的英文字母命名，如main.css。
- rel=”stylesheet” type=”text/css” 是固定寫法不可修改。
<link>標籤位置一般寫在<head>標籤之內。
示例:
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css樣式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p><span>超酷的互聯網</span>、IT創新的網絡一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專注服務互聯網工程師快速成爲技術高手！</p>
</body>
</html>style.css
span{
color:red;
font-size:20px;
}三種方法的優先級
內聯式 > 嵌入式 > 外部式
嵌入式 > 外部式 有一個前提：嵌入式css樣式的位置一定在外部式的後面。其實總結來說，就是就近原則(離被設置元素越近優先級別越高)。
但注意上面所總結的優先級是有一個前提。權值相同
