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 選擇器、屬性、數值。