From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../index.html" | 162 ------------- .../css/first_steps/getting_started/index.html | 267 +++++++++++++++++++++ .../learn/css/first_steps/how_css_works/index.html | 162 +++++++++++++ .../\345\274\200\345\247\213/index.html" | 267 --------------------- 4 files changed, 429 insertions(+), 429 deletions(-) delete mode 100644 "files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" create mode 100644 files/zh-cn/learn/css/first_steps/getting_started/index.html create mode 100644 files/zh-cn/learn/css/first_steps/how_css_works/index.html delete mode 100644 "files/zh-cn/learn/css/first_steps/\345\274\200\345\247\213/index.html" (limited to 'files/zh-cn/learn/css/first_steps') diff --git "a/files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" "b/files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" deleted file mode 100644 index 7aafcf481f..0000000000 --- "a/files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: CSS如何运行 -slug: Learn/CSS/First_steps/CSS如何运行 -tags: - - CSS - - DOM - - 入门 - - 无效的CSS代码 - - 解析 -translation_of: Learn/CSS/First_steps/How_CSS_works ---- -

{{LearnSidebar}}
- {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

我们已经知道了CSS是做什么的以及怎么写简单的样式这样基础的CSS，接下来我将了解到浏览器如何获取CSS、HTML和将他们加载成网页。

- - - - - - - - - - - - -
前置知识:基础计算机知识、基本软件安装、简单文件知识、HTML基础
目标:理解浏览器如何加载CSS和HTML、浏览器遇到无法解析的CSS会发生什么
- -

CSS究竟是怎么工作的？

- -

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

- -
    -
  1. 浏览器载入HTML文件（比如从网络上获取）。
    2. -
  2. 将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。
    3. -
  3. 接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理，简单起见，同时此节主讲CSS，所以这里对如何加载JavaScript不会展开叙述。
    4. -
  4. 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
    5. -
  5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
    6. -
  6. 网页展示在屏幕上（这一步被称为着色）。
    7. -
- -

结合下面的图示更形象：

- -

- -

关于DOM

- -

一个DOM有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM或DOM node）。节点由节点本身和其他DOM节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。

- -

对于DOM的理解会很大程度上帮助你设计、调试和维护你的CSS，因为DOM是你的CSS样式和文件内容的结合。当你使用浏览器F12调试的时候你需要操作DOM以查看使用了哪些规则。

- -

一个真实的DOM案例

- -

不同于很长且枯燥的案例，这里我们通过一个HTML片段来了解HTML怎么转化成DOM

- -

以下列HTML代码为例：

- -
<p>
-  Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
-
- -

在这个DOM中，<p>元素对应了父节点，它的子节点是一个text节点和三个对应了<span>元素的节点，SPAN节点同时也是他们中的Text节点的父节点。

- -
P
-├─ "Let's use:"
-├─ SPAN
-|  └─ "Cascading"
-├─ SPAN
-|  └─ "Style"
-└─ SPAN
-   └─ "Sheets"
-
- -

上图就是浏览器怎么解析之前那个HTML片段——它生成上图的DOM树形结构并将它按照如下输出到浏览器：

- -

{{EmbedLiveSample('一个真实的DOM案例', '100%', 55)}}

- - - -

应用CSS到DOM

- -

接下来让我们看看添加一些CSS到文件里加以渲染，同样的HTML代码：

- -
<p>
-  Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
- -

以下为CSS代码：

- -
span {
-  border: 1px solid black;
-  background-color: lime;
-}
- -

浏览器会解析HTML并创造一个DOM，然后解析CSS。可以看到唯一的选择器就是span元素选择器，浏览器处理规则会非常快！把同样的规则直接使用在三个<span>标签上，然后渲染出图像到屏幕。

- -

现在的显示如下：

- -

{{EmbedLiveSample('应用CSS到DOM', '100%', 55)}}

- -

在我们下一个模块的 Debugging CSS 文章中我们将会使用F12调试CSS的问题并且更进一步的了解浏览器如何解析CSS。

- -

当浏览器遇到无法解析的CSS代码会发生什么

- -

在之前的文章中我们提到了浏览器并不会同时实现所有的新CSS，此外很多人也不会使用最新版本的浏览器。鉴于CSS一直不断的开发，因此领先于浏览器可以识别的范围，那么你也许会好奇当浏览器遇到无法解析的CSS选择器或声明的时候会发生什么呢？

- -

答案就是浏览器什么也不会做，继续解析下一个CSS样式！

- -

如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的CSS声明。在你书写了错误的CSS代码（或者误拼写），又或者当浏览器遇到对于它来说很新的还没有支持的CSS代码的时候上述的情况同样会发生（直接忽略）。

- -

相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个CSS选择器。

- -

在下面的案例中，我使用会导致属性错误的英式拼写来书写"color"，所以我的段落没有被渲染成蓝色，而其他的CSS代码会正常执行，只有错误的部分会被忽略。

- -
-
<p> I want this text to be large, bold and blue.</p>
- -
p {
-  font-weight: bold;
-  colour: blue; /* incorrect spelling of the color property */
-  font-size: 200%;
-}
-
- -

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

- -

这样做好处多多，代表着你使用最新的CSS优化的过程中浏览器遇到无法解析的规则也不会报错。当你为一个元素指定多个CSS样式的时候，浏览器会加载样式表中的最后的CSS代码进行渲染（样式表，优先级等请读者自行了解），也正因为如此，你可以为同一个元素指定多个CSS样式来解决有些浏览器不兼容新特性的问题（比如指定两个width）。

- -

这一特点在你想使用一个很新的CSS特性但是不是所有浏览器都支持的时候（浏览器兼容）非常有用，举例来说，一些老的浏览器不接收calc()(calculate的缩写，CSS3新增，为元素指定动态宽度、长度等，注意此处的动态是计算之后得一个值)作为一个值。我可能使用它结合像素为一个元素设置了动态宽度（如下），老式的浏览器由于无法解析忽略这一行；新式的浏览器则会把这一行解析成像素值，并且覆盖第一行指定的宽度。

- -
.box {
-  width: 500px;
-  width: calc(100% - 50px);
-}
- -

后面的课程我们会讨论更多关于浏览器兼容的问题。

- -

最后

- -

恭喜你完成本模块，下面的文章你将会使用你的新知识来完成覆盖样式的案例，在这个过程中测试一些CSS样式。

- -

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

模块目标

- -
    -
  1. 什么是CSS
    2. -
  2. 入门CSS
    3. -
  3. CSS的结构
    4. -
  4. CSS如何运行
    5. -
  5. 使用新知识
    6. -
diff --git a/files/zh-cn/learn/css/first_steps/getting_started/index.html b/files/zh-cn/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..0a6087ee12 --- /dev/null +++ b/files/zh-cn/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,267 @@ +--- +title: 让我们开始CSS的学习之旅 +slug: Learn/CSS/First_steps/开始 +tags: + - CSS + - 元素 + - 初学者 + - 学习 + - 类 + - 选择器 +translation_of: Learn/CSS/First_steps/Getting_started +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

+
+ +

在这篇文章中，我们将会拿一个简单的HTML文档做例子，并且在上边使用CSS样式，期待你能在此过程中学会更多有关CSS的实战性知识。

+ +

前置知识

+ +

在开始本单元之前，您应该：

+ + + +

目标

+ + + +

先从HTML开始吧

+ +

我们先以HTML文档展开叙述。如果想在自己电脑试一试，可以copy下面的代码。在你的电脑上，将代码以文件名： index.html 的形式保存下来。

+ +
<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>开始学习CSS</title>
+</head>
+
+<body>
+
+    <h1>我是一级标题</h1>
+
+    <p>这是一个段落文本. 在文本中有一个 <span>span element</span>
+并且还有一个 <a href="http://example.com">链接</a>.</p>
+
+    <p>这是第二段. 包含了一个 <em>强调</em> 元素.</p>
+
+    <ul>
+        <li>项目1</li>
+        <li>项目2</li>
+        <li>项目 <em>三</em></li>
+    </ul>
+
+</body>
+
+</html>
+
+ +
+

温馨提示：假设你电脑操作环境不方便创建文件运行代码，别担心，可以用我们下方给出的在线实时代码编辑器。

+
+ +

添加CSS试试看？

+ +

我们最想做的就是让HTML文档能够遵守我们给它的CSS规则。 其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接CSS。

+ +

在与之前所说的HTML文档的相同目录创建一个文件，保存并命名为 styles.css 。（看后缀知道此文件就是CSS文件）

+ +

为了把 styles.css 和 index.html 联结起来，可以在HTML文档中，{{htmlelement("head")}}语句模块里面加上下面的代码：

+ +
<link rel="stylesheet" href="styles.css">
+ +

 {{htmlelement("link")}} 语句块里面，我们用属性rel，让浏览器知道有CSS文档存在（所以需要遵守CSS样式的规定），并利用属性 href 指定，寻找CSS文件的位置。 你可以做测试来验证CSS是否有效：在 styles.css 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。

+ +
h1 {
+  color: red;
+}
+ +

保存HTML和CSS文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。如果看到这个现象，我得恭喜你：你已经成功将某些CSS样式运用到HTML上了。当然假设没有达到预想结果，可以仔细检查每句代码是否正确，加油：）

+ +

你可以一直在本地编辑器练习 styles.css ，或者采用我们教程下面的交互式智能编辑器。这个编辑器会默认把第一个面板里面的CSS代码联结到旁边的HTML文档，就好像我们上面得两个文档一样互相联结。

+ +

样式化 HTML 元素

+ +

通过上一节将大标题变成红色的例子，我们已经展示了我们可以选中并且样式化 HTML 元素。我们通过触发元素选择器实现这一点——元素选择器，即直接匹配 HTML 元素的选择器。例如，若要样式化一个文档中所有的段落，只需使用选择器 p。若要将所有段落变成绿色，你可以利用如下方式：

+ +
p {
+  color: green;
+}
+ +

用逗号将不同选择器隔开，即可一次使用多个选择器。譬如，若要将所有段落与列表变成绿色，只需：

+ +
p, li {
+    color: green;
+}
+ +

您可以在下面的互动式文本编辑器上试试看，当然您也可以在本地的 CSS 文档上尝试。

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

+ +

改变元素的默认行为

+ +

只要一个 HTML 文档标记正确，即使像我们的例子那么简单，浏览器都会尽全力将其渲染至可读状态。标题默认使用大号粗体；列表旁总有项目符号。这是因为浏览器自带一个包含默认样式的样式表，默认对任何页面有效。没有了它们，所有文本会夹杂在一起变得一团糟，我们只得从头开始规定，好糟糕。话说回来，所有现代浏览器的默认样式都没什么差距。

+ +

不过你可能对浏览器的默认样式不太满意。没关系，只需选定那个元素，加一条 CSS 规则即可。就拿我们的无序列表 <ul>举个例子吧，它自带项目符号，不过要是你跟它有仇，你就可以这样移除它们：

+ +
li {
+  list-style-type: none;
+}
+ +

把上述代码加到你的 CSS 里面试一试！

+ +

欢迎参阅 MDN 上的 list-style-type 属性，看看到底有哪些值被支持。 list-style-type 页首提供互动性示例，您可以输入不同的值来瞅一瞅它们到底有什么用。关于每个值的详细描述都规规整整地列在下面。

+ +

通过参阅上述页面，你会发现你不仅能移除项目符号——你甚至能改变它们。赶快试试 square，它能把默认的小黑球变成方框框。

+ +

使用类名

+ +

目前为止，我们通过 HTML 元素名规定样式。如果你愿意所有元素都一个样，也不是不可以，但大多数情况下，我估计你都不愿意。我知道你想干啥，你想用这种方式样式化这一片元素，又想用那种方式样式化那一片元素，真贪心。不过没关系，你可以给 HTML 元素加个类名（class），再选中那个类名，这样就可以了，大家基本上都这么用。

+ +

举个例子吧，咱们把 class 属性加到表里面第二个对象。你的列表看起来应该是这样的：

+ +
<ul>
+  <li>项目一</li>
+  <li class="special">项目二</li>
+  <li>项目 <em>三</em></li>
+</ul>
+ +

在 CSS 中，要选中这个 special 类，只需在选择器的开头加个西文句点（.）。在你的 CSS 文档里加上如下代码：

+ +
.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

保存再刷新，就可以看到变化。

+ +

这个 special 类型可不局限于列表，它可以应用到各种元素上。举个例子，你可能也想让段落里边的 <span> 一起又橙又粗起来。试试把special 类属性加上去，保存，刷新，哇，生活就是这么美好。

+ +

有时你会发现选择器中，HTML 元素选择器跟类一起出现：

+ +
li.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

这个意思是说，“选中每个 special 类的 li 元素”。 你真要这样，好了，它对 <span> 还有其它元素不起作用了。你可以把这个元素再添上去就是了：

+ +
li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

你们都是懒人，肯定不想每加一个 special 类的元素就改一遍 CSS 表，你肯定想把一个类的属性应用到多个元素上。所以说，有时还是别管元素，光看类就完事了，除非你意志坚定，坚持对这个类的某一种元素创造规则，还不让其它元素用。

+ +

根据元素在文档中的位置确定样式

+ +

有时候，您希望某些内容根据它在文档中的位置而有所不同。这里有很多选择器可以为您提供帮助，但现在我们只介绍几个选择器。在我们的文档中有两个 <em>元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在<li> 元素内的<em>我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。

+ +

将以下规则添加到样式表。

+ +
li em {
+  color: rebeccapurple;
+}
+ +

该选择器将选择<li>内部的任何<em>元素（<li>的后代）。因此在示例文档中，您应该发现第三个列表项内的<em>现在是紫色，但是在段落内的那个没发生变化。

+ +

另一些可能想尝试的事情是在HTML文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 + 号 (成为 相邻选择符) 

+ +

也将这个规则添加到样式表中：

+ +
h1 + p {
+  font-size: 200%;
+}
+ +

下面的示例包含了上面的两个规则。 尝试添加规则使位于段落中的span变为红色。如果正确您将看到在第一段中的span会变为红色，但是第一个列表项中的span不会改变颜色。

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

+ +
+

Note: 如你所见，CSS 给我们提供了几种定位元素的方法。到目前为止，我们只触及了皮毛！我们将对这些选择器进行适当的研究，更多的内容将在我们后面的Selectors章节中介绍。

+
+ +

根据状态确定样式

+ +

在这篇教程中我们最后要看的一种修改样式的方法就是根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式时。 当我们修改一个链接的样式时我们需要定位（针对） <a> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用CSS去定位或者说针对这些不同的状态进行修饰——下面的CSS代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。

+ +
a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}
+ +

