1 files changed, 59 insertions, 0 deletions
diff --git a/files/zh-tw/learn/css/first_steps/index.html b/files/zh-tw/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..ee9dc82a1d
--- /dev/null
+++ b/files/zh-tw/learn/css/first_steps/index.html
@@ -0,0 +1,59 @@
+---
+title: 初探 CSS
+slug: Learn/CSS/First_steps
+tags:
+  - CSS
+  - 入門
+  - 單元
+  - 學習
+  - 新手
+  - 新手教學
+translation_of: Learn/CSS/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">CSS（階層式樣式表）被用來設定網頁的樣式及佈局。舉例來說，改變字體、顏色、尺寸以及擺放您的內容、拆分為多欄，或是添加動畫效果和其它裝飾的特性。這個單元提供一個平緩的學習路徑，透過介紹 CSS 的工作原理、語法的樣式，以及如何在 HTML 中添加樣式設定。</p>
+
+<h3 class="summary" id="想要成為網頁前端開發員？">想要成為網頁前端開發員？</h3>
+
+<p class="summary">我們整理了一門課程，包含了您實現目標所需要的所有基本知識。</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">開始</a></p>
+
+<h2 id="先備知識">先備知識</h2>
+
+<p>開始這個單元之前，您應該具備：</p>
+
+<ol>
+ <li>基本熟悉電腦的操作，以及網路的使用（即：在網路查資料，看看內容）。</li>
+ <li>設定好一個基本的工作環境（參考<a href="/zh-TW/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a>單元），並知道如何建立以及管檔案（參考<a href="/zh-TW/docs/Learn/Getting_started_with_the_web/Dealing_with_files">檔案的管理</a>單元）。</li>
+ <li>對 HTML 有基本的認識，像是 <a href="/zh-tw/docs/Learn/HTML/Introduction_to_HTML">HTML 介紹</a>單元裡所提到的。 </li>
+</ol>
+
+<div class="note">
+<p><strong>注意：</strong>如果您使用的電腦／平板／或其它裝置上，無法建立您所需要的檔案。您可以在像是 <a href="http://jsbin.com/">JSBin</a> 或 <a href="https://glitch.com/">Glitch</a> 的線上程式編輯平台上嘗試（絕大部分的）範例程式。</p>
+</div>
+
+<h2 id="導覽">導覽</h2>
+
+<p>這個單元包含以下的主題，會帶你瀏覽所有 CSS 的基本理論，並提供您一些測試技巧的機會：</p>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/CSS/First_steps/What_is_CSS">CSS 是什麼？</a></dt>
+ <dd><strong>{{Glossary("CSS")}}</strong> （階層式樣式表）讓您能夠建立好看的網頁，但是它骨子是是怎麼運作的？這個主題用一個簡單的語法範例來解釋 CSS 是什麼，並涵蓋有關這個語言的一些關鍵術語。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></dt>
+ <dd>這個主題中，我們將把 CSS 套用到一個簡單的 HTML 文件上，逐步學習有關這個語言的一些實用知識。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 的結構</a></dt>
+ <dd>現在您對 CSS 是什麼以及基本使用方法有了一些概念，是時候去更深入看看這個語言的結構了。我們在這裡討論了許多的觀念；如果之後您對任何概念感到模糊，可以到這裡來回顧。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/First_steps/How_CSS_works">CSS 的運作方式</a></dt>
+ <dd>我們已經學到了什麼是 CSS 以及如何寫一個簡單樣式表的基礎概念。我們會在這堂課裡看看瀏覽器是如何依據 CSS 和 HTML 的內容轉化為網頁的呈現。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/First_steps/Using_your_new_knowledge">使用您的新知識</a></dt>
+ <dd>透過你在前面堂課所學到的東西，你應該會發現您可以對簡單的文字內套用 CSS 設定，加入您想要的樣式。這個主題給您一個機會來做這件事。</dd>
+</dl>
+
+<h2 id="參見">參見</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt>
+ <dd>一個很好的 Mozilla 基礎課程，探討及測試許多 CSS 技巧。了解關於在網頁上設定 HTML 元素樣式、 CSS 選擇器、屬性、數值。</dd>
+</dl>