--- title: 初探 CSS slug: Learn/CSS/First_steps tags: - CSS - 入門 - 單元 - 學習 - 新手 - 新手教學 translation_of: Learn/CSS/First_steps ---
{{LearnSidebar}}

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

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

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

開始

先備知識

開始這個單元之前，您應該具備：

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

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

導覽

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

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

參見

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