你可以改变链接被鼠标悬停的时候的样式，例如移除下划线，下面的代码就实现了这个功能。

+ +
a:hover {
+  text-decoration: none;
+}
+ +

在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。— 换个更好的颜色吧。你能将链接变为黑体吗?

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

+ +

我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线.。但需要注意的是，对一个实际的站点，需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的，最好保留link状态下的下划线。— 这是下划线的本来作用。不管你用CSS来做什么，都应当使得变化后的文档看上去更加清晰明了。— 在后面，当我们遇到类似的情况时，我们将适时指出。

+ +
+

注: 在本教程以及整个MDN站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当每一个访客都能够理解、使用。

+ +

你的访客可能在一台使用鼠标和键盘操作的计算机前，也可能正在使用带有触摸屏的手机，或者正在使用屏幕阅读软件读出文档内容，或者他们需要使用更大的字体，或者仅仅使用键盘浏览站点。

+ +

一个朴素的HTML文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。

+
+ +

将选择子和关系选择器组合起来

+ +

你可以将多个选择子和关系选择器组合起来。来看一些例子：

+ +
/* selects any <span> that is inside a <p>, which is inside an <article>  */
+article p span { ... }
+
+/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
+h1 + ul + p { ... }
+ +

你可以将多种类型组合在一起。试试将下面的代码添加到你的代码里：

