initial commit

7 files changed, 794 insertions, 0 deletions

diff --git a/files/zh-tw/learn/css/css_layout/index.html b/files/zh-tw/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..385121536f
--- /dev/null
+++ b/files/zh-tw/learn/css/css_layout/index.html
@@ -0,0 +1,71 @@
+---
+title: CSS 排版
+slug: Learn/CSS/CSS_layout
+tags:
+  - CSS
+  - 佈局
+  - 多欄
+  - 彈性盒子
+  - 排版
+  - 新手
+  - 浮動
+  - 網格
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{draft}}</div>
+
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">基於我們已經看過了 CSS 基本原理：如何將文字賦予樣式、如何該便樣式或操作你的文字內容所處的 box 模型。現在是時候看看如何將你的 box 模型在視圖中放置於相對應的正確位置。我們已經涵蓋了必要的先備知識，接下來我們可以深入CSS 排版，看一些不同的顯示方式，如現代的排版方式——彈性盒子、CSS 網格及定位，當然還有一些舊式的技術你可能會想要理解。</p>
+
+<h2 id="先備知識">先備知識</h2>
+
+<p>開始這個單元之前，需要做如下準備：</p>
+
+<ol>
+ <li>對 HTML 有基本的認知，如  <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 簡介</a> 單元中所述。</li>
+ <li>熟悉 CSS 基本原理，如 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 簡介</a>中所述。</li>
+ <li>了解如何 <a href="/en-US/docs/Learn/CSS/Styling_boxes">樣式框</a>。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: 如果你正在使用的電腦/平板/其他設備讓你無法建立自己的文件，你可以透過線上工具如 <a href="http://jsbin.com/">JSBin</a> 或 <a href="https://thimble.mozilla.org/">Thimble</a> 編輯並嘗試（大部分的）範例程式碼。</p>
+</div>
+
+<h2 id="指導">指導</h2>
+
+<p>這些文章旨在提供關於 CSS 中可用的技術以及基本排版工具和技術的指導。在課程的結尾有一個評估測驗——配置一個網頁的版面，這可以幫助你了解你對 CSS 排版方式的理解程度。</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">CSS 排版介紹</a></dt>
+ <dd>這篇文章將回顧一些之前單元中提過的 CSS 排版特性，像是不同的{{cssxref("display")}} 參數，藉由這個單元我們將介紹一些基本概念。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">常規流</a></dt>
+ <dd>在我們做任何事之前，網頁上的元素會根據常規流自行排列。這篇文章解釋常規流的基礎知識，用來學習如何改變它。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">彈性盒子</a></dt>
+ <dd><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">彈性盒子</a>是一維空間的排版方式，用來讓項目以行或列的方式排列。項目會延展或限縮來符合較大或較小的空間。這篇文章會解釋基礎原理。</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">網格</a></dt>
+ <dd>CSS 網格排版是一個二維空間的網頁排版系統。它讓你將內容排入行與列中，且它有許多功能讓你在建立複雜的排版時變得簡單明瞭。這篇文章會告訴你全部。</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮動</a></dt>
+ <dd>最初是為了在文字區塊中浮動排列圖片，而後為了在網頁中建造多攔排版{{cssxref("float")}} 屬性成為了最常用的工具之一。這篇文章會解釋如何使用。</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">定位</a></dt>
+ <dd>定位准許將元素從正常的文檔流中脫離出來，讓他們表現不同，例如設置在另一個模塊的上方，或使模塊在瀏覽器視窗內部始終停留在相同的地方。這篇文章將解釋不同的{{cssxref("position")}} 值和如何使用它們。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多欄排版</a></dt>
+ <dd>多欄排版規格提供你將內容排進欄位的排版方式，像你可能在報紙上看到的那樣。這篇文章會解釋如何使用這個功能。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">舊式排版方式</a></dt>
+ <dd>網格系統是另一個在 CSS 排版中非常常用的特性，在網格排版出現之前，它通常使用浮動或其他佈局來實現。想像你的佈局為一組列數（如 4, 6, 或 12），然後將你的內容放置在這些虛構的列中。在這篇文章中我們將隨著創建網格系統、看看使用網格框架提供現成的網格框架和體驗 CSS 網格來結束-一個新興的瀏覽器特性使得在 Web 實現網格設計變得大為容易等來探索這些基本的想法。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支援舊版瀏覽器</a></dt>
+ <dd>
+ <p>在這個單元，我們建議你使用彈性盒子和網格作為主要的設計方式。但是有些造訪你網站的人會使用舊版瀏覽器，或者他使用的瀏覽器不支援你的設計方式。以下情形在網路上一定會發生——當新功能開發出來了，不同的瀏覽器會有不同的支援優先級。這篇文章會解釋如何使用現代網頁技術且不遺漏舊技術的使用者。</p>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎排版理解測驗</a></dt>
+ <dd>配置網頁版面，這是一個測試你對於不同排版方式理解程度的測驗。</dd>
+</dl>
+
+<h2 id="參見">參見 </h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">實際的定位排版範例</a></dt>
+ <dd>這篇文章會告訴你如何建立一些真實的範例來說明什麼樣的情況你可以使用定位排版。</dd>
+</dl>
+
+<p> </p>
diff --git a/files/zh-tw/learn/css/first_steps/getting_started/index.html b/files/zh-tw/learn/css/first_steps/getting_started/index.html
new file mode 100644
index 0000000000..aed101592c
--- /dev/null
+++ b/files/zh-tw/learn/css/first_steps/getting_started/index.html
@@ -0,0 +1,265 @@
+---
+title: CSS 入門
+slug: Learn/CSS/First_steps/Getting_started
+tags:
+  - CSS
+  - 元素
+  - 初學者
+  - 學習
+  - 狀態
+  - 範例
+  - 語法
+  - 課程
+  - 選擇器
+translation_of: Learn/CSS/First_steps/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">在這個主題中，我們將 CSS 套用到一個簡單的 HTML 文件上，在過程中學習這個語言一些實際的東西。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">先備知識：</th>
+   <td>基本的電腦概念、能夠<a href="https://developer.mozilla.org/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a>，基本<a href="https://developer.mozilla.org/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各種檔案打交道</a>的能力，以及 HTML 的基礎（由<a href="https://wiki.developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>學到）。</td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標：</th>
+   <td>了解將 CSS 文件與 HTML 檔案連接的基本知識，並且能夠使用 CSS 對文字作簡單的格式變化。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="由某個_HTML_開始">由某個 HTML 開始</h2>
+
+<p>我們的起點是一個 HTML 文件。如果您想要在自己的電腦上操作，可以把下面的程式碼複製下來。在您電腦上的目錄中，用 <code>index.html</code> 為檔名儲存</p>
+
+<p>。</p>
+
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Getting started with CSS&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+    &lt;h1&gt;I am a level one heading&lt;/h1&gt;
+
+    &lt;p&gt;This is a paragraph of text. In the text is a &lt;span&gt;span element&lt;/span&gt;
+and also a &lt;a href="http://example.com"&gt;link&lt;/a&gt;.&lt;/p&gt;
+
+    &lt;p&gt;This is the second paragraph. It contains an &lt;em&gt;emphasized&lt;/em&gt; element.&lt;/p&gt;
+
+    &lt;ul&gt;
+        &lt;li&gt;Item one&lt;/li&gt;
+        &lt;li&gt;Item two&lt;/li&gt;
+        &lt;li&gt;Item &lt;em&gt;three&lt;/em&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+
+&lt;/body&gt;
+
+&lt;/html&gt;</pre>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong>如果您用來閱讀這篇文章的環境沒辦法簡單地建立檔案，也別擔心。底下會提供線上程式編輯器讓你就在這個頁面中撰寫範例程式。</p>
+</div>
+
+<h2 id="為我們的文件加入CSS">為我們的文件加入CSS</h2>
+
+<p>首先，告訴HTML文件我們有些CSS規則要加入是第一個步驟。你可能會碰到三種不同的方式可以將CSS檔案應用進HTML文件之中，不過我們現在先將焦點放在最常見且最實用的方式：將CSS從文件的前頭連接進去。</p>
+
+<p>先建立一個檔案，將它存在與你HTML文件同一個目錄之中並命名為<code>styles.css</code> 。<code>.css</code> 外掛會辨識它為一個CSS檔案。</p>
+
+<p>To link <code>styles.css</code> to <code>index.html</code> add the following line somewhere inside the {{htmlelement("head")}} of the HTML document:</p>
+
+<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>
+
+<p>This {{htmlelement("link")}} element tells the browser that we have a stylesheet, using the <code>rel</code> attribute, and the location of that stylesheet as the value of the <code>href</code> attribute. You can test that the CSS works by adding a rule to <code>styles.css</code>. Using your code editor add the following to your CSS file:</p>
+
+<pre class="brush: css notranslate">h1 {
+  color: red;
+}</pre>
+
+<p>Save your HTML and CSS files and reload the page in a web browser. The level one heading at the top of the document should now be red. If that happens, congratulations — you have successfully applied some CSS to an HTML document. If that doesn't happen, carefully check that you've typed everything correctly.</p>
+
+<p>You can continue to work in <code>styles.css</code> locally, or you can use our interactive editor below to continue with this tutorial. The interactive editor acts as if the CSS in the first panel is linked to the HTML document, just as we have with our document above.</p>
+
+<h2 id="Styling_HTML_elements">Styling HTML elements</h2>
+
+<p>By making our heading red we have already demonstrated that we can target and style an HTML element. We do this by targeting an <em>element selector</em> — this is a selector that directly matches an HTML element name. To target all paragraphs in the document you would use the selector <code>p</code>. To turn all paragraphs green you would use:</p>
+
+<pre class="brush: css notranslate">p {
+  color: green;
+}</pre>
+
+<p>You can target multiple selectors at once, by separating the selectors with a comma. If I want all paragraphs and all list items to be green my rule looks like this:</p>
+
+<pre class="brush: css notranslate">p, li {
+    color: green;
+}</pre>
+
+<p>Try this out in the interactive editor below (edit the code boxes), or in your local CSS document.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p>
+
+<h2 id="Changing_the_default_behavior_of_elements">Changing the default behavior of elements</h2>
+
+<p>When we look at a well-marked up HTML document, even something as simple as our example, we can see how the browser is making the HTML readable by adding some default styling. Headings are large and bold and our list has bullets. This happens because browsers have internal stylesheets containing default styles, which they apply to all pages by default; without them all of the text would run together in a clump and we would have to style everything from scratch. All modern browsers display HTML content by default in pretty much the same way.</p>
+
+<p>However, you will often want something other than the choice the browser has made. This can be done by simply choosing the HTML element that you want to change, and using a CSS rule to change the way it looks.  A good example is our <code>&lt;ul&gt;</code>, an unordered list. It has list bullets, and if I decide I don't want those bullets I can remove them like so:</p>
+
+<pre class="brush: css notranslate">li {
+  list-style-type: none;
+}</pre>
+
+<p>Try adding this to your CSS now.</p>
+
+<p>The <code>list-style-type</code> property is a good property to look at on MDN to see which values are supported. Take a look at the page for <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> and you will find an interactive example at the top of the page to try some different values in, then all allowable values are detailed further down the page.</p>
+
+<p>Looking at that page you will discover that in addition to removing the list bullets you can change them — try changing them to square bullets by using a value of <code>square</code>.</p>
+
+<h2 id="Adding_a_class">Adding a class</h2>
+
+<p>So far we have styled elements based on their HTML element names. This works as long as you want all of the elements of that type in your document to look the same. Most of the time that isn't the case and so you will need to find a way to select a subset of the elements without changing the others. The most common way to do this is to add a class to your HTML element and target that class.</p>
+
+<p>In your HTML document, add a <a href="/en-US/docs/Web/HTML/Global_attributes/class">class attribute</a> to the second list item. Your list will now look like this:</p>
+
+<pre class="brush: html; highlight[3] notranslate">&lt;ul&gt;
+  &lt;li&gt;Item one&lt;/li&gt;
+  &lt;li class="special"&gt;Item two&lt;/li&gt;
+  &lt;li&gt;Item &lt;em&gt;three&lt;/em&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>In your CSS you can target the class of <code>special</code> by creating a selector that starts with a full stop character. Add the following to your CSS file:</p>
+
+<pre class="brush: css notranslate">.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>Save and refresh to see what the result is.</p>
+
+<p>You can apply the class of <code>special</code> to any element on your page that you want to have the same look as this list item. For example, you might want the <code>&lt;span&gt;</code> in the paragraph to also be orange and bold. Try adding a <code>class</code> of <code>special</code> to it, then reload your page and see what happens.</p>
+
+<p>Sometimes you will see rules with a selector that lists the HTML element selector along with the class:</p>
+
+<pre class="brush: css notranslate">li.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>This syntax means "target any <code>li</code> element that has a class of special". If you were to do this then you would no longer be able to apply the class to a <code>&lt;span&gt;</code> or another element by simply adding the class to it; you would have to add that element to the list of selectors:</p>
+
+<pre class="brush: css notranslate">li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>As you can imagine, some classes might be applied to many elements and you don't want to have to keep editing your CSS every time something new needs to take on that style. Therefore it is sometimes best to bypass the element and simply refer to the class, unless you know that you want to create some special rules for one element alone, and perhaps want to make sure they are not applied to other things.</p>
+
+<h2 id="Styling_things_based_on_their_location_in_a_document">Styling things based on their location in a document</h2>
+
+<p>There are times when you will want something to look different based on where it is in the document. There are a number of selectors that can help you here, but for now we will look at just a couple. In our document are two <code>&lt;em&gt;</code> elements — one inside a paragraph and the other inside a list item. To select only an <code>&lt;em&gt;</code> that is nested inside an <code>&lt;li&gt;</code> element I can use a selector called the <strong>descendant combinator</strong>, which simply takes the form of a space between two other selectors.</p>
+
+<p>Add the following rule to your stylesheet.</p>
+
+<pre class="brush: css notranslate">li em {
+  color: rebeccapurple;
+}</pre>
+
+<p>This selector will select any <code>&lt;em&gt;</code> element that is inside (a descendant of) an <code>&lt;li&gt;</code>. So in your example document, you should find that the <code>&lt;em&gt;</code> in the third list item is now purple, but the one inside the paragraph is unchanged.</p>
+
+<p>Something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in the HTML. To do so place a <code>+</code>  (an <strong>adjacent sibling combinator</strong>) between the selectors.</p>
+
+<p>Try adding this rule to your stylesheet as well:</p>
+
+<pre class="brush: css notranslate">h1 + p {
+  font-size: 200%;
+}</pre>
+
+<p>The live example below includes the two rules above. Try adding a rule to make a span red, if it is inside a paragraph. You will know if you have it right as the span in the first paragraph will be red, but the one in the first list item will not change color.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: As you can see, CSS gives us several ways to target elements, and we've only scratched the surface so far! We will be taking a proper look at all of these selectors and many more in our <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectors</a> articles later on in the course.</p>
+</div>
+
+<h2 id="Styling_things_based_on_state">Styling things based on state</h2>
+
+<p>The final type of styling we shall take a look at in this tutorial is the ability to style things based on their state. A straightforward example of this is when styling links. When we style a link we need to target the <code><a href="/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> (anchor) element. This has different states depending on whether it is unvisited, visited, being hovered over, focused via the keyboard, or in the process of being clicked (activated). You can use CSS to target these different states — the CSS below styles unvisited links pink and visited links green.</p>
+
+<pre class="brush: css notranslate">a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}</pre>
+
+<p>You can change the way the link looks when the user hovers over it, for example removing the underline, which is achieved by in the next rule:</p>
+
+<pre class="brush: css notranslate">a:hover {
+  text-decoration: none;
+}</pre>
+
+<p>In the live example below, you can play with different values for the various states of a link. I have added the rules above to it, and now realise that the pink color is quite light and hard to read — why not change that to a better color? Can you make the links bold?</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>
+
+<p>We have removed the underline on our link on hover. You could remove the underline from all states of a link. It is worth remembering however that in a real site, you want to ensure that visitors know that a link is a link. Leaving the underline in place, can be an important clue for people to realize that some text inside a paragraph can be clicked on — this is the behavior they are used to. As with everything in CSS, there is the potential to make the document less accessible with your changes — we will aim to highlight potential pitfalls in appropriate places.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: you will often see mention of <a href="/en-US/docs/Learn/Accessibility">accessibility</a> in these lessons and across MDN. When we talk about accessibility we are referring to the requirement for our webpages to be understandable and usable by everyone.</p>
+
+<p>Your visitor may well be on a computer with a mouse or trackpad, or a phone with a touchscreen. Or they might be using a screenreader, which reads out the content of the document, or they may need to use much larger text, or be navigating the site using the keyboard only.</p>
+
+<p>A plain HTML document is generally accessible to everyone — as you start to style that document it is important that you don't make it less accessible.</p>
+</div>
+
+<h2 id="Combining_selectors_and_combinators">Combining selectors and combinators</h2>
+
+<p>It is worth noting that you can combine multiple selectors and combinators together. For example:</p>
+
+<pre class="brush: css notranslate">/* selects any &lt;span&gt; that is inside a &lt;p&gt;, which is inside an &lt;article&gt;  */
+article p span { ... }
+
+/* selects any &lt;p&gt; that comes directly after a &lt;ul&gt;, which comes directly after an &lt;h1&gt;  */
+h1 + ul + p { ... }</pre>
+
+<p>You can combine multiple types together, too. Try adding the following into your code:</p>
+
+<pre class="brush: css notranslate">body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}</pre>
+
+<p>This will style any element with a class of <code>special</code>, which is inside a <code>&lt;p&gt;</code>, which comes just after an <code>&lt;h1&gt;</code>, which is inside a <code>&lt;body&gt;</code>. Phew!</p>
+
+<p>In the original HTML we provided, the only element styled is <code>&lt;span class="special"&gt;</code>.</p>
+
+<p>Don't worry if this seems complicated at the moment — you'll soon start to get the hang of it as you write more CSS.</p>
+
+<h2 id="Wrapping_up">Wrapping up</h2>
+
+<p>In this tutorial, we have taken a look at a number of ways in which you can style a document using CSS. We will be developing this knowledge as we move through the rest of the lessons. However you now already know enough to style text, apply CSS based on different ways of targeting elements in the document, and look up properties and values in the MDN documentation.</p>
+
+<p>In the next lesson we will be taking a look at how CSS is structured.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></li>
+</ol>
diff --git a/files/zh-tw/learn/css/first_steps/how_css_works/index.html b/files/zh-tw/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..eebac03f5c
--- /dev/null
+++ b/files/zh-tw/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,156 @@
+---
+title: How CSS works
+slug: Learn/CSS/First_steps/How_CSS_works
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{LearnSidebar}}<br>
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<p class="summary">我們已經學會基本 CSS 的用途與用法了，這堂課我們就來看看瀏覽器是如何將 CSS 和 HTML 變化成網頁的吧。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">需求：</th>
+   <td>基本電腦操作、<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">已安裝基本的軟體</a>、 <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">檔案處理的基本知識</a>、HTML 基礎 (請參閱 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>)。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標：</th>
+   <td>了解瀏覽器如何解析 CSS 和 HTML ，以及當瀏覽器遇到不認識的 CSS 時會發生什麼事。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSS_實際上是怎麼運作的？">CSS 實際上是怎麼運作的？</h2>
+
+<p>每當瀏覽器要顯示一份文件時，它得先為文件內容穿上樣式，這會歷經許多程序，我們已經列在下方了。記得喔，這只是非常簡化的版本，不同的瀏覽器會有自己的做法，不過原則上就是這樣。</p>
+
+<ol>
+ <li>瀏覽器載入 HTML (比如從網路上接收(receive))。</li>
+ <li>它將 {{Glossary("HTML")}} 轉換成 {{Glossary("DOM")}} (Document Object Model，文件物件模型)，這東西是文件在電腦記憶體中的表示形式，詳情我們下個小節再說。</li>
+ <li>瀏覽器蒐集所有 HTML 文件連到的資源，像是嵌入網頁的圖片和影片等等，當然，裡面也包含 CSS！JavaScript 也是其中的一種資源，在此步驟的稍後就會處理，但我們先不要把事情弄得這麼複雜，這邊暫且不講。</li>
+ <li>瀏覽器解析 (parse) CSS，先按照選擇器的類型(如元素、類別、ID 等等)，將規則放入相對應的「桶子(buckets)」裡。接著再依找到的選擇器，推算哪些規則應該要套用在哪些 DOM 節點上，並將樣式附著上去，最後產生的東西叫做轉譯樹(render tree)。</li>
+ <li>當規則都套用完畢後，開始按照網頁結構布局(layout)轉譯樹。</li>
+ <li>網頁被呈現在螢幕上，這個步驟稱為繪製(painting)。</li>
+</ol>
+
+<p>下面是此流程的示意圖。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p>
+
+<h2 id="關於_DOM">關於 DOM</h2>
+
+<p>DOM 有著一個樹狀結構，每個標記語言中的元素、屬性，以及文字片段都會是這個樹狀結構裡的{{Glossary("Node/DOM","節點")}}。每個節點與其他節點間的關係都有定義：若節點有子節點(child)，則自己是他們的父節點(parent)；若子節點為複數，則這些子節點稱彼此為兄弟/姊妹節點(sibling)。</p>
+
+<p>了解 DOM 對於設計、除錯以及維護 CSS 有相當大的助益，因為 DOM 正是 CSS 與文件內容的交會之處。當你要利用瀏覽器的開發者工具(DevTools)來查看元素套用的規則時，你就會見到它們。</p>
+
+<h2 id="一個活生生的_DOM_例子">一個活生生的 DOM 例子</h2>
+
+<p>我們就別絮絮叨叨了，直接看個簡單的例子，來瞭解 HTML 片段是如何轉換成 DOM 的吧。</p>
+
+<p>以下列 HTML 原始碼為例：</p>
+
+<pre class="brush: html">&lt;p&gt;
+  Let's use:
+  &lt;span&gt;Cascading&lt;/span&gt;
+  &lt;span&gt;Style&lt;/span&gt;
+  &lt;span&gt;Sheets&lt;/span&gt;
+&lt;/p&gt;
+</pre>
+
+<p>在 DOM 中，<code>&lt;p&gt;</code> 元素對應到的節點是一個父節點，它的子節點有一個純文字節點以及三個 <code>&lt;span&gt;</code> 元素節點，而 <code>SPAN</code> 節點也是有著純文字子節點的父節點：</p>
+
+<pre>P
+├─ "Let's use:"
+├─ SPAN
+|  └─ "Cascading"
+├─ SPAN
+|  └─ "Style"
+└─ SPAN
+   └─ "Sheets"
+</pre>
+
+<p>這就是瀏覽器如何解析上段的 HTML 片段的 — 它轉譯了以上的 DOM 樹，並產生了以下的輸出：</p>
+
+<p>{{EmbedLiveSample('一個活生生的_DOM_例子', '100%', 55)}}</p>
+
+<div class="hidden">
+<pre class="brush: css">p {margin:0;}</pre>
+</div>
+
+<h2 id="將_CSS_套用至_DOM">將 CSS 套用至 DOM</h2>
+
+<p>讓我們在上例中加入一些 CSS 來增添樣式。同樣地，HTML 如下：</p>
+
+<pre class="brush: html">&lt;p&gt;
+  Let's use:
+  &lt;span&gt;Cascading&lt;/span&gt;
+  &lt;span&gt;Style&lt;/span&gt;
+  &lt;span&gt;Sheets&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<p>假設我們把以下 CSS 套用上去：</p>
+
+<pre class="brush: css">span {
+  border: 1px solid black;
+  background-color: lime;
+}</pre>
+
+<p>瀏覽器會先解析 HTML 並產生 DOM 樹，然後再解析 CSS。因為這個 CSS 中只有使用 <code>span</code> 選擇器，所以瀏覽器可以很快地完成分類！接著它會將這個規則套用到每一個 <code>&lt;span&gt;</code> 上，並在螢幕上繪製出最終的畫面。</p>
+
+<p>現在輸出變成這樣：</p>
+
+<p>{{EmbedLiveSample('將_CSS_套用至_DOM', '100%', 55)}}</p>
+
+<p>在下個主題裡的<a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">為 CSS 除錯</a>中我們將會使用瀏覽器的 DevTools 來為 CSS 除錯，屆時我們將會學到更多瀏覽器解析 CSS 的方法。</p>
+
+<h2 id="瀏覽器遇到不認識的_CSS_時會發生什麼事？">瀏覽器遇到不認識的 CSS 時會發生什麼事？</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">在先前的課程中</a>，我們曾提過瀏覽器並不會一次實作全部的新 CSS。此外，很多人都不是使用最新版的瀏覽器。要知道 CSS 是與時俱進的，會超出瀏覽器可辨認的範圍是很正常的事，所以啦，你可能會很好奇，當瀏覽器遇到它看不懂的 CSS 選擇器或宣告時會發生什麼事呢？</p>
+
+<p>答案就是裝作沒看到，繼續往下解析其它的CSS！</p>
+
+<p>如果瀏覽器在解析規則時，遇到它不認識的屬性或值，它會忽略它，並繼續解析下一個宣告。因此當它這麼做的時候，如果不是你拼錯字了，那就是那個屬性或值太新奇了，所以你的瀏覽器還沒有支援它。</p>
+
+<p>同樣地，如果瀏覽器遇到一個它不認識的選擇器時，它會忽略整條規則，並繼續解析其他規則。</p>
+
+<p>下面的例子使用英式英語來拼寫 color (也就是 colour)，進而導致該屬性失效，因為現在瀏覽器看不懂它了。也因此下面的段落無法以藍字顯示，不過其他的 CSS 還是成功地套用上去了，只有無效的會被忽略掉。</p>
+
+<div id="Skipping_example">
+<pre class="brush: html">&lt;p&gt; I want this text to be large, bold and blue.&lt;/p&gt;</pre>
+
+<pre class="brush: css">p {
+  font-weight: bold;
+  colour: blue; /* incorrect spelling of the color property */
+  font-size: 200%;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p>
+
+<p>這樣做有個很大的好處，就是你可以放心地利用新 CSS 做出很炫炮的效果，而不用擔心瀏覽器不支援時會出錯 — 反正差別只在於那個新特性有或沒有而已。再加上 CSS 層疊 (cascade) 的天性，只要你提供兩條具有相同具體程度(specificity)的規則，就能讓不支援的瀏覽器套用另一條規則。</p>
+
+<p>這在想要使用某個剛推出的值，但它還未普及時非常有用。舉個例子，一些老舊的瀏覽器不支援以 <code>calc()</code> 來當作值，所以當我想要用它來決定寬的時候，可能會先寫一個備用的寬(以像素為單位的值)，然後再寫一個值為 <code>calc</code><code>(100% - 50px)</code> 的寬。這樣一來，老舊的瀏覽器會使用像素版本 ，並忽略 <code>calc()</code> 版本，因為它們看不懂這個；而新的瀏覽器則會先解析像素版本，然後再將 <code>calc()</code> 版本覆寫上去，因為它比較晚出現。</p>
+
+<pre class="brush: css">.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}</pre>
+
+<p>我們在之後的課程中還會學到更多支援不同瀏覽器的方法。</p>
+
+<h2 id="最後">最後</h2>
+
+<p>你已經快完成這個主題了，但是還差臨門一腳，在下篇文章裡，你將會<a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">利用你學到的新知識</a>來重新美化一個範例，並在過程中重溫你所學到的 CSS 技巧。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="在這個主題中">在這個主題中</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 是什麼？</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 是如何組織的</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 是如何運作的</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">利用你學到的新知識</a></li>
+</ol>
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>
diff --git a/files/zh-tw/learn/css/first_steps/what_is_css/index.html b/files/zh-tw/learn/css/first_steps/what_is_css/index.html
new file mode 100644
index 0000000000..3eb04bcbe1
--- /dev/null
+++ b/files/zh-tw/learn/css/first_steps/what_is_css/index.html
@@ -0,0 +1,131 @@
+---
+title: CSS 是什麼？
+slug: Learn/CSS/First_steps/What_is_CSS
+tags:
+  - CSS
+  - CSS 入門
+  - 初學者
+  - 單元
+  - 學習
+  - 技術指引
+  - 語法
+translation_of: Learn/CSS/First_steps/What_is_CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary"><strong>{{Glossary("CSS")}}</strong> （階層式樣式表）可以讓您建立出好看的網頁，但是它背後是怎麼運作的？在這個主題裡，藉由簡單的語法範例來說明 CSS 是什麼，以及含蓋這個語言的一些關鍵項目。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">先備知識：</th>
+   <td>基本的電腦概念、能夠<a href="https://developer.mozilla.org/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a>，基本<a href="https://developer.mozilla.org/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各種檔案打交道</a>的能力，以及 HTML 的基礎（由<a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>學到）。</td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標：</th>
+   <td>學到 CSS 是什麼。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>在 <a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>單元中，我們含蓋了什麼是 HTML 以及它是如何被用來標記文件。這些文件能夠被瀏覽器讀取，標題的文字會看起來比一般段落更大，段落之間會換行並帶有間隔。連結會帶有顏色及底線，讓它與其它一般的文字有區別。您所看到的這些是瀏覽器的預設樣式，用來確保當作者沒有指定任何樣式的狀況下，仍有一些非常基本的樣式被套用上，好讓內容基本上能夠被閱讀（如下圖所示）。</p>
+
+<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
+
+<p>然而，如果所有的網站都長這個樣子，網路世界將是個很無趣的地方。您能使用 CSS 對 HTML 元件的樣子作更多控制，將這些標記以任何您喜歡的設計作調整。</p>
+
+<p>看看下面的影片，了解更多關於瀏覽器預設樣式（可開 CC 字幕並自動翻譯為中文）。</p>
+
+<p>{{EmbedYouTube("spK_S0HfzFw")}}</p>
+
+<h2 id="CSS_是作什麼用的？">CSS 是作什麼用的？</h2>
+
+<p>如同我們前面所提到的， CSS 是一種用來指定文件該用什麼方式呈現的語言，可以定義它們的樣式、布局…等。</p>
+
+<p><strong>文件</strong>通常指的是使用標記語言的文字檔案，{{Glossary("HTML")}} 是其中最常見的，但是您也可能遇到其它例如 {{Glossary("SVG")}} 或 {{Glossary("XML")}} 的標記語言。</p>
+
+<p>所謂的<strong>呈現</strong>文件，指的是將文件轉換為你的讀者可用的形式。像是 {{Glossary("Mozilla Firefox","Firefox")}} 、 {{Glossary("Google Chrome","Chrome")}} 或 {{Glossary("Microsoft Edge","Edge")}} 這類的{{Glossary("browser","瀏灠器")}}，是設計來將文件視覺化，再呈現電腦螢幕、投影機上或是由列表機列印出來。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong>瀏覽器有時候被稱為 {{Glossary("User agent","user agent")}}（用戶終端），它基本上泛指電腦裡安裝的應用軟體。雖然並不是唯一，當我們在討論 CSS 的時候，用戶終端主要指的是瀏覽器。至於其它的用戶終端，有些能夠將 HTML 和 CSS 轉換為 PDF 再列印出來。</p>
+</div>
+
+<p>CSS 可以用在很基本文字樣式上頭，像是改變標題和連結的<a href="/zh-TW/docs/Web/CSS/color_value">顏色</a>及<a href="/zh-TW/docs/Web/CSS/font-size">尺寸</a>。它可以用在建立布局，像是<a href="/zh-TW/docs/Web/CSS/Layout_cookbook/Column_layouts">將原本單欄的文字內容加入布局</a>，劃分出主要的內容以及包含相關資訊的側邊欄。它甚至可以用在建立<a href="/zh-TW/docs/Web/CSS/CSS_Animations">動畫</a>效果。點進上面的連結，看看相關的例子。</p>
+
+<h2 id="CSS_語法">CSS 語法</h2>
+
+<p>CSS 是一種基於規則的語言，您對網頁裡特定或一群元素指定一系列的規則。舉例來說：「我要讓頁面裡的主標題，以紅色且大號的字體呈現」。</p>
+
+<p>下面這段語法是為了實現上面的需求，用簡單 CSS 規則示範：</p>
+
+<pre class="brush: css notranslate">h1 {
+    color: red;
+    font-size: 5em;
+}</pre>
+
+<p>樣式規則以一個{{Glossary("CSS Selector", "選擇器")}}開始。它<em>選擇</em>了您預計改變樣式的 HTML 元素。在這個例子中，我們要調整的是第一級的標題元素（{{htmlelement("h1")}}）。</p>
+
+<p>接著我們跟著一組花括號 <code>{ }</code>，裡面是一到多個<strong>聲明</strong>，它的形式是一對一對<strong>屬性名稱</strong>和<strong>屬性內容</strong>的組合。每一對聲明會將我們選中元素的屬性，付予我們所想要設定的內容（或數值）。</p>
+
+<p>在冒號（:）前面的是屬性的名稱，後面的是屬性內容（值）。CSS 的{{Glossary("property/CSS","屬性")}}依照其類型可以使用的值而有所不同。在我們的例子中，有個 <code>color</code> 屬性，它可以設定各種<a href="/zh-TW/docs/Learn/CSS/Building_blocks/Values_and_units#Color">顏色值</a>。而 <code>font-size</code> 屬性則可以採用不同<a href="/zh-TW/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">尺寸單位</a>的值。</p>
+
+<p>一個 CSS 樣式表包含了許多這樣子的規則，一個接著一個。</p>
+
+<pre class="brush: css notranslate">h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}</pre>
+
+<p>你將會發些有些值很容易學會，而另一些則需要查資料確認。MDN 上有各個屬性的獨立頁面讓您能查到屬性及其可使用的值，在你忘記了或是想知道其它可能用法的時候提供一個快速的路徑。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong> 您可以在 MDN 的 <a href="/zh-TW/docs/Web/CSS/Reference">CSS 參考資源</a>找到所有的 CSS 屬性（以及其它 CSS 特性）頁面的連結。 另外，當您需要得到某個 CSS 特性的更多資訊，應該去習慣使用「mdn <em>特性名稱</em>」的方式在您喜歡搜尋引擊上搜尋。舉例來說，嘗試以「mdn color」和「mdn font-size」作關鍵字搜尋！</p>
+</div>
+
+<h2 id="CSS_的各個主題（單元）">CSS 的各個主題（單元）</h2>
+
+<p>由於 CSS 有太多的項目可以進行設定，因此將這個語言依不同主題切分出單元。您將會在探索 MDN 的時候看到這些單元，並發現許多文章是圍繞著特定單元所組織的。舉例來說，您可以在 MDN 關於<a href="/zh-TW/docs/Web/CSS/CSS_Backgrounds_and_Borders">背景與邊框</a>的單元裡，看到它的目的，以及其包含了哪些不同的屬性及特性。 您也將在文末發現到相關 <em>CSS 規範</em>的連結。</p>
+
+<p>在這裡不用太煩惱 CSS 的架構，可以讓尋找資訊變得簡單一些。例如說，當你知道某個屬性可能用在其它類似的東西上，因此它們可能被放在同一個規範（單元）裡。</p>
+
+<p>舉個特別的例子，讓我們回到背景與邊框的單元中，您可能會認為在邏輯上 <code><a href="/zh-TW/docs/Web/CSS/background-color">background-color</a></code> 和 <code><a href="/zh-TW/docs/Web/CSS/border-color">border-color</a></code> 會在同一個單元裡被定義。所以您猜對了。</p>
+
+<h3 id="CSS_規範">CSS 規範</h3>
+
+<p>所有網路標準技術（HTML、CSS、JavaScript…等）都被定義在稱為定義（specifications 或簡稱 specs）巨型文件中，由像是 {{glossary("W3C")}}、{{glossary("WHATWG")}}、{{glossary("ECMA")}} 或 {{glossary("Khronos")}} 之類的標準組織所發布，並且很精確地定義這些技術的行為方式。</p>
+
+<p>CSS 並沒有什麼不同，它由 W3C 一個被稱為 <a href="https://www.w3.org/Style/CSS/">CSS 工作組</a>的團體所發展。這個團體是由對 CSS 感興趣的瀏覽器供應商和其它公司的代表所組成。還有其它被稱為<em>邀請專家</em>的人，與其它的成員組織無關，可以獨立的發聲。</p>
+
+<p>新的 CSS 特性被 CSS 工作組所發展、定義。有時候是因為特定瀏覽器對某個功能有興趣，而有時候是因為網站設計師與開發人員的要求，還有一些時候是工作組本身定義的需求。CSS 正不斷發展，新的可用特性正在出現。然而，每個人很努力達到的 CSS 重要方針，是不要往會破壞舊網站的方向進行改變。一個在 2000 年建立的網站，使用了當時能用的 CSS 特性，應該到今天仍能夠在瀏覽器上使用。</p>
+
+<p>作為一個 CSS 新手，你會發現 CSS 的規範不勝枚舉，它們是用來給開發用戶端程式的開發者實作功能所使用，而不是讓網站開發人員閱讀來了解 CSS。許多經驗的豐富的開發者，寧願看 MDN 上的文件或其它指引。然而，知道規範的存在還是有價值的，可以了解它們與您正使用的 CSS 之間的關係，瀏覽器支援（如下）以及相關定義。</p>
+
+<h2 id="瀏覽器支援">瀏覽器支援</h2>
+
+<p>被定義好的 CSS 特性，只有被一個或更多瀏覽器實作出來之後，才會在我們開發網頁上面有所幫助。這意味著已經編寫了程式，可以將 CSS 檔案裡的設定轉換為輸出在畫面上的結果。我們將在 <a href="/zh-TW/docs/Learn/CSS/First_steps/How_CSS_works">CSS 工作原理</a>中詳細介紹這個過程。一個（新）特性被所有瀏覽器同時實作出來是不常見的，通常會缺了幾個，CSS 某些部分您可以在某些瀏覽器上使用，然而在其它瀏覽器人則沒有作用。基於這個原因，確認特性被實作的狀況是有用的。在每個 MDN 的資源頁面上，您可以看到感興趣的屬性現在的狀態，因此您可以確定能不能把它使用在網站上。</p>
+
+<p>以下是 CSS <code><a href="/zh-TW/docs/Web/CSS/font-family">font-family</a></code> 屬性的支援狀態表。</p>
+
+<p>{{Compat("css.properties.font-family")}}</p>
+
+<h2 id="下一步…">下一步…</h2>
+
+<p>現在您已經知卜 CSS 是什麼，接著移動到 <a href="/zh-TW/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a>單元，您可以在這裡開始寫一些 CSS。</p>
+
+<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="在這個單元中">在這個單元中</h2>
+
+<ol>
+ <li><a href="/zh-TW/docs/Learn/CSS/First_steps/What_is_CSS">CSS 是什麼？</a></li>
+ <li><a href="/zh-TW/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li>
+ <li><a href="/zh-TW/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 的結構</a></li>
+ <li><a href="/zh-TW/docs/Learn/CSS/First_steps/How_CSS_works">CSS 工作原理</a></li>
+ <li><a href="/zh-TW/docs/Learn/CSS/First_steps/Using_your_new_knowledge">使用您的新知識</a></li>
+</ol>
diff --git a/files/zh-tw/learn/css/index.html b/files/zh-tw/learn/css/index.html
new file mode 100644
index 0000000000..eedd54f655
--- /dev/null
+++ b/files/zh-tw/learn/css/index.html
@@ -0,0 +1,72 @@
+---
+title: CSS（樣式表）
+slug: Learn/CSS
+tags:
+  - CSS
+  - 入門
+  - 初學者
+  - 撰寫程式
+  - 樣式
+  - 風格
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><span class="st">階層式</span><span class="notranslate">樣式表</span>（{{glossary("CSS")}}）是學習完 {{glossary("HTML")}} 之後，您應該學習的第一項技術。HTML 用於定義內容的架構與語意，CSS 則是用來設定樣式與佈局方式。舉例來說，您可以使用 CSS 來改變內容的字體、顏色、字型大小、間距、拆分成多欄，或是加入動畫和其他裝飾性質的特性。</p>
+
+<h3 class="summary" id="想要成為_Web_前端開發人員？">想要成為 Web 前端開發人員？</h3>
+
+<p>我們整理了一門課程，包含了你實現目標需要的所有基礎知識。</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">開始</a></p>
+
+<h2 id="先備知識">先備知識</h2>
+
+<p>在嘗試 CSS 之前，您應該先了解基本的 HTML 知識。我們建議先閱讀 <a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML 介紹</a>單元。在這個單元你會學習到關於：</p>
+
+<ul>
+ <li>CSS，由 <a href="/zh-TW/docs/Learn/CSS/First_steps">CSS 介紹</a>單元開始</li>
+ <li>更進階 <a href="/zh-TW/docs/Learn/HTML#模組">HTML 模組</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> 以及它如何在網頁加上動態的功能</li>
+</ul>
+
+<p>在您了解最基礎的 HTML 運作思維後，我們推薦您同時學習 HTML 與 CSS，使兩者之間互相搭配。因為 HTML 搭配上 CSS 會變得無比有趣，兩者是密不可分的，您無法在不理解 HTML 的情況下獨立學習 CSS。</p>
+
+<p>在開始這個主題之前，您應該要有電腦的基礎使用概念以及使用網頁的經驗（單純地瀏覽、查看內容）。您應該要有一個已經設定的好的基本工作環境，如同<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>提到的內容。這兩者都是 <a href="/zh-TW/docs/Learn/Getting_started_with_the_web">Web 入門</a>裡初學者單元中一部分。</p>
+
+<p>建議您在開始課程前先閱讀 <a href="/zh-TW/docs/Learn/Getting_started_with_the_web">Web 入門</a>，不過並非絕對必要，儘量那裡有許多詳細的介紹，大部分 CSS 概念在我們的 CSS 入門單元中也會含蓋到。</p>
+
+<h2 id="單元">單元</h2>
+
+<p>這個主題按建議的學習順序包含以下的單元。強烈建議您從第一項開始。</p>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/CSS/First_steps">CSS 入門</a></dt>
+ <dd>CSS（<span class="st">階層式</span>樣式表）用來設定網頁的樣式及佈局，例如：改變文字的字體、顏色、大小及間距以及拆分為多欄，或是增加動畫或裝飾性的效果。這個單元提供一個溫和的路徑，讓您逐漸熟悉 CSS 的基礎概念，包含它的運作方式，語法是什麼樣子，以及如何開始在 HTML 裡添加樣式。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/Building_blocks">CSS 的組成</a></dt>
+ <dd>這個單元接續在 <a href="/zh_TW/docs/Learn/CSS/First_steps">CSS 入門</a>之後，現在已經熟悉了這門語言的語法，並有了一些基本的使用經驗，是時候再深入一些。這個單元關注於疊加（cascade）和繼承（inheritance）規則、所有可用的選擇器類型、單位、尺寸、背景與邊框的樣式、除錯，以及其它更多的。</dd>
+ <dd>這裡的目的是在進入更進階的主題，像是<a href="/zh_TW/docs/Learn/CSS/Styling_text">文字樣式</a>及 <a href="/zh_TW/docs/Learn/CSS/CSS_layout">CSS 佈局</a>之前，給您一個足以寫出合格 CSS 的工具包並幫助您了解所有的基礎理論。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/Styling_text">裝飾文字</a></dt>
+ <dd>在含蓋了 CSS 語言基本的部分之後，下一個帶給您的 CSS 主題會專注於文字樣式的裝飾上，您將最常用 CSS 作的事情之一。在這裡，我們文字樣式的基礎，包括設定字體、粗細、斜體、行距與字距、陰影與其它的文字效果。整個單元圍繞於在您的頁面上套用選擇的字體，以及對清單和連結進行樣式調整。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/CSS_layout">CSS 的布局</a></dt>
+ <dd>到了這邊，我們已經看過了 CSS 的基礎知識，如何裝飾文字，如何裝飾並控制您內容所在的區。現在是時候來看看如合將您的這些區塊擺放到正確的位置，並能依不同的可視空間進行調整。我們已經含蓋了必須的先備知識，所以我們現在可以深入到 CSS 的布局，看看不同的顯示設定，像是新的佈局工具 flexbox 、 CSS grid 和定位（position）以及一些您可能仍想要了解的早期技術。</dd>
+</dl>
+
+<h2 id="解決常見的_CSS_問題">解決常見的 CSS 問題</h2>
+
+<p><a href="/zh-TW/docs/Learn/CSS/Howto">使用 CSS 解決常見的問題</a>裡提供了許多單元的連結，其內容說明如何使用 CSS 解決在建立網頁時常見的問題。</p>
+
+<p>在一開始，您主要將顏色套用到 HTML 元素或是背景；改變元素的大小、形狀和位置，然後添加、定義元素的邊框。當您對 CSS 的基礎知識有深刻的理解，就沒有太多作不到的事情。學習 CSS 其中一項最棒的事情，是當你了解了基本原理，通常您就能很好的抓到「什麼能作」、「什麼作不到」的感覺，既使是在您還不確切的知道要怎麼實現它的狀況下。</p>
+
+<h2 id="怪異的_CSS">怪異的 CSS</h2>
+
+<p>CSS 與您將遇到程式語言或設計工具在運作上有點不太一樣。為什麼要用這種方式運作？在下面影片中， Miriam Suzanne 解釋為什麼 CSS 是這樣運作，以及為什麼會這樣子發展。（可以利用字幕翻譯功能，將 CC 字幕轉為中文）</p>
+
+<p>{{EmbedYouTube("aHUtMbJw8iA")}}</p>
+
+<h2 id="相關資源">相關資源</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/CSS">MDN 中的 CSS 資源</a></dt>
+ <dd>在 MDN 網站裡，CSS 文件的主要入口，您將可以在這裡找到所有 CSS 語言的所有特性，以及它們詳細的參考資訊。想要知道一個屬性可以套用的所有設定嗎？這是一個不錯的地方。</dd>
+</dl>
diff --git a/files/zh-tw/learn/css/styling_text/index.html b/files/zh-tw/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..2d5368fdfe
--- /dev/null
+++ b/files/zh-tw/learn/css/styling_text/index.html
@@ -0,0 +1,40 @@
+---
+title: 文字樣式
+slug: Learn/CSS/Styling_text
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">託了 CSS 語言基礎的福，下一個讓你專攻的 CSS 主題是文字樣式——最常會在 CSS 使用的部分。讓我們來看看文字樣式的基礎知識，包含設定字形、粗細、斜體、行距與字距、陰影以及更多文字功能。我們會套用客製化字形、設定清單樣式和連結樣式到你的網頁來完成這個單元。</p>
+
+<h2 id="先備知識">先備知識</h2>
+
+<p>在開始這個單元之前，你應該先熟悉基礎的 HTML，如 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 介紹</a> 這個單元所討論的，並且要對 CSS 的基礎感到輕鬆，如 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 介紹</a> 討論的。</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="指南">指南</h2>
+
+<p>這個單元包含以下的文章會教導你?設定 HTML 文字內容樣式的全部要領。</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">基本的字形及文字樣式</a></dt>
+ <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">清單樣式</a></dt>
+ <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">連結樣式</a></dt>
+ <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">網頁字形</a></dt>
+ <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt>
+ <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd>
+</dl>