body {

           font-size:12px;

    color:#333;

       }

上面就是一個(gè)樣式，它定義網(wǎng)頁內(nèi)字體大小為12像素，字體顏色為深灰色。這猶如貼在網(wǎng)頁對(duì)象上的標(biāo)簽，負(fù)責(zé)告訴瀏覽器該如何顯示網(wǎng)頁的外觀。從這點(diǎn)來看，可以把CSS看作是一種簡(jiǎn)單的標(biāo)記語言，與HTML語言類似，都屬于一種高級(jí)語言。但是它們?cè)诰W(wǎng)頁中分工不同，HTML負(fù)責(zé)網(wǎng)頁結(jié)構(gòu)的構(gòu)建，而CSS負(fù)責(zé)網(wǎng)頁對(duì)象的樣式呈現(xiàn)，說通俗點(diǎn)就是如何修飾網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。CSS的最終目的就是如何把網(wǎng)頁設(shè)計(jì)得更好看，更易于閱讀。

CSS在Web應(yīng)用和開發(fā)中屬于一種輕量級(jí)的語言，比HTML還要簡(jiǎn)單。但是由于瀏覽器兼容問題、CSS編輯工具和支持技術(shù)的欠缺，以及傳統(tǒng)網(wǎng)頁設(shè)計(jì)習(xí)慣等因素?zé)o形中加大了CSS技術(shù)的學(xué)習(xí)和應(yīng)用速度。

學(xué)習(xí)CSS時(shí)，你首先應(yīng)該明確兩個(gè)基本概念：層疊和樣式。

l         層疊（Cascading）：這是CSS的核心概念之一。也就是說多個(gè)CSS樣式可以作用于同一個(gè)對(duì)象，形成樣式的層疊現(xiàn)象，CSS能夠根據(jù)一套規(guī)則來決定對(duì)象應(yīng)該繼承哪些樣式以及顯示為什么樣的效果。沒有層疊這個(gè)核心規(guī)則，你會(huì)發(fā)現(xiàn)使用CSS會(huì)非常麻煩，似乎又要回到傳統(tǒng)的使用HTML的屬性來設(shè)置網(wǎng)頁樣式的老路。

l         樣式（Style）：這是CSS的基礎(chǔ)。CSS就是通過一個(gè)個(gè)樣式來作用于網(wǎng)頁對(duì)象，并規(guī)定它們呈現(xiàn)為不同的外觀。網(wǎng)頁的外觀正是通過無數(shù)個(gè)大大小小的樣式來描繪的。一個(gè)網(wǎng)頁內(nèi)部可能包含無數(shù)個(gè)CSS樣式，同時(shí)每個(gè)CSS樣式內(nèi)部也包含無數(shù)個(gè)規(guī)則。我們可以看到上面為body對(duì)象定義的樣式中就包含了兩條規(guī)則，它們分別定義網(wǎng)頁字體的大小和顏色。

1.2.1  認(rèn)識(shí)CSS基本語法

CSS樣式可以由三部分構(gòu)成：選擇器、屬性和屬性值（如圖1-11所示）。而其中的每一個(gè)屬性/屬性值對(duì)又構(gòu)成了一條規(guī)則，也稱為一個(gè)聲明。多個(gè)樣式便構(gòu)成了一張CSS樣式表，CSS樣式表可以保存在單獨(dú)的文件中，這樣就形成樣式表文件（擴(kuò)展名為.css），也可以保存在HTML文檔中。

圖 1-11

選擇器有多種類型，靈活使用選擇器可以設(shè)計(jì)出精妙的網(wǎng)頁樣式。這猶如Photoshop中的選取工具，Photoshop的所有編輯和操作都建立在選取區(qū)域基礎(chǔ)之上，如何精確選取、如何快速選取決定了你的圖像編輯和處理效果。同理，在CSS中如何巧妙結(jié)合不同類型的選擇器來設(shè)置網(wǎng)頁樣式是一個(gè)很關(guān)鍵的操作。

常用選擇器有三種：標(biāo)簽選擇器、類選擇器和ID選擇器。

標(biāo)簽選擇器一般用來定義HTML標(biāo)簽的樣式，選擇器的名稱就是這些HTML標(biāo)簽名稱。也許你對(duì)HTML提供的標(biāo)簽?zāi)J(rèn)樣式不滿意。例如，你可能對(duì)于HTML默認(rèn)8像素左右的的頁邊距非常不感冒，則可以定義下面樣式清除這個(gè)默認(rèn)值：

body {

           margin:0;

           padding:0;

       }

或者對(duì)于段落默認(rèn)的前后一個(gè)字距的段距不滿意，則可以定義下面樣式清除這個(gè)默認(rèn)值：

p {

           margin:0;

       }