+ +
body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}
+ +

上面的代码为以下元素建立样式：在<body>之内，紧接在<h1>后面的<p>元素的内部，类名为special。

+ +

在我们提供的原始HTML文档中，与之符合的元素只有<span class="special">.

+ +

如果你现在觉得这份代码太复杂了，别担心，— 一旦你开始编写更多的CSS代码，你很快就能找到窍门。

+ +

总结

+ +

在本教程中，我们学习了使用CSS为文档添加样式的几种方法。在教程的剩下部分，我们将继续这个话题。不过，你现在已经有了足够的知识为文本建立样式；根据目标元素的不同用不同的方式应用样式；在MDN文档中查找属性和值。

+ +

在下一节中，我们将看到样式表的结构是什么样的。

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

+ +

在此模块

+ +
    +
  1. 什么是CSS?
    2. +
  2. 开始学习CSS
    3. +
  3. CSS代码是如何组织的
    4. +
  4. CSS是如何工作的
    5. +
  5. 开始使用你的新知识
    6. +
diff --git a/files/zh-cn/learn/css/first_steps/how_css_works/index.html b/files/zh-cn/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..7aafcf481f --- /dev/null +++ b/files/zh-cn/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,162 @@ +--- +title: CSS如何运行 +slug: Learn/CSS/First_steps/CSS如何运行 +tags: + - CSS + - DOM + - 入门 + - 无效的CSS代码 + - 解析 +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{LearnSidebar}}
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

