初探 CSS

CSS(階層式樣式表)被用來設定網頁的樣式及佈局。舉例來說,改變字體、顏色、尺寸以及擺放您的內容、拆分為多欄,或是添加動畫效果和其它裝飾的特性。這個單元提供一個平緩的學習路徑,透過介紹 CSS 的工作原理、語法的樣式,以及如何在 HTML 中添加樣式設定。

想要成為網頁前端開發員?

我們整理了一門課程,包含了您實現目標所需要的所有基本知識。

開始

先備知識

開始這個單元之前,您應該具備:

  1. 基本熟悉電腦的操作,以及網路的使用(即:在網路查資料,看看內容)。
  2. 設定好一個基本的工作環境(參考安裝基本軟體單元),並知道如何建立以及管檔案(參考檔案的管理單元)。
  3. 對 HTML 有基本的認識,像是 HTML 介紹單元裡所提到的。 

注意:如果您使用的電腦/平板/或其它裝置上,無法建立您所需要的檔案。您可以在像是 JSBin 或 Glitch 的線上程式編輯平台上嘗試(絕大部分的)範例程式。

導覽

這個單元包含以下的主題,會帶你瀏覽所有 CSS 的基本理論,並提供您一些測試技巧的機會:

CSS 是什麼?
CSS (階層式樣式表)讓您能夠建立好看的網頁,但是它骨子是是怎麼運作的?這個主題用一個簡單的語法範例來解釋 CSS 是什麼,並涵蓋有關這個語言的一些關鍵術語。
CSS 入門
這個主題中,我們將把 CSS 套用到一個簡單的 HTML 文件上,逐步學習有關這個語言的一些實用知識。
CSS 的結構
現在您對 CSS 是什麼以及基本使用方法有了一些概念,是時候去更深入看看這個語言的結構了。我們在這裡討論了許多的觀念;如果之後您對任何概念感到模糊,可以到這裡來回顧。
CSS 的運作方式
我們已經學到了什麼是 CSS 以及如何寫一個簡單樣式表的基礎概念。我們會在這堂課裡看看瀏覽器是如何依據 CSS 和 HTML 的內容轉化為網頁的呈現。
使用您的新知識
透過你在前面堂課所學到的東西,你應該會發現您可以對簡單的文字內套用 CSS 設定,加入您想要的樣式。這個主題給您一個機會來做這件事。

參見

Intermediate Web Literacy 1: Intro to CSS
一個很好的 Mozilla 基礎課程,探討及測試許多 CSS 技巧。了解關於在網頁上設定 HTML 元素樣式、 CSS 選擇器、屬性、數值。