也許你還希望取消項(xiàng)目列表前面的項(xiàng)目符號(hào)，則可以使用下面樣式：

ul,ol {

           list-style-type:none;

       }

也許你還不明白上面樣式的具體含義，但是不要緊，只要你明白它們的結(jié)果，以及標(biāo)簽選擇器有何作用就行了，不影響你的繼續(xù)學(xué)習(xí)。因此，我們可以下一個(gè)這樣的結(jié)論：

標(biāo)簽選擇器用來修改HTML標(biāo)簽的默認(rèn)樣式，或者定義HTML標(biāo)簽的默認(rèn)顯示樣式。

類選擇器是另一種使用率比較高的選擇器。所謂類，就是把網(wǎng)頁內(nèi)不同對(duì)象的相同樣式集聚在一起定義，這樣能夠減輕CSS樣式定義的工作量和降低代碼容積。例如，網(wǎng)頁中很多對(duì)象內(nèi)字體顏色都顯示為紅色，則我們可以使用類選擇器定義一個(gè)樣式：

.red {

           color:red;

       }

其中“.red”就是一個(gè)類選擇器，red就表示一個(gè)類（注意，類選擇器前面要增加點(diǎn)號(hào)（.）前綴。這樣我們就可以在網(wǎng)頁中不同對(duì)象中調(diào)用該對(duì)象，例如，<div class="red">我顯示為紅色</div>。

如果網(wǎng)頁中很多對(duì)象都顯示為相同樣式，適合使用類選擇器來定義樣式。因此，我們可以下一個(gè)這樣的結(jié)論：

類選擇器用來概括不同對(duì)象的相同樣式。

一個(gè)類可以在不同對(duì)象中反復(fù)調(diào)用，同樣一個(gè)對(duì)象也可以調(diào)用多個(gè)類樣式。例如：

<style type="text/css">

.red {

           color:red;

       }

.bold {

           font-weight:bold;

       }

</style>

<div class="red bold">我顯示為紅色，同時(shí)還加粗顯示</div>

ID選擇器是與類選擇器相對(duì)立的一種類型。類選擇器傾向于并購(gòu)，而ID選擇器鐘情于細(xì)分市場(chǎng)。當(dāng)你把所有字體都定義12像素顯示時(shí)，未免顯得單一和武斷，也許你希望腳本文本顯示為10像素，或者標(biāo)題文本顯示為14像素，如此等等。這時(shí)我們就可以利用ID選擇器具體勾勒每個(gè)對(duì)象的不同樣式。例如：

<style type="text/css">

#red {

           color:red;

       }

#blue {

           color:blue;

       }

</style>

<p id="red ">本段顯示為紅色</p>

<p id="blue">本段顯示為藍(lán)色</p>

類選擇器前面必須跟井號(hào)（#）前綴。因此，我們可以下一個(gè)這樣的結(jié)論：

類選擇器適合，且只能為某一個(gè)對(duì)象定義樣式。

選擇器的類型還很多，限于篇幅就不再詳細(xì)敘述了，不過如果你掌握了上面三種選擇器也就基本上夠用了。另外，你還可以把多個(gè)選擇器分成一組來定義相同的樣式，這樣就避免重復(fù)為不同選擇器書寫相同的樣式，分組的方法是把多個(gè)選擇器用逗號(hào)寫在一起。例如：

h1, h2, h3, h4, h5, h6 {

    color:blue;

}

在上面的樣式中，把所有標(biāo)題元素分為一組，并定義每個(gè)標(biāo)題元素的文字都為綠色。

淺顯認(rèn)識(shí)了CSS選擇器之后，下面我們?cè)賮砹私釩SS包含的屬性。CSS包含150多個(gè)屬性，這些屬性又被分成很多種類，例如，字體屬性、文本屬性、背景屬性、列表屬性、布局屬性、邊框?qū)傩?、定位屬性等（詳?xì)說明可以參閱本書光盤中附贈(zèng)的CSS參考手冊(cè)），我們將在第5章中還將詳細(xì)講解。

1.2.2  應(yīng)用CSS樣式

定義完畢CSS樣式之后，又如何將樣式表加入到網(wǎng)頁中呢？你可以采用以下三種方式將樣式表加入網(wǎng)頁中。

第一種方法是把樣式表保存在外部文件中，然后把該樣式表文件鏈接或?qū)氲骄W(wǎng)頁中。一般網(wǎng)站都采用這種方式，它能夠?qū)崿F(xiàn)在多個(gè)網(wǎng)頁中重復(fù)利用同一張樣式表文件定義的樣式。鏈接的語法如下：

<link rel=stylesheet href="樣式表文件URL" type="text/css">

導(dǎo)入樣式表文件的語法如下：

<style type="text/css">

