blob: fd8bb042cbd4f9fc1ccfdbb470d70d20e43c77fb (
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
|
---
title: CSS
slug: Learn/CSS
tags:
- Beginner
- CSS
- CodingScripting
- Debugging
- Landing
- NeedsContent
- Topic
- length
- specificity
- 入门
translation_of: Learn/CSS
---
<div>{{LearnSidebar}}</div>
<p class="summary">层叠样式表 — 也就是{{glossary("CSS")}} — 是你在{{glossary("HTML")}}之后应该学习的第二门技术。HTML用于定义内容的结构和语义，CSS用于设计风格和布局。比如，您可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。</p>
<h2 id="学习路径">学习路径</h2>
<p>在尝试学习 CSS 之前，您应该了解 HTML 的基础知识。建议你先学习 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 简介</a>模块 — 这一模块主要介绍了以下内容:</p>
<ul>
<li>CSS，从 CSS 模块简介开始</li>
<li>更高级的<a href="/zh-CN/Learn/HTML#Modules">HTML模块</a></li>
<li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>，如何使用 Javascript 给网页加上动态功能</li>
</ul>
<p>我们建议你同时学习 HTML 和 CSS，在这两个主题之间来回切换。因为有着 CSS 的 HTML 更加有趣，并且不了解 HTML 就不能真正掌握CSS。</p>
<p>在学习本章节之前，你应该会使用计算机，熟练的使用网页操作（哪怕只是盯着屏幕看）。你应该配置好一个基本的操作环境（见<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本软件</a>），知道如何创建和管理文件（见<a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>）—这两个都是 <a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web入门</a> 的初学者模块的一部分。</p>
<p>我们建议你在学习本章内容前，先完成 <a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web入门</a>，尽管这不是必须的；CSS 基础文章中涵盖的大部分内容在 CSS 模块简介中也有，而且 CSS 模块涵盖了更多的细节。</p>
<h2 id="模块">模块</h2>
<p>本主题包含以下模块，建议按顺序阅读这些模块。你应该从第一个模块开始。</p>
<dl>
<dt><a href="/zh-CN/docs/Learn/CSS/First_steps">CSS 初步</a></dt>
<dd>这个模块介绍了使用 CSS 的基础知识，包括选择器和属性，编写 CSS 的规则，将CSS 应用于 HTML 的方法，如何在 CSS 中指定长度、颜色和其他单位，层叠与继承，盒模型基础以及 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>，进行进一步的学习——既然你已经熟悉了CSS的语言和语法，有了一些使用CSS的基本经验，是时候再深入一些了。本模块涉及了层叠与继承、可用的所有种类的选择器、单位、尺寸、样式化背景和边框、调试，还有更多。</dd>
<dd>这样做的目的是，在继续深入到更加具体的规则，例如<a href="/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F">样式化文本</a>和<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout">CSS布局</a>前，为你提供一个用于编写堪用的CSS的工具箱，帮你理解所有必要的理论。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/Styling_text">样式化文本</a></dt>
<dd>这个模块介绍基础的文本样式，包括字体属性的设置，粗体和斜体，行和字母间距，阴影和其他文本功能。我们通过在网页上设置特定的字体，指定列表和链接的样式来完成这一模块。</dd>
<dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout">CSS 布局</a></dt>
<dd>到目前为止，我们已经学习了 CSS 基础知识、如何设置文本样式、如何设计并操作内容所在的框。现在应该考虑如何把你的框以合适的位置放置在视口内和其他框旁边了。我们已经学习了在深入 CSS 布局之前需要学会的必要知识，下一步我们通过学习设置 display 属性、使用新的布局工具如弹性盒（flexbox），CSS网格和定位、以及你仍想知道的一些传统技术，来深入学习 CSS 布局。</dd>
</dl>
<h2 id="解决常见的CSS问题">解决常见的CSS问题</h2>
<p><a href="/en-US/docs/Learn/CSS/Howto">使用CSS解决常见问题</a>解释了怎样使用CSS解决创建一个网页时常遇到的问题。</p>
<p>从这里开始，你大致就能在HTML元素和它们的背景上应用颜色、改变形状尺寸和元素的位置、向元素上添加并定义边框。不过一旦你牢固掌握了即便是CSS最基础的部分，也没有很多做不到的事情。学习CSS最棒的一件事情就是，一旦你知道了基本的原理，即使你实际上不知道怎么做，你通常还是会很清楚什么能做到而什么不能做到！</p>
<h2 id="参阅">参阅</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt>
<dd>MDN 上css文档的主要入口，包括详细的参考到高级的教程一系列内容。</dd>
</dl>
|
