學過網頁設計的都知道CSS靈活性很好，網頁的樣式完全與代碼分離。僅僅需要簡單的CSS代碼知識就可以將一個本來不太漂亮的網頁立刻變得漂亮起來，很輕易的改變網頁的外觀。上一篇文章總結了CSS樣式的基礎以及優缺點。這篇文章接著說CSS樣式的用法。
一、CSS在網頁設計中有三種方式的用法，那麼具體使用中採用哪種方法呢？
當有多個網頁用到CSS採用外聯CSS檔案的方式，這樣不僅網頁的代碼大大減少，修改起來方便，而且還能提高複用性，這樣一個CSS檔案就可以控制多個HTML頁面了；只在單個網頁中使用的CSS，採用文檔頭部方式；只有在一個網頁一兩個地方才用到的CSS樣式，採用行內樣式，很方便，應用樣式時做相應修改即可。
二、下面簡單介紹一下CSS的三種方式
1、行內樣式
<html><head><title>例子</title></head><body style="background-color: #FF0000;"><p>這個頁面是紅色的</p></body></html>
2、內嵌樣式
<html><head><title>例子</title><style type="text/css"><!--body {background-color: #FF0000;}--></style></head><body><p>這個頁面是紅色的</p></body></html>
3、連結樣式
連結樣式就是要引入一個CSS檔案。CSS檔案可以放在伺服器或者本地硬碟上。那麼css檔案裡的樣式內容：
body {background-color: #FF0000;}
在HTML文檔裡面插入連結語句：
<link rel="stylesheet" type="text/css" href="style.css" />
這行連結語句要放在<head></head>之間：
<html><head><title>例子</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><p>這個頁面是紅色的</p></body></html>
以上三種方式說明了在顯示HTML頁面的時候要按照給定的CSS樣式進行顯示。
總結：網頁設計的過程中將以上三種方式結合起來應用，不僅不會造成混亂，而且特別靈活，效率高。如果一個網頁中有這三種方式，那麼首先檢查的是行內樣式，針對其樣式去執行；然後檢查的是內嵌樣式也就是頭部插入css樣式的；最後檢查的是串連樣式。也就是三種方式的優先順序由高到低分別是：行內樣式、內嵌樣式、匯入樣式。
PS：還有一種樣式使用@import引入： 跟LINK用法很像，但必須放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css"><!--@import url(http://yourweb/ example.css);--></STYLE>
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
