串接排版樣式(Cascading Style Sheet)(一)


前言
HTML 是所謂的標準通用標籤語言SGML(Standard Generation Markup Language)的一種應用。 SGML是以標籤來將文件的內容結構化。 傳統的SGML文件包含了結構、樣式、與內容 三大主體。但是隨著HTML的快速演進，各家瀏灠器也不再重視結構與表現型式的區分。

怎麼說呢? ，同學學習到現在很容易會有一種印象，在設計HTML文件內容時，若用<H2>來指定一段文字 ，用意就是希望呈現出來的字型是粗體字，然後字型是幾點，行距是多少....。換言之，你是用這些標籤 來代表某一種的呈現樣式。因此，在你的HTML文件中，何時會用到<P>，何時會用到<H1>， <H2>，<H3>...等等標籤，都隨你的意思，不管先後關係，也沒有限制。

但是這其實不是HTML語法當初設計的初衷，照說<H1>標題元件的後面應該是另一個<H1> 元件或是<H2>元件，而不應該出現<H1>元件，因為這是文章正確的結構。但由於瀏灠器不會 限制你，久而久之，幾乎大家也不管什麼文件內容架構。這樣子做固然方便，但是由於文件的結構性不再， 使得很多工具軟體無法發揮其作用。例如，一些索引工具便無法利用文件的結構來從事智慧型地分析與蒐尋 工作。

事實上，HTML也有一組規則來說明文件的正確架構。例如所有的標籤要 放在<HTML>與</HTML>之間；<HEAD>要放在<BODY>之前...等等的規則描述。這些 東東都會寫在一個叫做文件型態定義DTD(Document Type Definition)的檔案中。 這是符合SGML精神的，也就是結構與樣式分開定義的。但是後來HTML出現了像<B> <I> 之類的標籤和樣式上的屬性之後，就悖離了SGML的精神了。

排版樣式
樣式(style)，簡單來說就是HTML文件中的元素，呈現的樣子，譬如以何種顏色? 以何種字型? 等等。 定義樣式表的目的， 最主要就是將HTML文件結構的設計與元件的呈現樣式的設計 分開來處理，讓標籤的應用回復到單純的結構上的考量。

串接排版樣式CSS
串接排版樣式，是全球資訊網協會(W3C) 定義的一種將樣式從文件中分離出來的簡單模式，目前已定義了CSS-1版和CCS-2版，兩大瀏灠器都有支援大部份的 CSS-1。 CSS它可視為HTML的新增語法，用以定義各元件之樣式。主要有三 種定義方式:
Inline Style Sheet： 這種設定排版的方式是最簡單的，就是將相關的排版設定完全在同一個控制標籤中來設定完成。
Embedding Style Sheet：這類排版樣本必須在HTML的文件檔頭區中設定，然後在HTML的文件本體區中再來使用這些設定，這種方式可以同時設定很多個排版樣式。
Linking Style Sheet： 這種方式就是允許將排版樣本獨立成一個檔案，當某個網頁需要有這種樣本時，則可以在該HTML檔中宣告，這種方式使得排版樣本可以重複使用。

以上三種方式可以聯合使用在一個HTML文件內，所以稱為串接排版樣式。我們將在後續內章節中詳細介紹之。


CSS可以給你什麼幫助?
一般傳統的HTML控制標籤無法滿足設計者的需要，因為它有以下的缺點：
設定麻煩：需要一一針對其形狀、大小與顏色做設定。
修改麻煩：同樣需要個別去修改每一項設定，相當沒有效率。
功能不足：無法控制到網頁版面與瀏覽器視窗的間隔設定，或是指定文字顯示時的行高、首行向內或向外縮排...等等。

CSS 可以改善上述問題。而且，CSS可以設定的對象不只有文字，也包括圖片與多媒體的呈現。



到下一頁