從事網站設計的工作為何要瞭解CSS?
從事網站美術設計工作的人，往往聽到程式碼或是CSS往往一個頭兩個大，這是有很多原因的有機會再慢慢說吧！
但是身為一個網站美術設計不能排斥CSS，而是要敞開心胸去接納他，去用心愛他，因為未來CSS是我們每天生活都必備的(除了您不想再走網站設計這條不歸路)，不然逃避是沒有用的。
好吧！言歸正傳接下來我們來討論一下CSS吧！
雖然我也是一個CSS的新手，但是我已經感受到CSS的威力了
先說CSS的定義吧！在此只說觀念而已不討論技術，所以請各位對CSS有興趣的就看下去吧！
CSS
層疊樣式表（或稱串樣式列表），簡寫為CSS，是英語Cascading Style Sheets的縮寫。它是W3C定義和維護的標準，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的電腦語言。目前最新版本是CSS 2.1，為W3C的候選推薦標準。下一版本CSS 3仍然在開發過程中。
概述
一個網頁的讀者和作者都可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS最主要的目的是將文件的結構（用HTML或其他相關的語言寫的）與文件的顯示（CSS）分隔開來。這個分隔有許多好處：
1. 文件的可讀性被加強
2. 文件的結構更加靈活
3. 作者和讀者可以自己決定文件的顯示
4. 文件的結構簡化了
CSS還可以使用其他的顯示方式，比如聲音（假如瀏覽器有閱讀功能的話）或給盲人用的感受裝置。此外CSS還可以與XHTML、XML或其他結構文件一起使用，唯一條件是顯示這種文件的瀏覽器裝備了接受CSS的功能。
使用CSS的優點有：
* 一個整個網站或其中一部分網頁的顯示信息被集中在一個地方，要改變它們很方便
* 不同的讀者可以有不同的樣式，比如有的讀者需要字體比較大
* HTML文件本身的範圍變小了，它的結構簡單了，它不需要包含顯示的信息
樣式規則
CSS的語法很簡單，它使用一組英語詞來表示不同的樣式和特徵。
一個式樣表由一組規則組成。每個規則由一個「選擇器」（selector）和一個定義部分組成。每個定義部分包含一組由半形分號（;）分離的定義。這組定義放在一對大括弧（{ }）之間。每個定義由一個特性，一個半形冒號（:）和一個值組成。
選擇器（Selector）
通常為檔中的元素（element），如html中的，等標籤，多個選擇器可以半形逗號（,）隔開。
屬性（property）
CSS1、CSS2、CSS3規定了許多的屬性，目的在控制選擇器的樣式。
值（value）
指屬性接受的設定值，可由各種關鍵字（keyword）組成，多個關鍵字時大都以空格隔開。
要針對沒有標籤定義範圍進行樣式設定時，可利用與標籤
歷史
從1990年代初HTML被發明開始樣式表就以各種形式出現了，不同的瀏覽器結合了它們各自的樣式語言，讀者可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示屬性，讀者來決定網頁應該怎樣被顯示。
但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加外來定義樣式的語言越來越沒有意義了。
1994年哈坤·利提出了CSS的最初建議。伯特·波斯（Bert Bos）當時正在設計一個叫做Argo的瀏覽器，他們決定一起合作設計CSS。
當時已經有過一些樣式表語言的建議了，但CSS是第一個含有「層疊」的主意的。在CSS中，一個文件的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或「層疊」作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。
哈坤于1994年在芝加哥的一次會議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個建議。當時W3C剛剛建立，W3C對CSS的發展很感興趣，它為此組織了一次討論會。哈坤、波斯和其他一些人（比如微軟的托馬斯·雷爾登）是這個項目的主要技術負責人。1996年底，CSS已經完成。1996年12月CSS要求的第一版本被出版。
1997年初，W3C內組織了專門管CSS的工作組，其負責人是克里斯·里雷。這個工作組開始討論第一版中沒有涉及到的問題，其結果是1998年5月出版的第二版要求。到2004年為止，第三版還未出版。
採納的困難
儘管CSS1規格1996年就完成了，但一直到三年後還沒有一個瀏覽器徹底實現了這些規格。2000年3月出版的微軟在麥金塔電腦上運行的Internet Explorer 5.0是第一個徹底貫徹CSS1的瀏覽器。此後許多其他瀏覽器也貫徹了CSS1和CSS2的一部分。但到2004年為止還沒有一個瀏覽器徹底貫徹了CSS2。尤其aural和paged等特性是被支持得最差的。即使徹底貫徹了CSS1的瀏覽器也遇到了許多困難。許多CSS的貫徹互相矛盾、有錯或有其他稀奇古怪的地方。為了使他們的頁面在所有的瀏覽器中、在所有的系統上的顯示相同，作者往往要使用特別的技巧或結局特殊的困難。一個最著名的錯誤涉及到顯示方形的寬度，在Internet Explorer瀏覽器中方形的寬度的顯示有錯誤，其結果是方形的寬度在許多瀏覽器中被正確地顯示，但在Internet Explorer上方形的寬度太窄。雖然這個錯誤有解決的辦法，但它限制了其他一些功能。
彩色文本 這只不過是上百個有記載的Internet Explorer、Netscape Navigator、Mozilla和Opera中的CSS錯誤中的一個。有些這些錯誤對文件的顯示有極重大的影響，CSS貫徹中的這眾多的錯誤給網頁設計者帶來了極大的困難，他們很難將他們的網頁設計到在所有的系統上都同樣的地步。
使用CSS
CSS 最重要的目標是將文件的內容與它的顯示分隔開來。在 CSS 出現前，幾乎所有的HTML文件內都包含文件顯示的信息，比如字體的顏色、背景應該是怎樣的、如何排列、邊緣、連線等等都必須一一在 HTML文件內列出，有時重複列出。CSS 使作者可以將這些信息中的大部分隔離出來，簡化 HTML 文件，這些信息被放在一個輔助的，用 CSS 語言寫的文件中。HTML文件中只包含結構和內容的信息，CSS 文件中只包含樣式的信息。
常見的陷阱
有時一個網頁的作者會亂用CSS。有些習慣於只使用HTML的作者可能會忽視CSS提供的可能性。比如有些習慣於使用HTML的顯示指令的作者可能會在所有的HTML文件內加入CSS樣式。這比將HTML顯示和結構指令混在一起是一個進步，但它還是有許多同樣的缺點，而且維護時的工作量與混合使用差不多。
CSS與其他程式語言有著一些共同的陷阱。尤其在命名CSS的id和class時，CSS作者常選擇一個比較有說明性的名稱而使用顯示特徵作為它們的名稱。比如一個作者可能使用bigred來命名一個用大紅字體的突出顯示的位元組。在當時，對作者來說這個名稱可能是很直覺的，但假如後來作者決定突出顯示的位元組應該使用綠色，而不是紅色的話，他的命名就有毛病了。在上面這個例子中，一個更合適的名稱應該是emphasized，它描寫的是這個class的用意，而不是它是如何被顯示的。
另一個毛病是未記錄的、未定義的和往往會被遺忘的名稱。一個網頁作者可能會選擇上百個名稱。名稱如footer、footnote或者explanation、note、info、more可能是指同一回事。這樣許多重複的名稱就出現了。有時一個複雜的網站的設計者可能會依賴在HTML文件內與HTML指令結合的CSS指令來解決這個問題，但這樣一來他又把內容與顯示黏有一起了，而且這樣一來這個文件就只適合於某一媒體了。（外部樣式表的一個大優點就是它是跨媒體的，因為不同的樣式可以特別適用於不同的輸出媒體。）
HTML本身的複雜性是另一個困難處。雖然大部分使用CSS的文件比傳統的使用表格的文件要整潔，但過分使用class和過於細膩的結構層次同樣使HTML變得繁庸。此外有的作者過分使用div指令。
另一個陷阱是為了克服常見的瀏覽器錯誤而引入特別的CSS指令，這些指令當然是為了克服已知的錯誤而引入的，但它們使一個CSS文件的維護性能降低，有時這樣的CSS文件的維護量甚至比過去的HTML文件的維護量還大。
有時一個作者可能會過度地使用CSS來決定他的文件應該怎樣被顯示，如：一個作者會決定隱藏超連結底下的橫線，這很容易做到，但對讀者來說這可能會是一個不方便。
CSS的要求
1996年12月發表的CSS1的要求有：
* 支持字體的大小、字形、強調
* 支持字的顏色、背景的顏色和其他元素
* 支持文章特徵如字母、詞和行之間的距離
* 支持文字的排列、圖像、表格和其他元素
* 支持邊緣、圍框和其他關於排版的元素
* 支持id和class
W3C管理CSS1要求
1998年5月W3C發表了CSS2，其中包括新的內容如絕對的、相對的和固定的定位元素、媒體型的概念、雙向文件和一個新的字型。W3C管理CSS2要求CSS2.1修改了CSS2中的一些錯誤，刪除了其中基本不被支持的內容和增加了一些已有的瀏覽器的擴展內容。它現在是一個要求候選者。
CSS3正在發展中。W3C發表一個CSS3發展過程報告。
轉貼來源：i-change設計
參考文獻：
1.邱柏清.(2004).網頁介面愉悅行之研究，國立台灣科技大學設計研究所碩士論文。
2.許峻誠、張恬君、莊明振.(2001).網頁風格認知與設計要素之探討-以企業網站首頁為例，第六屆設計學術研究果研討會論文集。
3.江嘉瑜（2002）。台灣花卉電子商務網站內容之分析。中興大學行銷學研究所碩士論文，未出版，台中。
相關文章
傳統軟體設計與網站設計的差別網站設計完成後，上線推廣的7種方式商務網站設計建站參考做商務網頁設計時的網站設計原則網站設計為English時，要注意的問題
最新文章
HVACKer：入侵隔離網絡的新型攻擊技術還有什麼不會被入侵？路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌，最狂的是一家估值 124 億美的數據分析新創！【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala，下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了