@import url("樣式表文件URL ");

</style>

第二種方法是定義內(nèi)部樣式表，也就是在網(wǎng)頁內(nèi)部（一般位于頭部）利用<style>標(biāo)簽來定義。例如：

<style type="text/css">

body {font: 10pt "Arial"}

p{font: 10pt/12pt "Arial"; color: black}

</style>

在<style>標(biāo)簽中需要定義type屬性，設(shè)置為"text/css"，它表示該標(biāo)簽中包含的代碼為CSS樣式，以便于瀏覽器進(jìn)行解析。這種方法適合在單獨(dú)網(wǎng)頁中定義樣式，以便于管理。

第三種方法是定義內(nèi)聯(lián)樣式，內(nèi)聯(lián)定義就是在標(biāo)簽內(nèi)部使用style屬性定義適用該標(biāo)簽的樣式表屬性。例如：

<p style="margin: 0.5in;">該段落四周被增加了半個(gè)字體高度左右的外補(bǔ)丁<p>

這種方式適合僅為單獨(dú)的標(biāo)簽定義樣式。這種方法設(shè)計(jì)比較方便，但是不便于管理，僅適合個(gè)別應(yīng)用，不適合普遍使用。

1.2.3  Dreamweaver CS3對(duì)CSS的支持

Dreamweaver CS3對(duì)于CSS技術(shù)的支持主要集中在【CSS樣式】面板中（如圖1-12所示）。在該面板中你可以定義樣式，導(dǎo)入或鏈接外部樣式，并為網(wǎng)頁中的對(duì)象應(yīng)用樣式，所有操作都是一站式完成。這對(duì)于初學(xué)者來說絕對(duì)是一個(gè)福音，想到要熟悉并記憶一百多個(gè)CSS屬性，這對(duì)于任何一位設(shè)計(jì)師來說都不是件簡(jiǎn)單的事，而使用【CSS樣式】面板提供的【CSS規(guī)則定義】對(duì)話框講幫助你輕松完成所有樣式的定義（如圖1-13所示）。

除了【CSS樣式】面板提供的便利的可視化CSS樣式定義操作之后。Dreamweaver CS3還重新設(shè)計(jì)了新建項(xiàng)目的模板布局樣式。這些模板全部采用CSS布局。在每個(gè)模板中都有大量的注釋解釋CSS布局，這非常適合廣大初學(xué)者快速學(xué)習(xí)CSS布局技巧。

另外，Dreamweaver CS3支持了在網(wǎng)頁中可視化操作和管理CSS代碼。你可以使用鼠標(biāo)輕松移動(dòng) CSS代碼。例如，從行中到標(biāo)題，從標(biāo)題到外部表，從文檔到文檔，或在外部表之間。所有操作都變得異常方便（詳細(xì)講解請(qǐng)參閱第5章內(nèi)容。使用Device Central CS3工具還可以設(shè)計(jì)、預(yù)覽和測(cè)試移動(dòng)設(shè)備的CSS布局效果。

1.2.4  分析CSS在動(dòng)態(tài)網(wǎng)站中的角色

把CSS和動(dòng)態(tài)網(wǎng)站扯在一起，似乎有點(diǎn)風(fēng)馬牛不相及了。但是在開發(fā)動(dòng)態(tài)網(wǎng)站中，CSS的作用不容忽視，雖然離開CSS，你依然可以開發(fā)出功能強(qiáng)大的動(dòng)態(tài)網(wǎng)站，但是當(dāng)Web 2.0風(fēng)潮洶涌互聯(lián)網(wǎng)時(shí)，你會(huì)發(fā)現(xiàn)CSS的作用愈加重要和關(guān)鍵。很多時(shí)候，我們需要結(jié)合CSS來動(dòng)態(tài)控制網(wǎng)頁的布局，以及利用CSS來設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁的顯示效果。

例如，在如圖1-14所示的Google新聞咨詢中文主頁中，你可以動(dòng)態(tài)定制網(wǎng)頁的顯示內(nèi)容和方式。實(shí)際上它正是通過腳本動(dòng)態(tài)控制CSS來實(shí)現(xiàn)的。

圖 1-14

實(shí)際上，如果缺少了CSS技術(shù)的支持，設(shè)計(jì)類似的網(wǎng)頁動(dòng)態(tài)效果是非常困難的。CSS雖然不是動(dòng)態(tài)網(wǎng)站的核心技術(shù)，但是絕對(duì)是一個(gè)不可或缺的配角。隨著Ajax技術(shù)的廣泛應(yīng)用，這種趨勢(shì)更為明顯。當(dāng)你在開發(fā)Web 2.0項(xiàng)目時(shí)，絕對(duì)不能夠離開CSS的技術(shù)支持。

• css