免費(fèi)AI編程助手
CSS的概念詳解
CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁(yè)面的外觀。通過(guò)使用CSS樣式設(shè)置頁(yè)面格式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離。CSS最早是1996年由W3C審核通過(guò)并推薦使用的，CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。
一、網(wǎng)頁(yè)中標(biāo)記的概念
我們知道CSS是用來(lái)表示W(wǎng)eb頁(yè)面外觀的，在學(xué)習(xí)CSS之前，要先了解一些網(wǎng)頁(yè)中的基本知識(shí)，那就是網(wǎng)頁(yè)中的標(biāo)記。標(biāo)記語(yǔ)言，也稱置標(biāo)語(yǔ)言，是一種將文本以及與文本相關(guān)的其他信息結(jié)合起來(lái)，展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。當(dāng)前廣泛使用的網(wǎng)頁(yè)標(biāo)記語(yǔ)言有兩種：超文本標(biāo)記語(yǔ)言（HTML）和可擴(kuò)展超文本語(yǔ)言（XHTML）
為了便于讀者從整體上把握HTML文檔結(jié)構(gòu)，通過(guò)一個(gè)HTML頁(yè)面的整體結(jié)構(gòu)，示例代碼如下所示：
<html>
<head>
<title>網(wǎng)頁(yè)標(biāo)題</title>
</head>
<body>
網(wǎng)頁(yè)內(nèi)容
</body>
</html>
從上面代碼可以看出，一個(gè)基本的HTML頁(yè)由以下幾個(gè)部分構(gòu)成。
（1）<html></html>。說(shuō)明本頁(yè)面使用HTML語(yǔ)言編寫(xiě)，使瀏覽器軟件能夠準(zhǔn)確無(wú)誤地解釋、顯示。
（2）<head></head>。head是HTML的頭部標(biāo)記，頭部信息不顯示在網(wǎng)頁(yè)中，此標(biāo)記內(nèi)容可以保護(hù)一些其他標(biāo)記，可以說(shuō)明文件標(biāo)題和整個(gè)文件的一些公用屬性，可以通過(guò)<style>標(biāo)記定義CSS樣式表，通過(guò)<script>標(biāo)記定義JavaScript腳本文件。
（3）<title></title>。title是head中的重要組成部分，它包含的內(nèi)容顯示在瀏覽器的窗口標(biāo)題中。如果沒(méi)有title，瀏覽器標(biāo)題欄顯示本頁(yè)的文件名。
（4）<body></body>。body包含HTML頁(yè)面的實(shí)際內(nèi)容，顯示在瀏覽器窗口的客戶區(qū)中。例如頁(yè)面中文字、圖像、動(dòng)畫(huà)、超鏈接、以及其他HTML相關(guān)的內(nèi)容都是定義在body標(biāo)記里面。
二、HTML與CSS的互補(bǔ)
HTML發(fā)展到今天存在3個(gè)主要的缺點(diǎn)：
第一：由于HTML代碼不規(guī)范、臃腫、需要足夠智能和龐大的瀏覽器才能夠正確顯示HTML；
第二：數(shù)據(jù)與表現(xiàn)混雜，當(dāng)頁(yè)面要改變顯示時(shí)就必須重新制作HTML；
第三：不利于搜索引擎搜索。
HTML也有兩個(gè)顯著的優(yōu)點(diǎn)：
第一：使用Table的表現(xiàn)方式不需要考慮瀏覽器兼容問(wèn)題；
第二：簡(jiǎn)單易學(xué)，易于推廣。CSS的產(chǎn)生恰好彌補(bǔ)了HTML的主要缺點(diǎn)，主要表現(xiàn)在以下幾個(gè)方面。
1、表現(xiàn)與結(jié)構(gòu)分離
CSS從真正意義上實(shí)現(xiàn)了設(shè)計(jì)代碼與內(nèi)容的分離，它將設(shè)計(jì)部分剝離出來(lái)并放在一個(gè)獨(dú)立樣式文件中，HTML文件中只存放文本信息，這樣的頁(yè)面對(duì)搜索引擎更加友好。
2、提高頁(yè)面瀏覽速度
對(duì)于同一個(gè)頁(yè)面視覺(jué)效果，采用CSS布局的頁(yè)面內(nèi)容量要比Table編碼的頁(yè)面文件容量小得多，前者一般只有后者的1/2.瀏覽器不用去解釋大量冗長(zhǎng)的標(biāo)簽。
3、易于維護(hù)和改版
開(kāi)發(fā)者只要簡(jiǎn)單修改幾個(gè)CSS文件就可以重新設(shè)計(jì)整個(gè)網(wǎng)站的頁(yè)面。
4、繼承性能優(yōu)越（層疊處理）
CSS的代碼在瀏覽器的解析順序上會(huì)根據(jù)CSS的級(jí)別進(jìn)行，它按照對(duì)同一元素定義的先后來(lái)應(yīng)用多個(gè)樣式。良好的CSS代碼設(shè)計(jì)可以使代碼之間產(chǎn)生繼承關(guān)系，能夠達(dá)到最大限度的代碼重用，從而降低代碼量及維護(hù)成本。
三、瀏覽器對(duì)CSS的支持
目前CSS 3是眾多瀏覽器普遍支持的最完善的版本，最新的瀏覽器均以該版本為支持原型進(jìn)行設(shè)計(jì)，例如IE9、Firefox和谷歌瀏覽器等。使用CSS 3樣式設(shè)計(jì)出來(lái)的網(wǎng)頁(yè)，在眾多平臺(tái)及瀏覽器下對(duì)樣式的表現(xiàn)最為接近?；鸷鼮g覽器對(duì)CSS的支持是最全面的，所以本教程中的示例大多是在火狐瀏覽器下運(yùn)行的。
更多建議：