我们已经知道了CSS是做什么的以及怎么写简单的样式这样基础的CSS，接下来我将了解到浏览器如何获取CSS、HTML和将他们加载成网页。

+ + + + + + + + + + + + +
前置知识:基础计算机知识、基本软件安装、简单文件知识、HTML基础
目标:理解浏览器如何加载CSS和HTML、浏览器遇到无法解析的CSS会发生什么
+ +

CSS究竟是怎么工作的？

+ +

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

+ +
    +
  1. 浏览器载入HTML文件（比如从网络上获取）。
    2. +
  2. 将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。
    3. +
  3. 接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理，简单起见，同时此节主讲CSS，所以这里对如何加载JavaScript不会展开叙述。
    4. +
  4. 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
    5. +
  5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
    6. +
  6. 网页展示在屏幕上（这一步被称为着色）。
    7. +
+ +

结合下面的图示更形象：

+ +

+ +

关于DOM

+ +

一个DOM有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM或DOM node）。节点由节点本身和其他DOM节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。

+ +

对于DOM的理解会很大程度上帮助你设计、调试和维护你的CSS，因为DOM是你的CSS样式和文件内容的结合。当你使用浏览器F12调试的时候你需要操作DOM以查看使用了哪些规则。

+ +

一个真实的DOM案例

