CSS樣式的簡(jiǎn)單概述

在早期的Web網(wǎng)站建設(shè)中，網(wǎng)頁(yè)完余由一些簡(jiǎn)單排版的文本和圖像組成，HTML語(yǔ)言允許使用一些描述性的標(biāo)簽來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行美化設(shè)計(jì)。然而隨著網(wǎng)頁(yè)技術(shù)的發(fā)展，簡(jiǎn)單的HTML標(biāo)簽己不能滿足人們對(duì)網(wǎng)頁(yè)美觀的要求。于是，W3C制訂了Css的技術(shù)規(guī)范，希望通過(guò)CSS來(lái)幫助網(wǎng)頁(yè)設(shè)計(jì)師們?cè)O(shè)計(jì)出各種精美的網(wǎng)頁(yè)。

CSS技術(shù)在網(wǎng)頁(yè)中主要用于布局和美化，與XHTML的有機(jī)結(jié)合可以使Web更加結(jié)構(gòu)化、標(biāo)準(zhǔn)化。作為最重要的網(wǎng)頁(yè)布局與美化工具之一，CSS在近年普及得非常迅速。國(guó)內(nèi)幾乎所有的大型商業(yè)網(wǎng)站都在使用CSS來(lái)為網(wǎng)頁(yè)布局，并對(duì)網(wǎng)頁(yè)的各種對(duì)象進(jìn)行美化設(shè)計(jì)。

CSS (Cascading Style Sheet，層疊樣式表)是一種用于網(wǎng)頁(yè)設(shè)計(jì)的、無(wú)需編譯的、由網(wǎng)頁(yè)瀏覽器直接解析的標(biāo)記語(yǔ)言。在網(wǎng)頁(yè)中，CSS的作用是對(duì)XHTML中的對(duì)象進(jìn)行描述和定義，并通過(guò)這些描述和定義，控制網(wǎng)頁(yè)中的對(duì)象以及網(wǎng)頁(yè)整體樣式。

Dreamweaver擁有強(qiáng)大的CSS編輯功能。在Dreamweaver中編輯CSS，需要使用到CSS面板。通過(guò)CSS面板，可以為網(wǎng)頁(yè)添加、刪除、編輯CSS樣式代碼。

在Dreamweaver中執(zhí)行[窗口]|[CSS樣式I命令(或按Shift+F11組合鍵)，即可打開(kāi)CSS面板。該面板分為兩個(gè)部分，即所有規(guī)則部分和樣式屬性部分。所有規(guī)則部分顯示當(dāng)前網(wǎng)頁(yè)中的所有CSS樣式，而樣式屬性部分則列出當(dāng)前選擇的Css樣式定義了哪些屬性，如圖4-1所示。

在CSS面板中，可以通過(guò)一些按鈕來(lái)對(duì)網(wǎng)頁(yè)的Css規(guī)則進(jìn)行操作，如表4-1所示。

使用Dreamweaver為網(wǎng)頁(yè)創(chuàng)建Css規(guī)則，可以單擊【新建CSS規(guī)則】按鈕，在彈出的【新建CSS規(guī)則】對(duì)話框中設(shè)置新CSS規(guī)則的基本參數(shù)，如圖4-2所示。
在該對(duì)話框中，可以創(chuàng)建不同類型的CSS樣式。其中，對(duì)話框中詳細(xì)參數(shù)的介紹如表4-2所示。


如果使用【新建CSS規(guī)則】對(duì)話框創(chuàng)建外部CSS樣式，Dreamweaver將提示保存外部CSS鏈接文件。并在保存該文件后將其自動(dòng)打開(kāi)，以提供給網(wǎng)頁(yè)設(shè)計(jì)者進(jìn)行編輯。
CSS是一種非常重要的網(wǎng)頁(yè)設(shè)計(jì)工具。目前，幾乎所有的網(wǎng)頁(yè)設(shè)計(jì)都離不開(kāi)CSS.因此，在設(shè)計(jì)網(wǎng)頁(yè)前有必要了解CSS的基本語(yǔ)法及其結(jié)構(gòu)。

CSS的語(yǔ)句結(jié)構(gòu)非常簡(jiǎn)單，每段CSS代碼由兩個(gè)部分組成，即選擇器(Selector)

和聲明(Declaration)。聲明又包括屬性以及屬性值兩部分，這兩部分必須寫(xiě)在大括號(hào)“{}”內(nèi)。Css代碼書(shū)寫(xiě)格式如下所示。