5.3 css優(yōu)化簡介
什么是CSS呢？你可能急迫的想知道答案。
什么是Cascading Style Sheets（層疊樣式表）
* CSS是Cascading Style Sheets(層疊樣式表)的簡稱.
* CSS語言是一種標(biāo)記語言,它不需要編譯,可以直接由瀏覽器解釋執(zhí)行(屬于瀏覽器解釋型語言).
* 在標(biāo)準(zhǔn)網(wǎng)頁設(shè)計中CSS負(fù)責(zé)網(wǎng)頁內(nèi)容(XHTML)的表現(xiàn).
* CSS文件也可以說是一個文本文件,它包含了一些CSS標(biāo)記,CSS文件必須使用css為文件名后綴.
* 可以通過簡單的更改CSS文件,改變網(wǎng)頁的整體表現(xiàn)形式,可以減少我們的工作量,所以她是每一個網(wǎng)頁設(shè)計人員的必修課.
* CSS是由W3C的CSS工作組產(chǎn)生和維護的.
如何將樣式表加入到網(wǎng)頁(css的調(diào)用方式)
可以用以下三種方式將樣式表加入您的網(wǎng)頁。而最接近目標(biāo)的樣式定義優(yōu)先權(quán)越高。高優(yōu)先權(quán)樣式將繼承低優(yōu)先權(quán)樣式的未重疊定義但覆蓋重疊的定義。例外請參閱 !important 聲明。
鏈入外部樣式表文件 (Linking to a Style Sheet)
你可以先建立外部樣式表文件（.css），然后使用HTML的link對象。示例如下：
<head>
<title>文檔標(biāo)題</title>
<link rel=stylesheet type="text/css">
</head>
而在XML中，你應(yīng)該如下例所示在聲明區(qū)中加入：
<? xml-stylesheet type="text/css" ?>
定義內(nèi)部樣式塊對象 (Embedding a Style Block)
你可以在你的HTML文檔的<HTML>和<BODY>標(biāo)記之間插入一個<STYLE>...</STYLE>塊對象。 定義方式請參閱樣式表語法。示例如下：
<html>
<head>
<title>文檔標(biāo)題</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>
請注意，這里將style對象的type屬性設(shè)置為"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單。
內(nèi)聯(lián)定義 (Inline Styles)
內(nèi)聯(lián)定義即是在對象的標(biāo)記內(nèi)使用對象的style屬性定義適用其的樣式表屬性。
使用CSS+DIV的優(yōu)點
采用CSS+DIV進(jìn)行網(wǎng)頁重構(gòu)相對與傳統(tǒng)的TABLE網(wǎng)頁布局而具有以下3個顯著優(yōu)勢：
1：表現(xiàn)和內(nèi)容相分離
將設(shè)計部分剝離出來放在一個獨立樣式文件中，HTML文件中只存放文本信息。這樣的頁面對搜索引擎更加友好。
2：提高頁面瀏覽速度
對于同一個頁面視覺效果，采用CSS+DIV重構(gòu)的頁面容量要比TABLE編碼的頁面文件容量小得多，前者一般只有后者的1/2大小。瀏覽器就不用去編譯大量冗長的標(biāo)簽。
3：易于維護和改版
你只要簡單的修改幾個CSS文件就可以重新設(shè)計整個網(wǎng)站的頁面。
4: 使用div+css更符合現(xiàn)在的W3C國際標(biāo)準(zhǔn).
但是，使用DIV+CSS的方式制作頁面也有缺點。第一，瀏覽器對<div>的支持不夠好，第二，搜索引擎并不解析CSS文件里的內(nèi)容，對于那些需要被突出的關(guān)鍵字或者內(nèi)容，最好還是采用HTML標(biāo)簽進(jìn)行標(biāo)注，例如加粗<b>,字體顏色，標(biāo)題標(biāo)簽<h1>等
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點擊進(jìn)入論壇
