blob: ee9dc82a1d26d15264f0cd930952d49ebd79314a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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>
|
