blob: f894fc2d6a07b00c5bf49a35f3be9853a4d498ec (
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
---
title: CSS
slug: Web/CSS
tags:
- CSS
- Cascading Style Sheets
- Design
- Landing
- Layout
- Reference
- Style Sheets
- Styles
- Stylesheets
- 樣式表
- 版面配置
- 設計
translation_of: Web/CSS
---
<p class="summary"><span class="seosummary="><strong>層疊樣式表（Cascading Style Sheets, CSS）</strong>是用來描述 <a href="/zh-TW/docs/HTML" title="HyperText Markup Language">HTML</a> 或 <a href="/zh-TW/docs/XML" title="zh-TW/docs/XML">XML</a>（包含 <a href="/zh-TW/docs/SVG" title="zh-TW/docs/SVG">SVG</a> 或 <a href="/zh-TW/docs/XHTML" title="zh-TW/docs/XHTML">XHTML</a> 等各種 XML 變形）文件外觀的<a href="/zh-TW/docs/DOM/stylesheet">樣式表</a>語言。CSS 會描述文件裡的結構化元素，該如何呈現在螢幕、紙、語音報讀、或其他媒介上。</span></p>
<p><strong>CSS</strong> 是<strong>開放網路</strong>的核心語言之一，具有標準化的 <a class="external" href="http://w3.org/Style/CSS/#specs">W3C 規範</a>。歷經不同層級的開發，CSS1 目前已被棄用、CSS2.1 是建議規範，而 <a href="/zh-TW/docs/CSS/CSS3" title="CSS3">CSS3</a> 目前被分作數個較小的模組，持續在標準化的路上行進。</p>
<section id="sect1">
<ul class="card-grid">
<li><span>CSS 介紹</span>
<p>若你剛接觸網路開發，請確定讀過我們的 <a href="/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基礎</a>以了解何謂 CSS 並知道要怎麼用。</p>
</li>
<li><span>CSS 教學</span>
<p>我們的 <a href="/zh-TW/docs/Learn/CSS">CSS 學習專區</a>包含所有必要的基礎資訊，能讓你從完全新手開始，帶向熟悉 CSS。</p>
</li>
<li><span>CSS 參考</span>
<p>這是給經驗豐富的網頁開發者的<a href="/zh-TW/docs/Web/CSS/Reference" title="zh-TW/docs/CSS/CSS_Reference">完整參考資訊</a>，說明 CSS 的每一個屬性與概念。</p>
</li>
</ul>
<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="教學">教學</h2>
<p>我們的 <a href="/zh-TW/docs/Learn/CSS">CSS 學習專區</a>有很多從頭教起的 CSS 模組。你不需要背景知識。</p>
<dl>
<dt><a href="/zh-TW/docs/Learn/CSS/Introduction_to_CSS">CSS 介紹</a></dt>
<dd>此模組讓你理解 CSS 工作原理，包含選擇器與屬性、撰寫 CSS 規則、在 HTML 套用 CSS、如何在 CSS 指定長度、色彩、還有其它單位、階層與繼承、box model 基礎、以及針對 CSS 除錯。</dd>
<dt><a href="/zh-TW/docs/Learn/CSS/Styling_text">文字樣式</a></dt>
<dd>在這裡我們專注在文字樣式的基礎，包含設定字體、粗細、斜體、行距、字距、陰影以及其他文字屬性。最後以應用自訂字體、樣式化列表、樣式化連結結束。</dd>
<dt><a href="/zh-TW/docs/Learn/CSS/Styling_boxes">樣式化盒子</a></dt>
<dd>接著，我們關注樣式化盒子，這是網頁排版中一個基礎的環節。在這個系列中我們會複習盒子模型，然後操作盒子的排版，像是設定留白、邊框、邊距、背景顏色或圖片以及其他特色，還有一些酷炫的功能像是陰影、過濾器。</dd>
<dt><a href="/zh-TW/docs/Learn/CSS/CSS_layout">CSS 排版</a></dt>
<dd>到了這裡，我們已經看完 CSS 的基礎（樣式化文字、樣式化與操作盒子使你的內容可以合適的展示）。<span class="not-sure">現在該來看看如何把你的盒子放在相對於可視區正確的地方。我們已經擁有必要的知識，所以你可以更深入了解 CSS 排版、看不同的顯示設定、傳統排版方法如浮動或定位、新的排版方法如彈性盒子。</span></dd>
</dl>
</div>
<div class="section">
<h2 class="Tools" id="參考">參考</h2>
<ul>
<li><a href="/zh-TW/docs/Web/CSS/Reference">CSS 參考</a>：一個詳細的參考資料，為資深網頁開發人員設計，包含 CSS 各種屬性和觀念。</li>
<li>CSS 關鍵概念：
<ul>
<li><a href="/zh-TW/docs/CSS/Syntax">語法</a></li>
<li><a href="/zh-TW/docs/CSS/Specificity">權重</a>和<a href="/zh-TW/docs/CSS/inheritance">繼承</a></li>
<li><a href="/zh-TW/docs/CSS/box_model">盒子模型</a>和<a href="/zh-TW/docs/CSS/margin_collapsing">邊框的崩潰</a></li>
<li><a href="/zh-TW/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">堆疊</a>和<a href="/zh-TW/docs/CSS/block_formatting_context" title="block formatting context">格式化區塊</a></li>
<li><a href="/zh-TW/docs/CSS/initial_value">初始值</a> 、<a href="/zh-TW/docs/CSS/computed_value">計算值（computed）</a>、 <a href="/zh-TW/docs/CSS/used_value">使用值（used）</a>和<a href="/zh-TW/docs/CSS/actual_value">運作值</a></li>
<li><a href="/zh-TW/docs/CSS/Shorthand_properties">CSS 簡寫屬性</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS 彈性盒子排版</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout">CSS 格線排版</a></li>
<li><a href="/zh-TW/docs/Web/CSS/Media_Queries">媒體查詢</a></li>
</ul>
</li>
</ul>
<h2 class="Tools" id="CSS_開發工具">CSS 開發工具</h2>
<ul>
<li>The <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS 驗證服務</a> 能檢查 CSS 的有效性。<a href="http://www.onlinewebcheck.com/">OnlineWebCheck.com</a> 也在做相同的事情。它們都是很重要的除錯工具。</li>
<li><a href="/zh-TW/docs/Tools">Firefox 開發者工具</a>能透過<a href="/zh-TW/docs/Tools/Page_Inspector">頁面檢測器</a>與<a href="/zh-TW/docs/Tools/Style_Editor">樣式編輯器</a>直接觀察、編輯網頁的 CSS。</li>
<li>Firefox 的<a class="link-https" href="https://addons.mozilla.org/zh-TW/firefox/addon/1843">Firebug 套件</a>，navigator 裡面，能直接觀察、編輯網頁的 CSS 的人氣套件。要測試某些變化的時候會非常實用，而這套件還能做得更多。</li>
<li>Firefox 的<a class="link-https" href="https://addons.mozilla.org/zh-TW/firefox/addon/60">Web Developer 套件</a> 也能能直接觀察、編輯網頁的 CSS。與 Firebug 相比更簡單、但相比下也沒那麼強大。</li>
<li><a href="/zh-TW/docs/Web/CSS/Tools">其他 CSS 工具。</a></li>
</ul>
<h2 id="Meta_錯誤">Meta 錯誤</h2>
<ul>
<li>Firefox: {{bug(1323667)}}</li>
</ul>
</div>
</div>
</section>
<h2 id="參見">參見</h2>
<ul>
<li><a href="/zh-TW/docs/Web/Demos_of_open_web_technologies#CSS">CSS demos</a> 最新的 CSS 技術動向：給予創意的一拔。</li>
<li>常與 CSS 相關聯的語言：<a href="/zh-TW/docs/HTML">HTML</a>、<a href="/zh-TW/docs/SVG">SVG</a>、<a href="/zh-TW/docs/XHTML">XHTML</a>、<a href="/zh-TW/docs/XML">XML</a>。</li>
<li>廣泛運用 CSS 的 Mozilla 科技：<a href="/zh-TW/Firefox">Firefox</a> 及 <a href="/zh-TW/docs/Mozilla/Thunderbird">Thunderbird</a> 的<a href="/zh-TW/docs/Extensions">套件</a>與<a href="/zh-TW/Add-ons/Themes">佈景</a></li>
</ul>
|