+ +

不同于很长且枯燥的案例，这里我们通过一个HTML片段来了解HTML怎么转化成DOM

+ +

以下列HTML代码为例：

+ +
<p>
+  Let's use:
+  <span>Cascading</span>
+  <span>Style</span>
+  <span>Sheets</span>
+</p>
+
+ +

在这个DOM中，<p>元素对应了父节点，它的子节点是一个text节点和三个对应了<span>元素的节点，SPAN节点同时也是他们中的Text节点的父节点。

+ +
P
+├─ "Let's use:"
+├─ SPAN
+|  └─ "Cascading"
+├─ SPAN
+|  └─ "Style"
+└─ SPAN
+   └─ "Sheets"
+
+ +

上图就是浏览器怎么解析之前那个HTML片段——它生成上图的DOM树形结构并将它按照如下输出到浏览器：

+ +

{{EmbedLiveSample('一个真实的DOM案例', '100%', 55)}}

+ + + +

应用CSS到DOM

+ +

接下来让我们看看添加一些CSS到文件里加以渲染，同样的HTML代码：

+ +
<p>
+  Let's use:
+  <span>Cascading</span>
+  <span>Style</span>
+  <span>Sheets</span>
+</p>
+ +

以下为CSS代码：

+ +
span {
+  border: 1px solid black;
+  background-color: lime;
+}
+ +

浏览器会解析HTML并创造一个DOM，然后解析CSS。可以看到唯一的选择器就是span元素选择器，浏览器处理规则会非常快！把同样的规则直接使用在三个<span>标签上，然后渲染出图像到屏幕。

+ +

现在的显示如下：

+ +

{{EmbedLiveSample('应用CSS到DOM', '100%', 55)}}

+ +

在我们下一个模块的 Debugging CSS 文章中我们将会使用F12调试CSS的问题并且更进一步的了解浏览器如何解析CSS。

+ +

当浏览器遇到无法解析的CSS代码会发生什么

+ +

在之前的文章中我们提到了浏览器并不会同时实现所有的新CSS，此外很多人也不会使用最新版本的浏览器。鉴于CSS一直不断的开发，因此领先于浏览器可以识别的范围，那么你也许会好奇当浏览器遇到无法解析的CSS选择器或声明的时候会发生什么呢？

+ +

答案就是浏览器什么也不会做，继续解析下一个CSS样式！

+ +

如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的CSS声明。在你书写了错误的CSS代码（或者误拼写），又或者当浏览器遇到对于它来说很新的还没有支持的CSS代码的时候上述的情况同样会发生（直接忽略）。

+ +

相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个CSS选择器。

