語法教學

CSS 基礎課程

CSS 的功能 - CSS 能做什麼?誰該閱讀本課?如何閱讀?你該準備些什麼?

內容

CSS 能做什麼

既然 CSS 是為了把網頁內容和呈現層分開而產生的,那麼 CSS 主要的功能當然就是在做呈現方面的表現。凡舉文字的顏色、字型和大小 (感謝上帝,我們現在能任意指定字的尺寸,而不是只能使用 7 種大小的字,或是為了大尺寸的字製作圖片)、物件的對齊、表單元件的外觀、超連結的修改、元件定位等等,CSS 都可以滿足你的要求。

節省時間

你可以將樣式表儲存成為一個 CSS 檔案,並且在網頁的 head 標籤之中指定好,那麼你就能在網頁中使用此檔案。當然,如果你有 50 網頁,每個網頁有 100 個紅色的字串時,你只消在每個網頁中都設定好樣式表檔所存放的路徑,並且在每個需要顯示顏色的字串上加入套用樣式表的語法,那麼以後當你想變更字串顏色時,原本要做 5000 次編輯動作,但現在你只需要修改 CSS 檔案中的樣式就行了,省下大量修改的時間。這對於目前網頁數量日益增加的網站來說,是相當方便的工具。

彈性與串接樣式

在 HTML 中宣告樣式有三種方法,並且不同方法之間可以交互使用,甚至把不同來源檔案的樣式表串接在一起。因此,你可以在各個地方照著需求來設定樣式。例如說在外部檔案中定義 h1 的字體大小為 20 像素,並在某幾個網頁內部定義 h1 的顏色為紅色,最後在特殊的少數 h1 標籤加上底線。這些樣式雖然定義在不同地方,但是它們之間可以串接起來,針對同一個標籤在不同情況下來做更改。這也提供了更大的彈性,使得我們能夠更輕易地控制網頁元素該如何呈現。

更換樣式

在某些情況之下,你或許也想提供不同的呈現風貌來讓你的讀者做選擇。例如為女性讀者提供偏向粉色系的介面,或是為視力不佳的網友提供較大字型的內容。這在較早的時期我們必須花費很多的時間和金錢去建立其他介面的網頁,並且在後期的維護管理上也較多心力。CSS 對這個問題提供了很好的解決方法。由於 CSS 擅長的部份正是網頁呈現,因此我們可以使用 CSS 來設計不同介面的樣式。只要在網頁中宣告好有那些介面可供切換,那麼當使用者用支援切換樣式表的瀏覽軟體時,就可以根據各人的喜好來觀看網頁。

媒體相關

CSS 的呈現效果可以使用在不同的媒體上,像是印表機或是特殊的語言瀏覽器,並且樣式也同樣適用在其上。另外 CSS 也為一些媒體額外提供語法以加強其功能。

站內連結