blob: 39760c396651996db604adf53d409464d743fefd (
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
101
102
103
104
105
106
107
108
109
|
---
title: CSS（层叠样式表）
slug: Web/CSS
tags:
- CSS
- 参考
- 层叠样式表
- 布局
- 样式
- 设计
translation_of: Web/CSS
---
<p>{{CSSRef}}</p>
<p class="summary"><span class="seoSummary"><strong>层叠样式表</strong> (Cascading Style Sheets，缩写为 <strong>CSS</strong>），是一种 <a href="/zh-CN/docs/DOM/stylesheet">样式表</a> 语言，用来描述 <a href="/zh-CN/docs/HTML" title="The HyperText Mark-up Language">HTML</a> 或 <a href="/zh-CN/docs/XML_介绍" title="zh-CN/docs/XML">XML</a>（包括如 <a href="/zh-CN/docs/SVG" title="zh-CN/docs/SVG">SVG</a>、<a href="/zh-CN/docs/Web/MathML">MathML</a>、<a href="/zh-CN/docs/XHTML" title="zh-CN/docs/XHTML">XHTML</a> 之类的 XML 分支语言）文档的呈现。CSS 描述了在<span style="line-height: inherit;">屏幕、纸质、音频等其它媒体上的元素应该如何被渲染</span>的问题<span style="line-height: inherit;">。</span></span></p>
<p>CSS 是<strong>开放网络</strong><span style="line-height: inherit;">的核心语言之一，由 </span><a class="external" href="http://w3.org/Style/CSS/#specs" style="line-height: inherit;">W3C 规范</a> 实现跨浏览器的标准化<span style="line-height: inherit;">。CSS节省了大量的工作。 样式可以通过定义保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， </span><a href="/zh-CN/docs/CSS/CSS3" style="line-height: inherit;" title="CSS3">CSS3</a><span style="line-height: inherit;"> 分成多个小模块且正在标准化中。</span></p>
<section id="sect1">
<ul class="card-grid">
<li><span><strong>CSS</strong> 介绍</span>
<p>如果你是 Web 开发的新手，请务必阅读我们的 <a href="/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基础</a>文章以学习 CSS 的含义和用法。</p>
</li>
<li><span><strong>CSS </strong>教程</span>
<p>我们的 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS">CSS 学习区</a>包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</p>
</li>
<li><span><strong>CSS </strong>参考</span>
<p>针对资深 Web 开发者的<a href="/zh-CN/docs/Web/CSS/Reference" title="zh-CN/docs/Web/CSS/Reference">详细参考手册</a>，描述了 CSS 的各个属性与概念。</p>
</li>
</ul>
<div class="row topicpage-table">
<div class="section">
<section id="sect1">
<h2 id="教程">教程</h2>
<p>我们的 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS">CSS 学习区</a> 以多模块、零基础为特色进行 CSS 的教学 —— 这也就意味着你不需要任何知识基础。</p>
<dl>
<dt><a href="/zh-CN/docs/Learn/CSS/First_steps">学习CSS 第一步</a></dt>
<dd>CSS（层叠样式表）用于设置网页的样式及布局——比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其它装饰性的特征。本模块将通过阐述基本原理，展示语法示例，以及如何与HTML相联系三方面，为你日后精通CSS提供一个友好的开端。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks">CSS构建</a></dt>
<dd>本模块是<a href="/zh-CN/docs/Learn/CSS/First_steps">学习CSS 第一步</a>的延续，相信你已经熟悉了这门语言及它的语法，并拥有一些使用它的基本经验，是时候更进一步了。本模块着眼于层叠和继承、所有可用的选择器类型、单位、大小、背景、边框、调试等等。<br>
<br>
其目的在于先为你提供编写功能强大的CSS工具包，了解所有基础理论。之后再进行进一步的学习，诸如<a href="/zh-CN/docs/Learn/CSS/为文本添加样式">样式化文本</a>和<a href="/zh-CN/docs/Learn/CSS/CSS_layout">CSS布局</a></dd>
<dt><a href="/zh-CN/docs/Learn/CSS/Styling_text">样式化文本</a></dt>
<dd>在学习了CSS语言基础知识的基础上，你需要关注的下一个重点是样式化文本——这是使用CSS时最常用的场景之一。在这一模块将学习文本样式设置的基础知识，包括设置字体、粗体、斜体、行、字符间距、阴影以及其他文本属性。我们通过在页面上应用自定义的字体以及样式化的列表、链接来完善本模块。</dd>
<dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout">CSS 布局</a></dt>
<dd>到这里，我们已经了解了 CSS 基础：如何样式化文本，以及如何样式化和操作内置个人内容的盒模型。现在是时候研究“如何相对于可视区域将你的盒子彼此间放置于正确位置”了。我们到此已经覆盖了所有预备知识，因此现在能够深入学习 CSS 布局，研究不同的显示设置，包括浮动和定位在内的传统布局方法，以及像如弹性盒（flexbox）之类新近流行的布局工具。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/Howto">解决常见的CSS相关问题</a></dt>
<dd>本模块提供了一些内容链接，这些内容很好的回答了在创建网页时使用CSS所遇到的常见问题。</dd>
</dl>
</section>
</div>
<div class="section">
<h2 id="参考">参考</h2>
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference">CSS 参考</a>: 针对资深 Web 开发者的详细参考手册，其中描述了 CSS 的各个属性和概念。</li>
<li>CSS 关键概念:
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/Syntax">语言语法和形式</a>（The <a href="https://developer.mozilla.org/en-US/docs/CSS/Syntax">syntax and forms of the language</a>）</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/Specificity">特殊性（另译优先级）</a>、<a href="https://developer.mozilla.org/zh-CN/docs/CSS/inheritance">继承</a>和<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Cascade">级联</a>（<a href="https://developer.mozilla.org/en-US/docs/CSS/Specificity">Specificity</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/inheritance">inheritance </a>and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade">the Cascade</a>）</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/box_model">盒子模型</a>和<a href="https://developer.mozilla.org/zh-CN/docs/CSS/margin_collapsing">外边距合并</a>（<a href="https://developer.mozilla.org/en-US/docs/CSS/box_model">Box model</a> and <a href="https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing">margin collapse</a>）</li>
<li><a href="/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>（The <a href="/en-US/docs/Web/CSS/Containing_block">containing block</a>）</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">堆叠</a>和<a href="https://developer.mozilla.org/zh-CN/docs/CSS/block_formatting_context" title="block formatting context">块格式化</a>上下文（<a href="https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts）</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/initial_value">初始值</a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value">计算值</a>、<a href="https://developer.mozilla.org/zh-CN/docs/CSS/used_value">应用值</a>和<a href="https://developer.mozilla.org/zh-CN/docs/CSS/actual_value">实际值</a>（<a href="https://developer.mozilla.org/en-US/docs/CSS/initial_value">Initial</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value">computed</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/used_value">used</a>, and <a href="https://developer.mozilla.org/en-US/docs/CSS/actual_value">actual</a> values）</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Shorthand_properties">CSS 简写属性</a>（<a href="https://developer.mozilla.org/en-US/docs/CSS/Shorthand_properties">CSS shorthand properties</a>）</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS 弹性盒子布局</a> (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a>)</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout">CSS 网格布局 </a> (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a>)</li>
<li><a class="/zh-CN/docs/Web/CSS/媒体查询" href="/zh-CN/docs/Web/CSS/媒体查询">媒体查询</a></li>
<li><a href="/zh-CN/docs/Web/CSS/animation">动画</a></li>
</ul>
</li>
</ul>
<h2 id="参考书">参考书</h2>
<p>《<a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a>》一书的目的是将一些也许你将要在自己的网站中实现的、常用的布局模式的方法汇集在一起，并且还提供了代码使你可以在项目中作为基础来使用。这些方法突出表现了同一布局规范的不同使用方式，作为开发者你可以自由选择自己想要的方式来实现。</p>
<h2 id="CSS_开发工具">CSS 开发工具</h2>
<ul>
<li><a href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service（万维网联盟 CSS 验证服务）</a> 用以检查 CSS 是否有效。这是非常有价值的调试工具。</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Tools">Firefox 开发工具</a> 允许通过 <a href="https://developer.mozilla.org/zh-CN/docs/Tools/Page_Inspector">页面查看器</a> 和 <a href="https://developer.mozilla.org/zh-CN/docs/Tools/Style_Editor">样式编辑器</a> 工具查看和实时编辑页面的CSS。</li>
<li>Firefox 的 <a href="https://addons.mozilla.org/zh-CN/firefox/addon/60">Web Developer 扩展</a>，也允许实时查看和编辑网站的 CSS。</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Tools">各种各样的其他工具</a>。</li>
</ul>
<h2 id="自身的错误">自身的错误</h2>
<ul>
<li>Firefox: {{bug(1323667)}}</li>
</ul>
</div>
</div>
</section>
<h2 id="相关链接">相关链接</h2>
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/%E6%BC%94%E7%A4%BA%E8%AF%B4%E6%98%8E#CSS">CSS 演示说明</a>：最新活跃的 CSS 技术——创造力的推动。</li>
<li>常与 CSS 一起应用的 Web 语言：<a href="https://developer.mozilla.org/zh-CN/docs/HTML" title="zh-CN/docs/HTML">HTML</a>、<a href="https://developer.mozilla.org/zh-CN/docs/SVG" title="SVG">SVG</a>、<a href="/zh-CN/docs/Web/MathML">MathML</a>、{{Glossary("XHTML", "", 1)}} 以及 <a href="/zh-CN/docs/XML_介绍" title="zh-CN/docs/XML">XML</a>。</li>
<li>Mozilla CSS 扩展用途技术：<a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL" title="zh-CN/docs/XUL">XUL</a>、<a href="https://developer.mozilla.org/zh-CN/Firefox">Firefox</a>、以及 <a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Thunderbird" title="zh-CN/docs/Extensions">Thunderbird 扩展</a>与<a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/Themes">主题</a>。</li>
<li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla 邮件列表</a></li>
<li><a href="http://stackoverflow.com/questions/tagged/css">CSS栈溢出问题</a></li>
</ul>
|