+ +

在下面的案例中，我使用会导致属性错误的英式拼写来书写"color"，所以我的段落没有被渲染成蓝色，而其他的CSS代码会正常执行，只有错误的部分会被忽略。

+ +
+
<p> I want this text to be large, bold and blue.</p>
+ +
p {
+  font-weight: bold;
+  colour: blue; /* incorrect spelling of the color property */
+  font-size: 200%;
+}
+
+ +

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

+ +

这样做好处多多，代表着你使用最新的CSS优化的过程中浏览器遇到无法解析的规则也不会报错。当你为一个元素指定多个CSS样式的时候，浏览器会加载样式表中的最后的CSS代码进行渲染（样式表，优先级等请读者自行了解），也正因为如此，你可以为同一个元素指定多个CSS样式来解决有些浏览器不兼容新特性的问题（比如指定两个width）。

+ +

这一特点在你想使用一个很新的CSS特性但是不是所有浏览器都支持的时候（浏览器兼容）非常有用，举例来说，一些老的浏览器不接收calc()(calculate的缩写，CSS3新增，为元素指定动态宽度、长度等，注意此处的动态是计算之后得一个值)作为一个值。我可能使用它结合像素为一个元素设置了动态宽度（如下），老式的浏览器由于无法解析忽略这一行；新式的浏览器则会把这一行解析成像素值，并且覆盖第一行指定的宽度。

+ +
.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}
+ +

后面的课程我们会讨论更多关于浏览器兼容的问题。

+ +

最后

+ +

恭喜你完成本模块，下面的文章你将会使用你的新知识来完成覆盖样式的案例，在这个过程中测试一些CSS样式。

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

模块目标

+ +
    +
  1. 什么是CSS
    2. +
  2. 入门CSS
    3. +
  3. CSS的结构
    4. +
  4. CSS如何运行
    5. +
  5. 使用新知识
    6. +
diff --git "a/files/zh-cn/learn/css/first_steps/\345\274\200\345\247\213/index.html" "b/files/zh-cn/learn/css/first_steps/\345\274\200\345\247\213/index.html" deleted file mode 100644 index 0a6087ee12..0000000000 --- "a/files/zh-cn/learn/css/first_steps/\345\274\200\345\247\213/index.html" +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: 让我们开始CSS的学习之旅 -slug: Learn/CSS/First_steps/开始 -tags: - - CSS - - 元素 - - 初学者 - - 学习 - - 类 - - 选择器 -translation_of: Learn/CSS/First_steps/Getting_started ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

-
- -

在这篇文章中，我们将会拿一个简单的HTML文档做例子，并且在上边使用CSS样式，期待你能在此过程中学会更多有关CSS的实战性知识。

- -

前置知识

- -

在开始本单元之前，您应该：

- - - -

目标

- - - -

先从HTML开始吧

- -

我们先以HTML文档展开叙述。如果想在自己电脑试一试，可以copy下面的代码。在你的电脑上，将代码以文件名： index.html 的形式保存下来。

- -
<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>开始学习CSS</title>
-</head>
-
-<body>
-
-    <h1>我是一级标题</h1>
-
-    <p>这是一个段落文本. 在文本中有一个 <span>span element</span>
-并且还有一个 <a href="http://example.com">链接</a>.</p>
-
-    <p>这是第二段. 包含了一个 <em>强调</em> 元素.</p>
-
-    <ul>
-        <li>项目1</li>
-        <li>项目2</li>
-        <li>项目 <em>三</em></li>
-    </ul>
-
-</body>
-
-</html>
-
- -
-

温馨提示：假设你电脑操作环境不方便创建文件运行代码，别担心，可以用我们下方给出的在线实时代码编辑器。

-
- -

添加CSS试试看？

- -

我们最想做的就是让HTML文档能够遵守我们给它的CSS规则。 其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接CSS。

- -

在与之前所说的HTML文档的相同目录创建一个文件，保存并命名为 styles.css 。（看后缀知道此文件就是CSS文件）

- -

为了把 styles.css 和 index.html 联结起来，可以在HTML文档中，{{htmlelement("head")}}语句模块里面加上下面的代码：

- -
<link rel="stylesheet" href="styles.css">
- -

 {{htmlelement("link")}} 语句块里面，我们用属性rel，让浏览器知道有CSS文档存在（所以需要遵守CSS样式的规定），并利用属性 href 指定，寻找CSS文件的位置。 你可以做测试来验证CSS是否有效：在 styles.css 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。

