什麼是CSS? 它的歷史與演變過程

網站是由圖片、文字及各種檔案所組成,這些檔案不僅包括從不同頁面連結到的PDF檔案,還包括用於構建頁面本身的檔,如決定頁面結構的HTML檔案和決定頁面外觀的CSS檔(階層樣式表)

本篇文章將說明什麼是CSS檔,它的發展歷史與演變情況,以及什麼地方會使用它。

CSS的歷史

CSS最早是在1997年被開發出來,網站開發人員用來定義他們所創建的網頁外觀。網頁創建者把網站程式碼結構與視覺設計分開處理,這在CSS出現之前是無法實現的設計方式。

網站結構和樣式風格的設計分離,使HTML能夠執行它基本的功能”內容標記”,而不必擔心頁面本身的設計和佈局會被改變。

 

CSS的演變

2000年左右,網路瀏覽器開始使用這種標記功能時,CSS便逐漸流行起來。如今所有的現代瀏覽器都支援所有的CSS Level 1,大部分的CSS Level 2,甚至是CSS Level 3。

隨著CSS的不斷發展及新樣式的引入,網路瀏覽器開始支援新CSS模組化,並把它導入到這些瀏覽器中,並為設計師提供強大的設計排版工具。

在過去的許多年裡,有些網頁設計者拒絕使用CSS來設計和開發網站,當然現在已經不存在這類的網頁設計師,CSS現在已經是網頁設計中被應用最廣泛的標準,在這個行業工作的人都對這種語言有至少基本的了解。

 

CSS是一個簡寫

如前面所說,CSS這個詞代表”階層樣式表(Cascading Style Sheets)“。讓我們把這個名詞分解一下,以更更全面的解釋CSS。

樣式表(Style Sheets)這個詞指的是CSS檔本身,它與HTML檔一樣,CSS檔實際上只是一個文字檔,可以用各種程式碼編輯器進行編輯。

樣式表被用在文件設計已經有很多年的時間,無論是印刷品或網站,它都是版面設計的技術規範。平片設計師長期以來一直使用樣式表來確保他們的設計完全按照他們設定的規格列印。

網頁樣式表也有同樣的作用,但它的附加功能是告訴網路瀏覽器如何渲染正在瀏覽的頁面。如今,CSS樣式表還用改變頁面在不同設備和螢幕尺寸下的外觀。這一點非常重要,能讓單一的HTML文件根據不同的螢幕尺寸呈現出不同的效果。

階層式(Cascading)是”階層樣式表“這個名詞真正的精隨所在,就像一條河流的瀑布,河流中的水衝擊著瀑布接觸到的所有岩石,但只有底部的岩石才會影響水的確切流向,而網站中的樣式表就如同此一般。

 

設計樣式表覆蓋瀏覽器預設樣式表

即使網頁設計師沒有設定仔入任何樣式,網頁也都會受到至少一個樣式表的影響,這個樣式表就是瀏覽器默認樣式(user agent stylesheet),如果沒有提供其他指令,網路瀏覽器就會用它來顯示頁面。

例如,預設情況下超連結的樣式默認是藍色,而且它們有底線。這些樣式來自網頁瀏覽器的預設樣式表。

但是,如果網頁設計者指定要用棕色或粗體,那麼瀏覽器就需要知道哪些指令具有優先權。所有的瀏覽器都有自己的預設樣式,但其中大多數瀏覽器都使用這種的預設樣式(如藍色底線的文字連結)。

再舉一個瀏覽器默認的例子,在我們常用的網路瀏覽器中,預設的字體是 “Times New Roman”,大小為16pt。然而,在我們訪問的網頁中,幾乎沒有一個是以這種字體和大小來顯示的。

這是因為設計師定義了樣式表,因此重新定義了字體與大小,代替網路瀏覽器的預設值。

你為網頁創建的任何樣式表都會比瀏覽器預設樣式更為具體,所以那些預設值只有在你的樣式表沒有覆蓋它們的情況下才會被使用。

如果你想讓連結變成藍色並有底線,你不需要做任何事情,因為那是默認的,但是如果你的網站的CSS檔說連結應該是綠色,那麼這個顏色將覆蓋默認的藍色。在這個例子中,底線將被保留,因為你沒有另外指定不要底線,因此他會自己默認加上去。

 

什麼地方會使用CSS?

CSS還可以用來定義網頁在其他程式中的瀏覽方式。例如,你可以創建一個列印樣式表,來定義網頁應該如何被列印,像是把選單和Logo去掉只保留文字部分。

雖然在大多數網站上這個功能並不常見,但創建列印樣式表確實是做得到的,但大多數網頁設計師會因為預算有限而跳過這個步驟。

 

為什麼CSS很重要?

CSS是一個網頁設計師必須學習的強大工具,有了它你就可以完整的控制網站的整體視覺外觀。寫得好的樣式表可以快速更新,並允許網站改變螢幕上的視覺優先順序,不需要對HTML標記做任何改變。

CSS的主要挑戰是由於瀏覽器每天都在變化,因此它需要即時被更新,今天好用的東西明天可能就過時了。

 

CSS的學習曲線是值得投資的

由於CSS可以層疊和組合,而且考慮到不同的瀏覽器對指令的解釋和實現方式不同,所以CSS比單純的HTML更難學。CSS會因瀏覽器不同而發生變化,而HTML確不會發生這樣的事情。

然而,一旦你開始使用CSS,你就會發現,利用樣式表將網頁佈局及定義外觀和感覺等方面,提供令人難以置信的靈活性。在這個過程中,可以積累起一個程式碼庫,用於儲存過去使用過的所有樣式和方法。