層疊樣式表(Cascading Style Sheets,CSS)出現之後,網頁設計走進了另一個階段。在CSS之前,網頁的外觀幾乎全靠HTML標籤處理,程式碼因此又亂又難維護。有了CSS,做網頁的效率和能做出的效果都大幅提升,網頁走向標準化、專業化,也是從這裡打下的基礎。
CSS的初衷與設計
CSS於1996年由W3C(萬維網聯盟)推出,目的是解決HTML把結構和外觀混在一起的問題。有了CSS,開發者可以把網頁的內容(HTML)和表現形式(樣式)分開,再透過外部樣式表統一控制整個網站的視覺風格。內容與樣式分家之後,程式碼清楚許多,網站的無障礙性和內容的重複利用也跟著改善。
CSS1到CSS2:功能的擴展
CSS最早的版本是CSS1,涵蓋基本的文字、顏色和背景樣式設定。接著推出的CSS2在CSS1的基礎上加了更多屬性和功能,像是定位、視覺格式化模型和新的選擇器。功能一多,CSS能用的地方也跟著變廣,開發者可以做出更複雜、互動性更高的網頁版面。
CSS的挑戰與克服
CSS帶來不少好處,但剛推出時也碰到好幾個難題,其中最讓人頭痛的是瀏覽器相容性。每家瀏覽器對CSS的支援程度不一,開發者想讓網頁在不同瀏覽器上看起來一致,常常得多花很多功夫。後來隨著瀏覽器陸續更新、CSS規範進一步標準化,這些問題才慢慢解決。
CSS3:豐富多彩的可能性
CSS3是CSS的又一次大躍進。它加入了許多新功能和模組,例如圓角、陰影、過渡、動畫和網格布局。設計師的表現手法因此多了很多,要做出有質感、帶動態效果的網頁也變得可行。CSS3的媒體查詢功能則替響應式網頁設計提供了有力的支援,讓網站能依不同尺寸的裝置和螢幕調整版面。
CSS在現代網頁設計中的角色
到了今天,CSS已經是做網頁的基本功。它決定網站好不好看、用起來順不順,也和HTML、JavaScript一起構成前端開發的三大基石。Web技術一直在往前走,CSS也持續演進,好應付越來越複雜、多樣的網頁設計需求。
從CSS1到CSS3,樣式與結構分離的觀念一路延續至今。企業規劃官網時,不妨把程式碼是否整潔、版面能否適應各種螢幕列入評估;參考網頁設計公司推薦名單之餘,也可以請高雄網頁設計公司說明他們如何處理跨瀏覽器與響應式的細節。