- -
h1 {
-  color: red;
-}
- -

保存HTML和CSS文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。如果看到这个现象，我得恭喜你：你已经成功将某些CSS样式运用到HTML上了。当然假设没有达到预想结果，可以仔细检查每句代码是否正确，加油：）

- -

你可以一直在本地编辑器练习 styles.css ，或者采用我们教程下面的交互式智能编辑器。这个编辑器会默认把第一个面板里面的CSS代码联结到旁边的HTML文档，就好像我们上面得两个文档一样互相联结。

- -

样式化 HTML 元素

- -

通过上一节将大标题变成红色的例子，我们已经展示了我们可以选中并且样式化 HTML 元素。我们通过触发元素选择器实现这一点——元素选择器，即直接匹配 HTML 元素的选择器。例如，若要样式化一个文档中所有的段落，只需使用选择器 p。若要将所有段落变成绿色，你可以利用如下方式：

- -
p {
-  color: green;
-}
- -

用逗号将不同选择器隔开，即可一次使用多个选择器。譬如，若要将所有段落与列表变成绿色，只需：

- -
p, li {
-    color: green;
-}
- -

您可以在下面的互动式文本编辑器上试试看，当然您也可以在本地的 CSS 文档上尝试。

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

- -

改变元素的默认行为

- -

只要一个 HTML 文档标记正确，即使像我们的例子那么简单，浏览器都会尽全力将其渲染至可读状态。标题默认使用大号粗体；列表旁总有项目符号。这是因为浏览器自带一个包含默认样式的样式表，默认对任何页面有效。没有了它们，所有文本会夹杂在一起变得一团糟，我们只得从头开始规定，好糟糕。话说回来，所有现代浏览器的默认样式都没什么差距。

- -

不过你可能对浏览器的默认样式不太满意。没关系，只需选定那个元素，加一条 CSS 规则即可。就拿我们的无序列表 <ul>举个例子吧，它自带项目符号，不过要是你跟它有仇，你就可以这样移除它们：

- -
li {
-  list-style-type: none;
-}
- -

把上述代码加到你的 CSS 里面试一试！

- -

欢迎参阅 MDN 上的 list-style-type 属性，看看到底有哪些值被支持。 list-style-type 页首提供互动性示例，您可以输入不同的值来瞅一瞅它们到底有什么用。关于每个值的详细描述都规规整整地列在下面。

- -

通过参阅上述页面，你会发现你不仅能移除项目符号——你甚至能改变它们。赶快试试 square，它能把默认的小黑球变成方框框。

- -

使用类名

- -

目前为止，我们通过 HTML 元素名规定样式。如果你愿意所有元素都一个样，也不是不可以，但大多数情况下，我估计你都不愿意。我知道你想干啥，你想用这种方式样式化这一片元素，又想用那种方式样式化那一片元素，真贪心。不过没关系，你可以给 HTML 元素加个类名（class），再选中那个类名，这样就可以了，大家基本上都这么用。

- -

举个例子吧，咱们把 class 属性加到表里面第二个对象。你的列表看起来应该是这样的：

- -
<ul>
-  <li>项目一</li>
-  <li class="special">项目二</li>
-  <li>项目 <em>三</em></li>
-</ul>
- -

在 CSS 中，要选中这个 special 类，只需在选择器的开头加个西文句点（.）。在你的 CSS 文档里加上如下代码：

- -
.special {
-  color: orange;
-  font-weight: bold;
-}
- -

保存再刷新，就可以看到变化。

- -

这个 special 类型可不局限于列表，它可以应用到各种元素上。举个例子，你可能也想让段落里边的 <span> 一起又橙又粗起来。试试把special 类属性加上去，保存，刷新，哇，生活就是这么美好。

- -

有时你会发现选择器中，HTML 元素选择器跟类一起出现：

- -
li.special {
-  color: orange;
-  font-weight: bold;
-}
- -

这个意思是说，“选中每个 special 类的 li 元素”。 你真要这样，好了，它对 <span> 还有其它元素不起作用了。你可以把这个元素再添上去就是了：

- -
li.special,
-span.special {
-  color: orange;
-  font-weight: bold;
-}
- -

