DIV+CSS基礎教程:CSS如何控制頁面

來源:互聯網
上載者:User
本節主要講解,兩個內容:

複製內容到剪貼簿

代碼:

第一:CSS如何控制頁面樣式,有幾種方式;

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

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


第一:如何讓CSS去控制HTML頁面效果呢?

有這麼4種方式,行內方式、內嵌方式、連結方式、匯入方式


1)行內方式


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

複製內容到剪貼簿

代碼:

<p style="color:#F00; background:#CCC; font-size:12px;"></p>

複製代碼雖然這種方法比較直接,在製作頁面的時候需要為很多的標籤設定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">

<!--

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

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

-->

</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>之間加上

複製內容到剪貼簿

代碼:

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

就可以了,這種方式將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的具體區別》,不過我還是建議大家用連結方式!


第二:四種樣式的優先順序


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

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


出自:CSS學習論壇

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.