From aa753656fb9cab430100756008e519f3c1c61dc8 Mon Sep 17 00:00:00 2001 From: Flex Zhong Date: Wed, 25 Aug 2021 22:53:43 +0800 Subject: Improve translation in Learn/CSS/First_steps/Getting_started, zh-CN (#2225) --- .../css/first_steps/getting_started/index.html | 54 +++++++++++----------- 1 file changed, 27 insertions(+), 27 deletions(-) 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 index d8a315fba4..7b8a7aacd8 100644 --- a/files/zh-cn/learn/css/first_steps/getting_started/index.html +++ b/files/zh-cn/learn/css/first_steps/getting_started/index.html @@ -17,7 +17,7 @@ original_slug: Learn/CSS/First_steps/开始

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

-

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

+

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

前置知识

@@ -26,19 +26,19 @@ original_slug: Learn/CSS/First_steps/开始

目标

-

先从HTML开始吧

+

先从 HTML 开始吧

-

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

+

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

<!doctype html>
 <html lang="en">
@@ -71,25 +71,25 @@ original_slug: Learn/CSS/First_steps/开始
 
温馨提示：假设你电脑操作环境不方便创建文件运行代码，别担心，可以用我们下方给出的在线实时代码编辑器。

 
 
-
添加CSS试试看？

+
添加 CSS 试试看？

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

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

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

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

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

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

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

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

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

 
 
h1 {
   color: red;
 }

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

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

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

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

 
 
样式化 HTML 元素

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

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

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

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

 
@@ -185,7 +185,7 @@ span.special {
   font-size: 200%;
 }
-

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

+

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

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

@@ -211,18 +211,18 @@ a:visited { text-decoration: none; } -

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

+

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

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

-

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

+

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

-

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

+

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

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

-

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

+

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

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

@@ -243,15 +243,15 @@ h1 + ul + p { ... } padding: 5px; } -

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

+

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

-

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

+

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

-

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

+

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

总结

-

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

+

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

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

@@ -260,9 +260,9 @@ h1 + ul + p { ... }

在此模块

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