你们都是懒人，肯定不想每加一个 special 类的元素就改一遍 CSS 表，你肯定想把一个类的属性应用到多个元素上。所以说，有时还是别管元素，光看类就完事了，除非你意志坚定，坚持对这个类的某一种元素创造规则，还不让其它元素用。

- -

根据元素在文档中的位置确定样式

- -

有时候，您希望某些内容根据它在文档中的位置而有所不同。这里有很多选择器可以为您提供帮助，但现在我们只介绍几个选择器。在我们的文档中有两个 <em>元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在<li> 元素内的<em>我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。

- -

将以下规则添加到样式表。

- -
li em {
-  color: rebeccapurple;
-}
- -

该选择器将选择<li>内部的任何<em>元素（<li>的后代）。因此在示例文档中，您应该发现第三个列表项内的<em>现在是紫色，但是在段落内的那个没发生变化。

- -

另一些可能想尝试的事情是在HTML文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 + 号 (成为 相邻选择符) 

- -

也将这个规则添加到样式表中：

- -
h1 + p {
-  font-size: 200%;
-}
- -

下面的示例包含了上面的两个规则。 尝试添加规则使位于段落中的span变为红色。如果正确您将看到在第一段中的span会变为红色，但是第一个列表项中的span不会改变颜色。

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

- -
-

Note: 如你所见，CSS 给我们提供了几种定位元素的方法。到目前为止，我们只触及了皮毛！我们将对这些选择器进行适当的研究，更多的内容将在我们后面的Selectors章节中介绍。

-
- -

根据状态确定样式

- -

在这篇教程中我们最后要看的一种修改样式的方法就是根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式时。 当我们修改一个链接的样式时我们需要定位（针对） <a> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用CSS去定位或者说针对这些不同的状态进行修饰——下面的CSS代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。

- -
a:link {
-  color: pink;
-}
-
-a:visited {
-  color: green;
-}
- -

你可以改变链接被鼠标悬停的时候的样式，例如移除下划线，下面的代码就实现了这个功能。

- -
a:hover {
-  text-decoration: none;
-}
- -

在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。— 换个更好的颜色吧。你能将链接变为黑体吗?

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

- -

我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线.。但需要注意的是，对一个实际的站点，需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的，最好保留link状态下的下划线。— 这是下划线的本来作用。不管你用CSS来做什么，都应当使得变化后的文档看上去更加清晰明了。— 在后面，当我们遇到类似的情况时，我们将适时指出。

- -
-

注: 在本教程以及整个MDN站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当每一个访客都能够理解、使用。

- -

你的访客可能在一台使用鼠标和键盘操作的计算机前，也可能正在使用带有触摸屏的手机，或者正在使用屏幕阅读软件读出文档内容，或者他们需要使用更大的字体，或者仅仅使用键盘浏览站点。

- -

一个朴素的HTML文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。

-
- -

将选择子和关系选择器组合起来

- -

你可以将多个选择子和关系选择器组合起来。来看一些例子：

- -
/* selects any <span> that is inside a <p>, which is inside an <article>  */
-article p span { ... }
-
-/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
-h1 + ul + p { ... }
- -

你可以将多种类型组合在一起。试试将下面的代码添加到你的代码里：

- -
body h1 + p .special {
-  color: yellow;
-  background-color: black;
-  padding: 5px;
-}
- -

上面的代码为以下元素建立样式：在<body>之内，紧接在<h1>后面的<p>元素的内部，类名为special。

- -

在我们提供的原始HTML文档中，与之符合的元素只有<span class="special">.

- -

如果你现在觉得这份代码太复杂了，别担心，— 一旦你开始编写更多的CSS代码，你很快就能找到窍门。

- -

总结

- -

在本教程中，我们学习了使用CSS为文档添加样式的几种方法。在教程的剩下部分，我们将继续这个话题。不过，你现在已经有了足够的知识为文本建立样式；根据目标元素的不同用不同的方式应用样式；在MDN文档中查找属性和值。

- -

在下一节中，我们将看到样式表的结构是什么样的。

- -

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

- -

在此模块

- -
    -
  1. 什么是CSS?
    2. -
  2. 开始学习CSS
    3. -
  3. CSS代码是如何组织的
    4. -
  4. CSS是如何工作的
    5. -
  5. 开始使用你的新知识
    6. -
-- cgit v1.2.3-54-g00ecf