CSS控制頁面樣式的4種方式和優先順序問題

最後更新：2017-09-14 來源：互聯網

上載者：User

關鍵字網頁製作 CSS教程

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本節主要講解，兩個內容，

第一：CSS如何控制頁面樣式，有幾種方式；

第二：這些方式出現在同一個頁面時的優先順序。

使用xHTML+CSS佈局頁面，其中有個很重要的特點就是內容與表像相分離，內容指HTML頁面代碼，表像就是CSS代碼了，如果把頁面看成穿著衣服的人的話，人就是HTML，是內容，而衣服呢就是CSS，是表
象，現在出現的問題是，如何讓CSS去控制頁面？或者說，如何讓衣服穿在人身上，好體現出人得風格特點；不同的CSS就可以使頁面出現不同的風格適用不同的網站，而不同的衣服，人穿上後就會體現
出不同的職業。

第一：如何讓CSS去控制HTML頁面效果呢？
有這麼4種方式，行內方式、內嵌方式、連結方式、導入方式

1）行內方式
行內方式是4種樣式中最直接最簡單的一種，直接對HTML標籤適用style=""，例如：

雖然這種方法比較直接，在製作頁面的時候需要為很多的標籤設置style屬性，所以會導致HTML頁面不夠純淨，檔體積過大，不利於搜索蜘蛛爬行，從而導致後期維護成本高。

2）內嵌方式
內嵌方式就是將CSS代碼寫在<head></head>之間，並且用<style></style>進行聲明，例如：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html xmlns="HTTP://www.w3.org/1999/xhtml">

<head>

<meta HTTP-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>無標題文檔</title>

<style type="text/css">



</style>

</head>

<body>

<div id="div1"><img src="HTTP://www.cssxuexi.cn/index/images/ico/2days.gif" /></div>

全國的CSS愛好者彙聚于此，如果不來，你就OUT嘍~我們的口號是：

「分享自己的歡樂與痛苦，分享自己的經驗與心得，分享自己的資料與資源」

如果您也願意，就加入我們吧~

</body>

</html>

內嵌方式，大家應該也能意識到，即使有公共CSS代碼，也是每個頁面都要定義的，如果一個網站有很多頁面，每個檔都會變大，後期維護也大，如果檔很少，CSS代碼也不多，這種方式還是很不錯
的。

3）連結方式
連結方式是使用頻率最高，最實用的方式，只需要在<head></head>之間加上

，就可以了，這種方式將HTML檔和CSS檔徹底分成兩個
或者多個檔，實現了頁面框架HTML代碼與美工CSS代碼的完全分離，使得前期製作和後期維護都十分方便，並且如果要保持頁面風格統一，只需要把這些公共的CSS檔單獨保存成一個檔，其他的頁
面就可以分別調用自身的CSS檔，如果需要改變網站風格，只需要修改公共CSS檔就OK了，相當的方便，這才是我們xHTML+CSS製作頁面提倡的方式。
HTML代碼

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html xmlns="HTTP://www.w3.org/1999/xhtml">

<head>

<meta HTTP-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>無標題文檔</title>

<link href="style.css" type="text/css" rel="stylesheet" />

</head>

<body>

<div id="div1"><img src="HTTP://www.cssxuexi.cn/index/images/ico/2days.gif" /></div>

全國的CSS愛好者彙聚于此，如果不來，你就OUT嘍~我們的口號是：

「分享自己的歡樂與痛苦，分享自己的經驗與心得，分享自己的資料與資源」

如果您也願意，就加入我們吧~

</body>

</html>

CSS代碼

#div1{width:64px; height:64px; float:left;}

#div1 img{width:64px; height:64px;}

4)導入方式
導入樣式和連結樣式比較相似，採用import方式導入CSS樣式表，在HTML初始化時，會被導入到HTML檔中，成為檔的一部分，類似第二種內嵌方式。
具體導入樣式和連結樣式有什麼區別，可以參看這篇文章《CSS:@import與link的具體區別》，不過我還是建議大家用連結方式！

第二：四種樣式的優先順序
如果這上面的四種方式中的兩種用於同一個頁面後，就會出現優先順序的問題，這裡我就不再舉例子來說明瞭，大家在下面自己證明一下下面的結論

四種樣式的優先順序別是(從高至低)：行內樣式、內嵌樣式、連結樣式、導入樣式。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More