iT邦幫忙

2025 iThome 鐵人賽

DAY 2
0
Modern Web

欸,貓咪你不能去那裡!CSS新手學習之路系列 第 2

【Day 02】閒聊CSS歷史・續 ~ CSS究竟是什麼?

  • 分享至 

  • xImage
  •  

前言

接續昨天歷史講古,我開始好奇裡面重複提到的名詞。
礙於中文翻譯各略有不同,我將採取Mdn或維基中文翻譯、或是書本上翻譯為準,當然一定會彼此常用翻譯有落差,所以容易混淆地方我會補上英文原文。

前面一直重複提到階層樣式表(Cascading Style Sheet)、樣式表語言(style sheet language),我非常好奇這些名詞有隱含什麼含義呢?

Cascading Style Sheet - 探索之路

你是誰?

Cascading Style Sheet又稱作層疊樣式表、階層式樣式表,肯定很多地方都說CSS是階層樣式表的簡稱,那階層樣式表最開始為何這樣命名呢?
(題外話:閱讀資料時有時候會陷入CSS是階層樣式表,樣式表也是階層樣式表的混亂(笑))

階層樣式表可以理解為也是一種樣式表語言,所以了解它以前要先知道什麼是樣式表語言(Style sheet language)

樣式表語言是什麼呢?
它名字中 樣式表(Style sheet) 是什麼樣的存在?在瀏覽器扮演什麼定位呢?

追朔-樣式表語言

樣式表語言(Style sheet language) 或有些地方會稱之樣式語言(styling language) 是一種表達結構化文件(structured documents,如:Html)呈現方式的電腦語言,它能讓你在HTML文件中的元素(element)上套用不同的頁面樣式(style,例如:字型、顏色、間距、版面佈局等)。

時間又再次切回到1990年代網際網路才剛發展時期,那時候Html作為方便科學家之間共享研究資料而被發明,主要功能是用於定義文檔的結構和基本格式,但缺乏對樣式和佈局(layout)的控制。

為了解決這個問題,樣式表就以各種形式出現了。

各式各樣的樣式表

為何說是各種形式?

就好像亂世裡會出現多個小國,那時期也是出現諸多不同的瀏覽器,例如:Netscape Navigator、Internet Explorer、Opera等。
不同的瀏覽器自然也開發各自的樣式表語言支援,好讓讀者(瀏覽網頁的使用者)可以使用這些樣式表語言來調整網頁的顯示方式。

在此背景下Håkon Wium Lie提出Cascading HTML style sheets,其中Cascade(層疊/階層)的意義是什麼?這對未來CSS有什麼影響發展?

Cascading HTML style sheets - CSS啟蒙宣言

The proposed scheme supplies the brower with an ordered list (cascade) of style sheets.
The user supplies the initial sheet which may request total control of the presentation,
but -- more likely -- hands most of the influence over to the style sheets referenced in the incoming document.

------(Cascading HTML style sheets, Håkon Wium Lie, 1994)

「所提出的機制會提供瀏覽器一個有順序的樣式表清單(階層),
使用者提供初始的樣式表,這份樣式表可能會要求完全控制頁面的呈現方式,但更常見的情況是,它會將大部分控制權交給文件中引用的樣式表。」

還記得昨天我提到兩派爭論,也就是作者還是讀者誰有更優先決定權?

Håkon參加WWW會議前他提出一個提案,依照我粗淺理解,這是一份對未來設計樣式表語言的指引或是建議。

節錄這一段說明「cascade(階層)」核心概念,
Håkon提出了順序會影響樣式的優先權與最終呈現結果。這邊提出作者與讀者(使用者)都享有部分控制/影響最終畫面,通常情況下是以文件預設的樣式表決定。此提案尚未決定誰(作者與讀者)擁有更高的優先權,因而出現兩派論點爭論。

cascade(階層)提供了樣式表優先順序概念,雖然此時只討論到兩位角色(作者及讀者),但以此概念延續更迭讓CSS發展出規範author、user、user agent三種角色的優先度,而後影響**「權重」與「聯集」**的功能出現。

參考資料:

書『CSS大全-第四版』
維基-Style sheet language
Style sheet (web development)
維基-CSS
Cascading HTML style sheets -- a proposal
Mdn-CSS基本


上一篇
【Day 01】前言~閒聊CSS歷史
下一篇
【Day 03】開始裝箱前~html & CSS簡易練習
系列文
欸,貓咪你不能去那裡!CSS新手學習之路3
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
L
iT邦新手 5 級 ‧ 2025-09-16 13:55:32

推推CSS歷史老師/images/emoticon/emoticon08.gif

我要留言

立即登入留言