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 --- .../first_steps/how_css_is_structured/index.html | 167 +++++++++++++++++++++ .../learn/css/first_steps/how_css_works/index.html | 121 +++++++++++++++ .../index.html | 105 +++++++++++++ .../index.html | 115 ++++++++++++++ .../conflicting/learn/css/first_steps/index.html | 59 ++++++++ 5 files changed, 567 insertions(+) create mode 100644 files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html create mode 100644 files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html create mode 100644 files/zh-cn/conflicting/learn/css/first_steps/index.html (limited to 'files/zh-cn/conflicting/learn/css/first_steps') diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..17553c5013 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,167 @@ +--- +title: 创建可读性良好的CSS +slug: Web/Guide/CSS/Getting_started/Readable_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}}这是CSS入门教程系列教程的第6部分； 本节讨论了CSS语言自身的样式及语法。你可以更改CSS示例文件的代码外观，来使其更具可读性。

+ +

资料：创建可读性良好的 CSS

+ +

你可以通过添加空白字符和注释来提高样式表的可读性。你也可以把不同的选择器放到一组中来，这样同一样式可以应用到这一组中。

+ +

空白字符

+ +

空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来提高样式表的可读性。

+ +

对页面而言，空白字符也是页面的一个组成部分，它的效果就是创造了边距、分割，还有行和列间的空白。

+ +

如果你的样式表中一行只有一条规则，那这是使用空白字符最少的情况。但是，对于复杂的样式表而言，这可能不便于阅读，而且维护起来也比较困难。

+ +

样式表的书写风格可以根据你自己的喜好来选择。但是，如果你开发的项目需要分享给他人，那就很有必要来制定一些书写规范。

+ +
+
示例
+ +

有人喜欢我们这里使用的紧凑的书写风格，但是如果规则较长的时候就需要来进行分割：

+ +
.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+ +

也有人喜欢下面这种每行只写一个属性-值的风格：

+ +
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+ +

还有人喜欢缩进（两个空格、四个空格，或者tab键是最常用的方式）：

+ +
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+ +

还有人喜欢这种垂直对齐的方式（这种方式比较难维护）：

+ +
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+ +

有些人混合使用空白字符来提高可读性：

+ +
.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+
+
+ +

而且，在使用的空白字符的时候，有人喜欢用tab键，有人喜欢使用空格。

+ +

注释

+ +

CSS注释以/* 开始，以 */结束。

+ +

你可以在样式表中写些实际意义的注释，也可以是为了测试的目的而写的临时性的注释内容。

+ +

对于样式表中的注释内容一定要写在注释标签内，这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。

+ +
+
示例
+ +
/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+ +

选取器组

+ +

当很多元素具有相同的样式时，你就需要定义一个选择器组，组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。

+ +

在样式表的其他地方，你也可以单独对这些选择器重新设置样式，这些样式会应用到相应的选择器上。

+ +
+
示例
+ +

