語法教學

CSS 基礎課程

CSS 簡介 - 什麼是 CSS?

內容

什麼是 CSS?

CSS 的全名是 Cascading Style Sheets,中文通常翻成「串接樣式表」。樣式 (style) 的另一個解釋是風格的意思,在此處我們可以把它想成是網頁中元素的風格;也就是說,樣式決定了網頁元素該如何呈現。如果我們在 A 網頁和 B 網頁中對同一個網頁元素定義了不同的樣式,那麼在瀏覽器中觀看這兩頁時,我們就會看到不一樣呈現風格的網頁元素。而把許許多多的樣式集合在一起儲存時,就是所謂的樣式表 (style sheet)。

為什麼要有 CSS?

在早期網頁只是為了單純地顯示文件而設計的,所以其實網頁元素並沒有很多。1995 年的 RFC 1866 ( HTML 2.0 ) 只要看過一遍,你就可以寫出一個格式整齊的論文報告了。而當時的網頁標籤大多是屬於文字部份,像是 h1 到 h6(標題)、p(段落)、pre(格式文字)、address(地址)、blockquote(引用)、ol ul dir menu dl(清單定義) 和 b i cite code em strong samp var tt(文字格式) 等。由此可知網頁一開始設計重點就是放在文章的內容和格式。

但是網際網路的發展快速,有愈來愈多的人上網,也引起了不少公司和組織想在網路上宣傳。此時易學易用的 HTML 加上介面簡單的瀏覽器,使得 WWW 一夕之間成了當紅炸子雞,大家趨之若鶩。但是這也使得原本單純為文章而設計的 HTML 不敷使用,它甚至連表格元素都沒有。所以 Netscape 和 IE 瀏覽器便開始自行加入一些網頁標籤來加強網頁文字的呈現,像是 font、IE 的跑馬燈、Netscape 的 blink 等等,以及一些顏色相關的屬性。這也讓 1997 年的 HTML 3.2 比之前的版本要多出了許多的標籤和屬性,原本簡單的 HTML 突然之間複雜了起來,「所見即所得」式的網頁編輯器就是因應此種變化而發展出來的。這樣文章內容與呈現的標籤混雜在一起,造成了不少編寫網頁上的困難。例如說你今天在網頁中設定了 100 次 font color(字型顏色) 為紅色的字串,而類似這樣的網頁總共有 50 頁。今天要是你想把紅色改成藍色,那麼修改的動作你就得做 100 * 50 = 5000 次,而且你還得找出在每一個網頁中每一次它所使用的地方。有可能你可以使用編輯器來直接搜尋取代,但要是今天你得不停地修改顏色來找出最佳的呈現效果,或是你所維護的是每天至少 300 則新聞(也就是說每天有 300 篇以上新網頁)的網站時,那麼事情或許就沒有那麼容易了。

有鑑於內容層與呈現層混雜不堪的情形,W3C 組織在 1998 年訂定 HTML 4.0 標準時,便將樣式的概念引入了 HTML,以簡化網頁設計的複雜度,讓文章的內容和格式交給 HTML,而讓文章的外觀呈現交給 CSS。也因此你可以注意到,在 HTML 4.0 之中有許多標籤和屬性已經 Deprecated (棄置),像是 font、basefont、s、u、strike、center 標籤,以及 align、bgcolor、img 的 clear、size、width (某些標籤)、body 的 text link vlink alink 屬性,而用 CSS 來取代它們原有的功能。因此若想要進入網頁設計的領域,CSS 將會是你不可或缺的工具。

站內連結