DW_PHP_AJAX_CH3 表單的設計與規劃_(3)CSS樣式設定_概說

CSS是Cascading Style Sheet的縮寫, 譯為「串接樣式表」（本書簡稱「樣式表」）。在1997年W3C公佈HTML 4 標準的時候, 也同時公佈了第一個樣式表標準「CSS 1」, 樣式表的產生讓網頁編輯語法（HTML）產生了一個重大變革, 以前的HTML版本中, 文件內容的變化（例如文字顏色）都是直接透過元素標籤的屬性設定來實現, 在瀏覽器群雄爭霸的當時, 各個瀏覽器廠商為了市場爭奪而創建各種只有自家支援的元素標籤, 利用各種元素交互套疊而達到不同的效果, 造成網頁內容編輯一團混亂, CSS 的出現改變此一窘境, 讓文件內容的樣式變化設定有了共同的規格, 更簡化了網頁編輯的流程。

樣式表是DHTML（Dynamic HTML）的一部分, W3C 把 DHTML 分成三部分：文稿程式（例如 JavaScript ）、 CSS 、 支援動態效果的瀏覽器。建立樣式表用意就是把物件引入HTML （就是將元素標籤物件化）, 以便利用文稿程式（如javascript、VBScript）可以設定、變更、取用物件的屬性, 進而達到動態網頁的目的。在1998年5月 W3C 又發佈了CSS 2版本, 樣式表的功能更加充實。

!!!TIP:應用CSS的好處

通吃瀏覽器

CSS樣式表, 不管瀏覽者是使用何種瀏覽器來觀賞網頁皆能表現出網頁獨特的風格, 不像JavaScript或VBScript語言會因為瀏覽器的不同而產生差異, 不單是市場上使用率最高的 Microsoft Internet Explorer (IE) 與 Netscape Communicator 瀏覽器支援, 甚至許多非主流的瀏覽器, 如 Emacs-W3、Arena......等, 都有支援解析的能力。

特立獨行的風格

一個人氣旺盛的網站之所以吸引人就是因為擁有獨一無二的風格！舉例來說：在 CSS樣式表出現之前, 幾乎所有網頁中的超鏈結文字都會加上底線 (Under Line) , 而且並無特色變化, 如果加上CSS語法那可就大大不同啦！

網路環保

在大家全力推廣全民上網的同時, 出現了一個嚴重的危機〔網路頻寬不足〕, 一方面是因為上網人口的急速增加造成頻寬不足, 但最大的原因是網頁設計者在網頁設計過程中使用了大量的圖片, 圖片檔的體積大, 在傳輸的過程中消耗了大量的網路資源, 而CSS的出現將使這個問題獲得部分紓解, CSS可使用單純的文字來達到與圖片相同的表現效果！也就是說：一段簡短的文字就可以取代體積龐大的圖片！不但傳輸速度加快, 同時也獲得與圖片相同的視覺效果。

網頁維護容易

為了維持我們特立獨行的網站風格, 同時也為了維持網頁的一致性, 我們可以建立一個獨立的CSS樣式表檔案, 讓我們建立的每一個網頁樣式都能參照此一樣式檔案, 當此一樣式檔案內容改變後, 所有有參照此一樣式檔案的網頁外觀也就會全部跟著改觀了, 因此我們不必一一的修改各個網頁來達到網站風格的一致性, 如果你維護的網頁只有幾頁, 或許並不會感受到它的便利性, 如果是上百頁甚至數百頁, 你就會體會到它所帶來的便利性！

下圖是我們上一節完成的表單網頁myForm.htm加上CSS樣式前、後的比較圖。

在本節單元中將說明如何在網頁上引入外部CSS樣式檔, 與如何將樣式檔中的樣式套用到網頁（表單）元素上, 應用的CSS樣式檔案為myForm.css。

/*套用於網頁的樣式*/
body {
 background-image:url(../img/21.jpg); /*加入背景底圖*/
 margin-top:50px;   /*設定上邊界*/
 margin-left:50px;   /*設定左邊界*/
}
/*設定網頁中標籤文字的樣式*/
.labelStyle {
 font-weight:bold;           /*粗體文字*/
 font-size:14px;   /*文字大小*/
 color:#666;   /*文字顏色*/
}
/*設定文字欄位的樣式*/
.textField {
 background-color:#FCF;  /*背景顏色*/
 color:#F06;           /*文字顏色*/
}
/*設定送出按鈕的樣式*/
.submitButton {
 background-color:#00F;     /*按鈕顏色*/
 color:#FFF;     /*按鈕文字顏色*/
 border-style:dotted;        /*外框線樣式*/
 border-width:thin;         /*框線寬度*/
}

/*設定重設按鈕的樣式*/
.resetButton {
 background-color:#F00;     /*按鈕顏色*/
 color:#FFF; /*按鈕文字顏色*/
 border-style:inset;         /*外框線樣式*/
 border-width:thin;         /*框線寬度*/
}