这条规则将 {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, 和 {{ HTMLElement("h3") }} 匹配到的元素设置为相同颜色。

+ +

将定义颜色的规则写在一个地方是正确的，因为有些时候，这个颜色值可能需要统一修改。

+ +
/* color for headings */
+h1, h2, h3 {color: navy;}
+
+
+ +

实践：添加注释来提高展现力

+ +
    +
  1. 编辑你的样式表，将下面的几条规则添加进去（规则顺序可以任意设置）： + 
    strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
    +
    2. +
  2. 为了让代码变得可读性更高，你需要通过分析其中的联系来对代码重新排序，并选择你认为最合适的方式来添加一些空白字符和注释。
    3. +
  3. 保存文件并刷新浏览器页面，要确保你更改后代码不影响原来的显示效果： + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    4. +
+ +
+
挑战
+ +

将你的样式表中的部分内容改为注释，以使文档的第一个字母颜色变为红色，但是注意不要改变其他任何内容：

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

（这个不止一种解决方案。）

+ +
+
一种解决方法：
+其中一种解决办法就是给.carrot添加注释： + +
.carrot {
+  color: orange;
+}
+
+A more specific selector, p#second also works. Hide solution
+查看解决方案
+ +

接下来是什么?

+ +

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式") }} 本节中，你的示例样式使用了 italic 文本以及 underlined 文本。 下一节将描述更多的方式来 详细指定文本的外观 。

diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..fce3091715 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,121 @@ +--- +title: CSS如何工作 +slug: Web/Guide/CSS/Getting_started/How_CSS_works +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为何使用CSS？") }}这是 CSS Getting Started 教程的第三章; 这章解释了CSS在浏览器中是如何工作的。 你可以通过分析示例代码来看看样式表中的详细信息。

+ +

信息：CSS 如何工作

+ +

浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段：

+ +
    +
  1. 浏览器先将标记语言和CSS转换成DOM (文档对象模型)结构。 这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。
    2. +
  2. 最后浏览器把 DOM的内容展示出来。
    3. +
+ +

标记语言通过使用“元素”来定义文档结构。你需要使用一些以'<'开头和以'>'结尾的字符串，俗称tags，来构成元素。这些元素一般是在'< >'里加上元素名来作为起始tag，在'< >'里加上'/'和元素名的组合来构成结束tag。标记语言中规定，一些元素可以只有一个起始tag，或者构成元素的tag只有一个，但是这个tag里的名称后面必须要加个'/'。

+ +

元素也可以作为容器而存在，这样可以把其他元素放到这个元素的起始tag和结束tag之间。

+ +

DOM是一种树形结构。 每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器，但是，它可以作为子结点的父类结点而存在。

+ +
+
示例
+在示例代码中， 我们使用 <p> 标签和它的结束标签 </p> 构造了一个容器： + +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

实例

+ +

http://jsfiddle.net/djaniketster/6jbpS/

+ +

在这个 DOM中， P 结点是一个父结点，它的子结点包含了一些STRONG结点和文本结点。同时，STRONG结点各自也是父结点，它们也分别包含了一些文本结点作为子结点。

+ +
P
+├─STRONG
+│ └─"C"
+├─"ascading"
+├─STRONG
+│ └─"S"
+├─"tyle"
+├─STRONG
+│ └─"S"
+└─"heets"
+
+ +

理解 DOM 结构可以帮助你更好的去设计、调试、维护CSS，因为 DOM 结构就是你的CSS和文档内容融合而成的。

+ +

行动：分析DOM结构

+ +

使用 DOM Inspector

+ +

你需要使用特殊的软件来分析 DOM结构。在这里，假设你使用的是 Mozilla的 DOM Inspector (DOMi) 插件来分析一个 DOM结构。 下面的操作需要你提前安装插件才可以执行。

+ +
    +
  1. 使用 Mozilla 浏览器来打开示例文档。
    2. +
  2. 在浏览器菜单栏中，选择 工具 > 查看器，也可能是选择 工具> Web 开发者 > 查看器。 +
    +
    更多细节
    + +

    如果你的 Mozilla 浏览器没有安装 DOMi，你可以到 安装地址 来安装并重启浏览器，然后再回到这里继续学习。

    + +

    如果你不想安装 DOMi (或者你使用的是非Mozilla浏览器)，那么你可以试试下个章节中介绍的 Web X-Ray Goggles。 你也可以直接跳过本章节，进行下一章的学习，这并不会影响你接下来的学习内容。

    +
    +
    3. +
  3. 你可以在 DOMi中通过点击文档结点前面的箭头来将他们展开。 +

    注意:  HTML 文件中的空格在 DOMi 中会显示为一些空的文本结点，你可以直接忽略掉它。

    + +

    通过展开元素结点，你可能会看到下面这样的一部分内容：

    + + 
    │ ▼╴P
+│ │ │ ▼╴STRONG
+│ │ └#text
+│ ├╴#text
+│ ►╴STRONG
+│ │
    + +

    选择任何元素都可以在 DOMi 右边的面板中找到关于这个元素更详细的信息。例如，当你选择一个文本结点的时候，右边面板中会显示这个结点的文本信息。

    + +

    如果你选择的结点是一个元素，那么 DOMi 会分析这个元素，并在右边面板中展示关于它的一大堆信息内容。同时，样式信息只是这些内容的一部分罢了。 

    +
    4. +
+ +
+
挑战
+ +

在 DOMi 中，点击一个 STRONG 结点。

+ +

在 DOMi的右边面板中找出，设置此结点颜色为红色的地方和设置结点内容加粗的地方。 

+ +
+
Possible solution
+ +

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

+Hide solution
+查看挑战的解决方案
+ +

使用 Web X-Ray Goggles

+ +

Web X-Ray Goggles 显示的信息内容相比较 DOM Inspector要少， 但是它安装和使用的步骤更简单。

+ +

到 Web X-Ray Goggles的主页。

+ +
    +
  1. 将页面中的书签链接拖拽到浏览器工具栏。
    2. +
  2. 打开你的示例 HTML 文档。
    3. +
  3. 通过点击工具栏中的相应书签来激活Web X-Ray Goggles。 
    4. +
  4. 通过在文档中移动鼠标箭头来查看相应的文档元素。
    5. +
+ +

What next?

+ +

{{ nextPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承") }}如果你做过上文中的练习，你会发现不同位置的style样式是相互影响共同生成了元素的最终展现。在 下一章 中将会深入解释这种相互联系和相互影响。

diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html new file mode 100644 index 0000000000..ca5092f2af --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html @@ -0,0 +1,105 @@ +--- +title: 为何使用CSS？ +slug: Web/Guide/CSS/Getting_started/Why_use_CSS +tags: + - CSS + - 'CSS:入门' + - NeedsLiveSample +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/CSS/开始/What_is_CSS", "什么是CSS?") }}这是CSS入门教程 的第二章节，解释了CSS与文档的关系。在下面的练习中，你将学习如何给你在第一章节中创建的示例文档添加CSS样式表。

+ +

信息: 为何使用CSS？

+ +

CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知，如何展现文档的细节即为样式(style)。您可以将样式从它的内容分离出来，以便您能够：

+ + + +
+
例如
+ +

您的网站可能有成千上万的页面外观相似。使用CSS，您可以将样式信息存储在公共的文件中以供所有的页面共用。

+ +

当用户显示页面时，用户的浏览器将样式信息和页面内容一同加载。

+ +

当用户打印页面时，您可以提供不同的样式信息，以便于打印出来的页面更易于阅读。

+
+ +

总之，在HTML中，您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。 (在本教程后续内容中，您会看到此种的例外情况。)

+ +
+
更多的细节
+ +

像HTML之类的标记语言也会提供指定样式的方法。

+ +

例如，在HTML中，您可以使用<b>标签来加粗文字，同时，您也可以在页面的<body>标记中指定背景颜色。

+ +

当您使用CSS时，您通常要避免使用标记语言的这些特性，以便您所有的文档样式信息保存在同一地方。

+
+ +

行动：创建样式表

+ +
    +
  1. 在与前面相同的目录中，新建另一个文本文件。该文件将成为您的样式表。请将它命名为：style1.css
    2. +
  2. 在您的CSS文件中，复制、粘贴下面的行，并保存该文件: + 
    strong {color: red;}
+
    +
    3. +
+ +

连接您的文档和样式表

+ +
    +
  1. 为将您的文档和样式表相连，请编辑您的HTML文件。并添加下面高亮的行： + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    2. +
  2. 保存该文件并刷新您的浏览器。该样式表将首字母显示为红色，如下所示： + + + + + + +
    Cascading Style Sheets
    +
    3. +
+ +
+
挑战
+ +

除了红色外，CSS允许使用其它的颜色名称。

+ +

不查询参考手册，请在您使用的样式表找出五个以上的颜色名称。

+ +
+
Possible solution
+ +

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

+Hide solution
+请参考解答。
+ +

下一节？

+ +

{{nextPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作。")}}现在您将示例文档与独立的样式表连在了一起，您已准备好学习更多的关于您的浏览器在显示文档时如何将它们组合在一起。

diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html new file mode 100644 index 0000000000..7fcb01c0b0 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html @@ -0,0 +1,115 @@ +--- +title: What is CSS +slug: Web/Guide/CSS/Getting_started/What_is_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +
{{CSSTutorialTOC}}
+ +

{{previousPage("/zh-CN/docs/CSS/开始", "开始")}} 作为 CSS 入门指南 教程的第一部分，本文解释了什么是 CSS。你需要创建一个文档以便用于接下来的学习。

+ +

资料: 什么是 CSS

+ +

Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。

+ +

文档 是信息的集合，它使用一门 标记语言 作为结构。

+ +

将一篇文档 呈现 给用户是指将文档转换成你的听众能够使用的一种形式。火狐、Chrome或IE等浏览器，用于将文档以可视的形式进行呈现，如在计算机屏幕、投影仪或打印机上。

+ +
+
示例
+ + +
+ +

在该教程中，如果使用像下方这样标题为 更多细节 的框，里面会包含额外信息。如果你迫切的想完成整个教程，那么可以跳过这些方框，等到以后有时间再回来看。当然也可以在碰到方框的时候去阅读这些内容，或者更进一步的，按照里面提供的链接去了解更多细节。

+ +
+
更多细节
+ +

一个文档并不等同于一个文件。它甚至可能不会保存在一个文件中。

+ +

举例来说，你现在阅读的这个文档就不是保存在一个文件中。当你的浏览器请求该页面时，服务器会查询数据库生成文档，将散落在众多文件中的文档的碎片搜集起来。然而在本教程中，你使用的都是保存在文件中的文档。

+ +

关于文档与标记语言的更多信息，可以查看本网站的其他部分—例如：

+ + + + + + + + + + + + + + + + + + + + +
HTML用于 web 页面
XML用于结构化文档
SVG用于图形
XUL用于 Mozilla 中的用户界面
+ +

在教程的第二部分，你会看到使用这些标记语言的例子。

+
+ +

 为用户展现 文档意味着将其转换成一个可读性良好的格式。像 Firefox， Chrome 或是 Internet Explorer 这样的浏览器倾向于使用更视觉化的方式来展现文档 — 例如，在计算机屏幕，投影仪或是打印机上。

+ +
+
更多细节
+ +

CSS 并非仅仅用于浏览器，也不仅限于视觉展现。按照 CSS 的正式术语来讲，将文档呈现给用户的程序称为用户代理(UA)。浏览器只是用户代理的其中之一。不过在教程的第一部分中，你将只在浏览器中使用 CSS。

+ +

要了解更多 CSS 术语定义的相关内容，请查看 CSS 规范的 定义。

+
+ +

动手：创建一个文档

+ +
    +
  1. 在你的电脑中创建一个新的文件夹，用于保存和管理本指南中的练习。
    2. +
  2. 打开你的文本编辑器并创建一个新文件。该文件将用于保存后续练习中的文档。
    3. +
  3. 将下面的内容复制粘贴进文本文件中。保存文件，将其命名为 doc1.html + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    4. +
  4. 在你的浏览器中开启一个新的标签页或窗口，打开文件。 +

    你会看到一串开头字母大写的文本，像这样：

    + + + + + + + +
    Cascading Style Sheets
    + +

    由于你的浏览器与该 wiki 的设置可能不同，所以你看到的内容与上面显示的不一定相符合。如果在字体、间距或颜色有区别，请不要担心，因为这些内容暂时无关紧要。

    +
    5. +
+ +

接下来是什么？

+ +

{{nextPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为什么使用 CSS?")}}现在你的文档中还没有使用 CSS。在下一节中，你将会使用 CSS 来指定样式。

diff --git a/files/zh-cn/conflicting/learn/css/first_steps/index.html b/files/zh-cn/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..585243aa2a --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,59 @@ +--- +title: CSS入门教程 +slug: Web/Guide/CSS/Getting_started +tags: + - CSS + - 'CSS:Getting_Started' + - CSS入门 + - CSS教程 + - Web + - 初学者 + - 教程 +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

 

+ +

该  CSS 指南  将会带你进入  层叠样式表  (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。

+ +

本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页  列出了  更多的高级资源。

+ + + +

在开始学习之前你需要准备什么？

+ + + +

虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。

+ +

注意： 教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与正常色觉。

+ +

如何使用本指南

+ +

在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。

+ +

第一部分：CSS基础

+ +

在每页中，通过资料 部分来了解 CSS 的工作原理。通过实践 部分来试着在你的计算机上使用 CSS。

+ +

为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。

+ +

为了深入了解 CSS，可以阅读以更多资料 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。

+ +

第二部分：CSS的应用范围

+ +

指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。

+ +
    +
  1. JavaScript
    2. +
  2. SVG 图形
    3. +
  3. XML 数据
    4. +
  4. XBL bindings
    5. +
  5. XUL 用户界面
    6. +
+ +

 

-- cgit v1.2.3-54-g00ecf