initial commit

4 files changed, 611 insertions, 0 deletions

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>