一、內聯樣式
內聯樣式通過style屬性來設置，屬性值可以任意的CSS樣式。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>內聯樣式</title>
6 </head>
7 <body>
8 <p style="background: red"> I love China!</p>
9 </body>
10 </html>
顯示效果：
二、內部樣式
內部樣式定義在文檔的head部分，通過style標簽來設置。需要使用元素選擇器（p）來關聯樣式和要設置樣式的標簽（p標簽）。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>內聯樣式</title>
6 <style type="text/css">
7 p{
8 background: green;
9 }
10 </style>
11 </head>
12 <body>
13 <p> I love China!</p>
14 </body>
15 </html>
效果：
三、外部樣式
在文檔外的*.css定義css樣式，然后在文檔的head部分通過link元素引入。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>內聯樣式</title>
6 <link rel="stylesheet" href="style.css">
7 </head>
8 <body>
9 <p> I love China!</p>
10 </body>
11 </html>
style.css文件內容：
1 p{ 2 background: yellow; 3 }
顯示效果：
a.在一個外部樣式表中導入其他樣式表的樣式
combine.css文件中導入上面的style.css
1 @import "style.css"; 2 body{ 3 background: red; 4 }
HTML文件中引入combine.css文件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>document</title>
6 <link rel="stylesheet" href="combine.css">
7 </head>
8 <body>
9 <p> I <span>love</span> China!</p>
10 </body>
11 </html>
效果：
b、聲明樣式表的字符編碼
1 @charset "utf-8" 2 p{ 3 background: yellow !important; 4 }
四、元素樣式的層疊和繼承
1、樣式層疊
樣式表允許以多種方式規定樣式信息。樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
- 瀏覽器缺省設置（瀏覽器的默認樣式）
- 外部樣式表
- 內部樣式表（位於 <head> 標簽內部）
- 內聯樣式（在 HTML 元素內部）
- 同一樣式表中，CSS選擇器越准確的，優先級越高。
不同優先級的樣式表定義元素的不同css屬性都會作用在元素上，相同的css屬性只有優先級最高的會對元素起作用。相同優先級樣式表中css選擇器准確的樣式起作用，同一樣式表中css選擇器一樣的后邊會覆蓋前邊的樣式。
用重要樣式（！important）可以調整層疊次序
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>內聯樣式</title>
6 <link rel="stylesheet" href="style.css">
7 </head>
8 <body>
9 <p style="background: red"> I love China!</p>
10 </body>
11 </html>
style.css文件
1 p{ 2 background: yellow !important; 3 }
important標記的樣式會有最高的優先級。
在谷歌瀏覽器的開發者工具中我們可以查看元素的優先級，同一個元素的最上面的樣式的優先級最高。
2、樣式繼承
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>document</title>
6 <style type="text/css">
7 p{
8 color: white;
9 background: grey;
10 border: 2px solid black;
11 }
12 </style>
13 </head>
14 <body>
15 <p> I <span>love</span> China!</p>
16 </body>
17 </html>
span元素並沒設置字體顏色，但是卻是用前景色white,這個值有父元素p繼承來。可以從一個元素的祖先元素繼承樣式，繼承來的樣式的優先級是最低的 （比瀏覽器的默認樣式的優先級都低）。
並非所有的css屬性均可繼承，只有與元素外觀相關的元素會繼承。元素在頁面布局相關的樣式不會繼承，css中可以使用inherit強行實行繼承。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>document</title>
6 <style type="text/css">
7 p{
8 color: white;
9 background: grey;
10 border: 2px solid black;
11 }
12 span{
13 border: inherit;
14 }
15 </style>
16 </head>
17 <body>
18 <p> I <span>love</span> China!</p>
19 </body>
20 </html>
3.繼承屬性和通用元素選擇器
我們有時候給所有元素的設置某個樣式，如字體等，我們一般會使用通用選擇器來設置。但是對所有元素都起作用，效率較低，這個時候我們可以考慮給body元素設置字體，body的子元素會默認繼承字體。