CSS和HTML一樣，也是一種標記語言，代碼簡單，通過瀏覽器解釋執行，是一種用於為HTML文檔定義布局的樣式表語言。
作用：HTML用於結構化內容；CSS用于格式化結構化的內容
Ø CSS的出現彌補了HTML對標記屬性控制的不足，如“背景映像重複”只能用CSS的“background-repeat”才能實現
Ø CSS將網頁內容與樣式進行了分離，實現了對兩者的“解耦和”，因此使得樣式內容可以被很好的複用，大大提高了網站開發人員的工作效率和後期的維護工作
特性：
指被包在內部的標籤將擁有外部標籤的的樣式性質。
例：
層疊性：
指當有多個選取器都作用於同一元素時，即多個選取器的範圍發生了重疊，CSS該怎樣處理？
（1） 若多個選取器定義的樣式不發生衝突，則元素應用所有選取器定義的樣式
例：
（2） 若多個選取器定義的樣式發生衝突（比如：同時定義了字型顏色屬性），則CSS按選取器的優先順序，讓元素應用優先順序高的選取器樣式。
CSS定義的選擇優先順序從高到低為：行內樣式 > ID樣式 >類別樣式>標記樣式
測試：
<html><head><title>css層疊測試21</title><style type="text/css">/*標記樣式*/p{color:yellow}/*類別樣式*/.classStyle{color:blue}/*ID樣式*/#idStyle{color:green}</style></head><body><!--行內樣式--> <p class="classStyle" id="idStyle" style="color:red">Hello World</p></body></html>
分別用四種樣式設定“Hello World”的顏色屬性，最終顯示樣式是“行內樣式”的red。如下：
註：我們可以通過“!important“屬性強制改變選取器優先順序，加！important的選取器優先順序最高。
例：將上例中的標籤樣式語句改為“p{color:yellow !important}”，這樣運行結果會變為黃色，通過加！important，將本來優先順序最低的“標籤樣式”變為了優先順序最高。
CSS在HTML中的三種用法：
直接將使用HTML元素的style屬性來改變元素的樣式，style屬性可以應用於任意body元素（包括body本身）
例：
<html><head><title>css內聯樣式表測試</title> </head> <body> <p style="color:red">這裡應用css內聯樣式表，為紅色字型</p> </body></html>
運行結果：
（2）內部樣式表：
採用HTML元素的style屬性，將樣式表的內容定義在HTML檔案的<head>標記內，例：
<html><head><title>css內部樣式表測試</title><style type="text/css">.csstest{color:blue}</style> </head> <body> <p class="csstest">這裡應用css內部樣式表，為藍色字型</p> </body></html>
運行結果：
（3）外部樣式表：
指引用一個樣式表檔案（是一個副檔名為.css的文字檔），可以將一個檔案應用於多個html頁，使得樣式可複用，大大提高了網站開發效率。
引用一個樣式表有兩種方法：（1）鏈入外部樣式表 （2）匯入外部樣式表
（3.1）鏈入外部樣式表：
在HTML檔案的<head>地區內使用<link>標記進行連結，文法：
<link rel=”stylesheet” type=”text/css”href=”url”/>
其中url為樣式表檔案的地址，可以是相對位址和絕對位址
<html><head><title>css外部樣式表-鏈入外部樣式表測試</title><link rel=”stylesheet” type=”text/css” href=”style/style.css”/> </head> <body> <p class="csstest">這裡應用css外部樣式表，為紅色字型</p> </body></html>
原理：<link rel=”stylesheet”type=”text/css” href=”url”/>告訴瀏覽器，在執行html檔案時，應使用相應url下的css檔案進行布局和格式化。（檔案style.css放在style目錄下，代碼為 .csstest{color:red}）
（3.2）匯入外部樣式表：
在HTML檔案的<style> 地區內引用一個外部樣式表檔案，文法如下：
<style type="text/css">@import url(樣式表目錄位址)…</style>
@import聲明可以放到<head>標記之外，也可以放到<head>標記之內，但根據文法規則，一般放到<head>內使用，舉例如下：
<html><head><title>css外部樣式表-匯入外部樣式表測試</title><style type="text/css">@import url(style/style.css)；</style> </head> <body> <p class="csstest">這裡應用css外部樣式表的匯入外部樣式表形式，為紅色字型</p> </body></html>
原理同上面的“鏈入外部樣式表”;
註：@import聲明後的“； ”不能省略，此外，某些瀏覽器可能不支援匯入外部樣式表的@import聲明，所有最好別用這種方法，見到了認識即可。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
