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 --- .../conflicting/learn/common_questions/index.html | 10 + .../cascade_and_inheritance/index.html | 125 +++++ .../learn/css/building_blocks/index.html | 331 ++++++++++++++ .../learn/css/building_blocks/selectors/index.html | 414 +++++++++++++++++ .../css/building_blocks/styling_tables/index.html | 509 +++++++++++++++++++++ .../building_blocks/values_and_units/index.html | 333 ++++++++++++++ .../conflicting/learn/css/css_layout/index.html | 368 +++++++++++++++ .../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 +++ .../learn/css/styling_text/fundamentals/index.html | 156 +++++++ .../index.html | 158 +++++++ .../css/styling_text/styling_lists/index.html | 324 +++++++++++++ .../javascript_basics/index.html | 294 ++++++++++++ .../creating_hyperlinks/index.html | 86 ++++ .../video_and_audio_content/index.html | 275 +++++++++++ files/zh-cn/conflicting/learn/index.html | 172 +++++++ .../manipulating_documents/index.html | 172 +++++++ .../learn/javascript/objects/index.html | 362 +++++++++++++++ .../learn/server-side/django/index.html | 111 +++++ 22 files changed, 4767 insertions(+) create mode 100644 files/zh-cn/conflicting/learn/common_questions/index.html create mode 100644 files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/zh-cn/conflicting/learn/css/building_blocks/index.html create mode 100644 files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html create mode 100644 files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/zh-cn/conflicting/learn/css/css_layout/index.html 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 create mode 100644 files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html create mode 100644 files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html create mode 100644 files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html create mode 100644 files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html create mode 100644 files/zh-cn/conflicting/learn/index.html create mode 100644 files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html create mode 100644 files/zh-cn/conflicting/learn/javascript/objects/index.html create mode 100644 files/zh-cn/conflicting/learn/server-side/django/index.html (limited to 'files/zh-cn/conflicting/learn') diff --git a/files/zh-cn/conflicting/learn/common_questions/index.html b/files/zh-cn/conflicting/learn/common_questions/index.html new file mode 100644 index 0000000000..53aac91402 --- /dev/null +++ b/files/zh-cn/conflicting/learn/common_questions/index.html @@ -0,0 +1,10 @@ +--- +title: Web 工程学 +slug: learn/Web_Mechanics +tags: + - Web 工程学 + - 初学者 +translation_of: Learn/Common_questions +translation_of_original: Learn/Web_Mechanics +--- +

请访问 常见问题

diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..e5a3bae8a0 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,125 @@ +--- +title: 层叠和继承 +slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作")}} 这是 开始学CSS 教程的第4节; 这一节介绍了样式表中元素如何从父级继承样式，以及不同层级的样式如何相互作用决定最终显示效果。教给你通过在样式表中添加级联样式语句，进一步控制页面元素的展现。

+ +

资料: 层叠和继承

+ +

一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。

+ +

对于层叠来说，共有三种主要的样式来源：

+ + + +

用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。在这个教程中，你作为网页的开发者只需要关注开发者样式。

+ +
+
示例
+ +

就你现在看到的这个页面而言，有一部分样式是来自浏览器定义的默认的HTML样式。

+ +

有一部分样式可能来自用户通过浏览器自定义的样式，或者为浏览器引入自定义的样式表。例如，在Firefox中，在“首选项”对话框中可以自定义样式，也可以建立一个单独的userContent.css 样式文件并放到“用户配置”的文件夹中。

+ +

另外，还有一部分样式来自外链的wiki服务器上的样式表。

+
+ +

在浏览器中打开前面写的例子页面，你会发现 {{ HTMLElement("strong") }} 元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式。

+ +

而{{ HTMLElement("strong") }} 元素是红色的，这是你在自己的样式表中定义的样式。

+ +

同时，{{ HTMLElement("strong") }} 作为 {{ HTMLElement("p") }} 的子元素，也继承了 {{ HTMLElement("p") }} 的样式。同样的， {{ HTMLElement("p") }} 也从 {{ HTMLElement("body") }} 中继承了许多的样式。

+ +

再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。

+ +

对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。

+ +

当然，关于优先级还有更多的知识点，我们会在后面的章节中继续介绍。

+ +
+
更多细节
+ +

CSS 另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。

+ +

这就意味着，作为开发者，你很难准确的预知页面最终在用户电脑上的显示效果。

+ +

如果你想了解关于层级和继承的全部细节，请阅读CSS文档中的相关章节（英文）：Assigning property values, Cascading, and Inheritance。

+
+ +

动手: 使用继承

+ +
    +
  1. 编辑你之前创建的style.css文件。
    2. +
  2. 把下面这行代码粘到以前的文件中，粘在之前的代码的上面或下面都可以。 不过，加在css文件的头部会更符合逻辑一些，因为在页面中 {{ HTMLElement("p") }} 是 {{ HTMLElement("strong") }} 的父级元素: + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. 现在刷新你的浏览器，应该可以看到页面的变化。页面里所有的文本应该都被加上了下划线，也包括大写的首字母。{{ HTMLElement("strong") }} 从它的父级元素 {{ HTMLElement("p") }} 上继承到了下划线的样式。
    + +

    但是，{{ HTMLElement("strong") }} 元素仍然是红色的。红色是它本身的样式，所以优先级会超过父级元素 {{ HTMLElement("p") }} 的蓝色.

    +
    4. +
+ + +
+ + + + + + + + +
修改前
Cascading Style Sheets
+ + + + + + + + +
修改后
Cascading Style Sheets
+ +
+
挑战
+改动一下样式表，完整如下效果：只在红色的字母上加下划线： + + + + + + + +
Cascading Style Sheets
+ +
+
参考答案
+ +

把定义在 {{ HTMLElement("p") }} 标签上的下划线样式移到 {{ HTMLElement("strong") }} 标签上。改后代码如下：

+ +
p {color: blue; }
+strong {color: red; text-decoration: underline;}
+
+ +

 

+隐藏答案
+查看参考答案
+ +

下一节?

+ +

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}} 到目前为止，你在样式表中所有的样式都是为标签上的，<p> 和 <strong>，你可以尝试着改变一下页面中它们的样式。下一节会介绍怎样通过更有效的方式定义样式。

diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..0bfb7e2ed5 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,331 @@ +--- +title: 盒模型 +slug: Web/Guide/CSS/Getting_started/Boxes +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}这是 CSS入门教程 的第11节，本节教你如何使用CSS来控制一个可见元素所占据的空间。在示例文档中，你可以修改元素占据的空间并增加装饰规则。

+ +

信息：盒模型

+ +

当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。

+ +

中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。

+ + + + + + + + +
+
+

外边距

+ +

边框

+ +
+

内边距

+ +
+

元素

+
+
+
+ +

浅灰色标出了布局的几个部分。

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

元素

+
+
+
+ +

你在浏览器看到的样子。

+
+ +

内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。

+ +

颜色

+ +

内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。

+ + + + + + + + +
+
+

外边距

+ +

边框

+ +
+

内边距

+ +
+

元素

+
+
+
+ +

元素有绿色的背景。

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

元素

+
+
+
+ +

你在浏览器看到的样子。

+
+ +

边框

+ +

你可以用边线或者边框来装饰元素。

+ +

用 {{ cssxref("border") }} 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。

+ +

样式包括：

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

你也可以通过设置样式为 none 或 hidden 来明确地移除边框，或者设置边框颜色为 transparent 来让边框不可见，后者不会改变布局。

+ +

如果一次只指定某一个方向的边框，就用属性： {{ cssxref("border-top") }}， {{ cssxref("border-right") }}， {{cssxref("border-bottom")}}， {{cssxref("border-left")}}。 你可以用这些属性指定某个方向上的边框，或者不同方向上的不同边框。

+ +
+
例子
+ +

下面的代码设置了一个h3元素的背景色和顶部边框：

+ +
h3 {
+  border-top: 4px solid #7c7; /* 中绿 */
+  background-color: #efe;     /* 浅绿 */
+  color: #050;                /* 深绿 */
+  }
+
+ +

结果如下：

+ + + + + + + +
+

样式化后的标题

+
+ +

下面的规则通过给图片四周设置中灰色边框，使得图片元素更好辨认：

+ +
img {border: 2px solid #ccc;}
+
+ +

结果如下：

+ + + + + + + + +
图片:Image:Blue-rule.png
+
+ +

外边距和内边距

+ +

使用外边距和内边距调整元素的位置，并在其周围创建空间。

+ +

用 {{ cssxref("margin") }} 属性或者 {{ cssxref("padding") }} 属性分别设置外边距和内边距的宽度。

+ +

如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。

+ +

如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。

+ +

你也可以按照顺序指定四个宽度： 上、右、下、左。

+ +
+
例子
+ +

下面的规则通过给元素四周设置红色边框，标记出了类名为  remark 的段落元素。

+ +

文本周围的内边距将边框与文字拉开一点距离。

+ +

左外边距使得段落相对于其余文本产生缩进：

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

结果如下：

+ + + + + + + +
+

这是一个普通的段落。

+ +

这是一个标记段落。

+
+
+ +
+
更多细节
+ +

当你使用外边距和内边距来调整元素的布局时，你的样式规则会与浏览器的默认规则以复杂的方式相互作用。

+ +

不同的浏览器布局元素的方式不一样。直到你的样式表修改默认样式，结果可能看起来相似。有时这可能让你的样式表给出令人惊讶的结果。

+ +

为了达到理想的效果，你可能需要改变文档的标记。本教程的下一页有更多关于这个的信息。

+ +

欲知更多关于内边距，外边距和边框的细节， 请看 盒模型 参考页。

+
+ +

实践：添加边框

+ +

编辑你的CSS文件，style2.css。添加下面的规则，给页面中每个标题元素上面画一条线：

+ +
h3 {border-top: 1px solid gray;}
+
+ +

如果你做了前一页的挑战题，现在修改你已经创建的规则，或者添加这条新规则，给每个列表项的下面增加一定的空间：

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

刷新你的浏览器看看效果：

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
挑战
+ +

给你的样式表添加一个规则，为下面的海洋列表增加 一个四面环绕且带有颜色的边框，来突出海洋——如下图所示：

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

 

+ +

（不必完全保证宽度和颜色和这里的一模一样。）

+
+ +

看答案。

+ +

下一节?

+ +

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局") }}通过指定外边距和内边距，你已经能修改文档的布局了。下一页，你将使用别的方式来改变文档的布局 。

diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..69f0700b19 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,414 @@ +--- +title: 选择器 +slug: Web/Guide/CSS/Getting_started/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承")}}这是 CSS入门教程 的第五节; 本节将讲述如何应用样式；不同的选择器有不同的优先级；你在样例文档中为标签增加一些属性，在样式中使用这些属性。

+ +

资料: 选择器（Selectors）

+ +

CSS有一套用于描述其语言的术语。在前面的教程中，你应该已经写过这个样式：

+ +
strong {
+  color: red;
+}
+
+ +

在CSS的术语中，上面这段代码被称为一条规则（rule）。这条规则以选择器strong开始，它选择要在DOM中哪些元素上使用这条规则。

+ +
+
更多细节
+ +

花括号中的部分称为声明（declaration）

+ +

关键字color是一个属性, red 是其对应的值.

+ +

同一个声明中的 属性和值组成一个名值对（property-value pairs），名值对用分号分隔.

+ +

这个教程中将类似strong的选择器称为标签选择器（tag selector）.CSS规范中称之为类型选择器（type selector）.

+
+ +

本节将介绍更多的选择器。

+ +

除了标签名称，你还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则.

+ +

其中 class 和 id 两个属性具有比较重要的地位。

+ +

类选择器（Class selectors）

+ +

通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。

+ +

在写样式表时，类选择器是以英文句号（.）开头的。

+ +

ID选择器（ID selectors）

+ +

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

+ +

在写样式表时，ID选择器是以#开头的。

+ +
+
例：
+下面的p标签同时具有 class 属性和id 属性: + +
<p class="key" id="principal">
+
+ +

id 属性值 principal必须在文档中是唯一的；但文档中的其他标签可以有和p相同的 class 属性值 key.

+ +

在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是 {{ HTMLElement("p") }} 元素。）

+ +
.key {
+  color: green;
+}
+
+ +

下面的规则将使 id 等于 principal 的那个元素的文字变为粗体:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。

+ +
+
更多细节
+ +

你也可以将多个选择器组合起来构成更确定的选择器。

+ +

比如，选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的{{ HTMLElement("p") }} 元素。

+ +

除了class 和 id，你还可以用方括号的形式指定其他属性。比如，选择器 [type='button'] 选中所有 type 属性为 button 的元素。

+
+ +

如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。

+ +

如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。

+ +

伪类选择器（Pseudo-classes selectors）

+ +

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，{{ Cssxref(":hover") }} 会在鼠标悬停在选中元素上时应用相应的样式。

+ +

伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 ({{ cssxref(":visited") }})， 内容状态(如 {{ cssxref(":checked") }} ), 鼠标位置 (如{{ cssxref(":hover") }}). 完整列表参见 CSS3 Selectors working spec.

+ +
+
语法
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

伪类列表

+ + + +

资料: 基于关系的选择器

+ +

CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
常见的基于关系的选择器
选择器选择的元素
A E元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
A > E元素A的任一子元素E(也就是直系后代)
E:first-child任一是其父母结点的第一个子节点的元素E
B + E元素B的任一下一个兄弟元素E
B ~ EB元素后面的拥有共同父元素的兄弟元素E
+ +

你可以任意组合以表达更复杂的关系。

+ +

你还可以使用星号（*）来表示”任意元素“。

+ +
+
例
+ +

一个HTML表格有id 属性，但是它的行和单元格没有单独的id:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

下面的规则使表格每行的第一个单元格字体为粗体，使第二个单元格使用等宽字体。这条规则只影响id为data-table-1的表格:

+ +
    #data-table-1 td:first-child {font-weight: bolder;}
+    #data-table-1 td:first-child + td {font-family: monospace;}
+
+ +

最终效果:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
更多细节
+ +

一般情况下，如果你提高了某个选择器的的确定度，你便提高它的优先级。

+ +

使用这个技巧，可以避免为大量标签指定 class 或 id 属性。CSS（引擎）会帮你做的。

+ +

在复杂设计中速度非常重要，避免使用复杂的依赖元素关系的规则可以使你的样式更有效率。

+ +

更多关于表格的例子，见 Tables。

+
+ +

实例: 使用类选择器和ID选择器

+ +
    +
  1. 创建一个HTML文件
    2. +
  2. 将下面内容拷贝到HTML文件中 + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. 创建style1.css: + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    4. +
  4. 保存文件，在浏览器中查看效果: + + + + + + + + + +
    Cascading Style Sheets //此处应为斜体
    Cascading Style Sheets
    + +

    重新组织样式中规则的顺序，你会发现改变这几条规则的顺序不会影响最终效果。

    + +

    类选择器 .carrot 和.spinach 比标签选择器 strong 拥有更高优先级。

    + +

    ID 选择器 #first 比类选择器和标签选择器更优先。

    +
    5. +
+ +
+
挑战
+ +
    +
  1. 不改变HTML内容, 增加一条规则，不改变首字母颜色，将第二个p标签中的其他文字变成蓝色: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. 现在改变上面增加的那条规则（不改变其他任何内容）让第一个p标签中的其他文字也变成蓝色: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Possible solution
+ +
    +
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + + 
    #second { color: blue; }
+
    + A more specific selector, p#second also works.
    2. +
  2. Change the selector of the new rule to be a tag selector using p: + 
    p { color: blue; }
+
    +
    3. +
+Hide solution
+See a solution for the challenge.
+ +

实例: 使用伪类选择器

+ +
    +
  1. 创建如下 HTML: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    2. +
  2. 编辑CSS: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    3. +
  3. 保存文件用浏览器查看HTML文件 (将鼠标放到链接上查看效果): + + + + + + +
    Go to our Home page  
    +
    4. +
+ +

实例: 使用基于关系的选择器和伪类选择器

+ +

通过使用基于关系的选择器和伪类选择器，你可以构造出复杂的叠加算法。这是一个常用的技巧，比如可以用来创建纯CSS无JavaScript的下拉菜单（pure-CSS dropdown menus）。关键点就是创建下面这类规则：

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

然后将这些规则应用到下面的HTML结构中：

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

学习实例 CSS-based dropdown menu example.

+ +

接下来是什么?

+ +

你的样式表变得多而复杂。下面章节将讲述如何让样式表更 易读.{{nextPage("/zh-CN/docs/CSS/开始/Readable_CSS", "易读的 CSS")}}

diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..b6b4859e99 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,509 @@ +--- +title: 表格 +slug: Web/Guide/CSS/Getting_started/Tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +

{{CSSTutorialTOC}}{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Layout", "布局")}}

+ +

这是CSS入门教程的第13部分，将介绍更多高级的选择器，以及格式表格的一些特定方法。你将创建一个包含表格的新样例文档，然后对它进行样式排版。

+ +

信息: 表格

+ +

表格是一个矩形网格中的信息安排。一些表格相当复杂，不同的浏览器对复杂的表格将会有不同的展示结果。

+ +

当你设计你的文档时，使用一个表格来表示一系列信息的关系。因为信息的意义依然清晰，所以不同浏览器用稍微不同的方式来展示表格是没有关系的。

+ +

创建表格的时候，不要用一些非常规的方式构造特殊的可视化布局，本教程的前一页（布局）使用的技术可以更好的达成目的。

+ +

表格结构

+ +

在表格中，信息显示在一个个的单元格（cell）中.

+ +

在页面横向上一条直线的单元格构成了行（row）。

+ +

在一些表格中，行可能被分组。表格开始的特定的行组是表头 （header）。表格最后的特定行组是表尾（footer）。表格中主要的行就是表体（body），这些表体也可能被分组。

+ +

在页面纵向上一条直线的单元格构成了列（column），但是在CSS表格中，列的使用是受限的。

+ +
+
示例
+ +

在选择器那章的基于关系的选择器就是一个五行十个单元格的表格。

+ +

第一行是表头，其余四行是表体，没有表尾。

+ +

表中有两列。

+
+ +

本教程仅仅涵盖简单表格，其呈现结果完全可以预测。在一个简单表格里，每个单元格仅占用一行一列。你可以用CSS将一个单元格扩展到多行或者多列来构造复杂表格，但是这样的表格已超出了这个基本教程所讲述的范围。

+ +

边框

+ +

单元格没有外边距。

+ +

但是单元格有边框和内边距。默认情况下，边框被表格的{{cssxref("border-spacing")}}属性值间隔。你也可以通过设置表格的{{cssxref("border-collapse")}}属性值为collapse来完全移除间隔。

+ +
+
示例
+ +

这有三个表格。

+ +

左边的表格有0.5 em的边框间隔，中间的表格是0边框间隔，右边的表格是拥有collapse的边框。

+ +
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ + + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ + + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+ +

标题

+ +

{{HTMLElement("caption")}}元素是用在整个表格的一个标签。默认下，它显示在表格的顶部。

+ +

可以设置{{HTMLElement("caption")}}的{{cssxref("caption-side")}}属性值为bottom来将标签移到表格的底部。

+ +

想要样式化caption的文本，可以使用任何常规的文本属性。

+ +
+
示例
+ +

这个表格有一个在底部的标题。

+ +
#demo-table > caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+
+ + + + + + + +
+ + + + + + + +
Suits
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+
+ +

空单元格

+ +

你可以通过为表格元素指定{{cssxref("empty-cells")}}属性值show来显示空单元格（就是其边框和背景）。

+ +

你也可以指定empty-cells: hide;来隐藏边框和背景，那么如果一个单元格的父元素设置了背景，背景将通过空单元格显示出来。

+ +
+
实例
+ +

这些表格有苍绿色的背景，其单元格有苍灰色的背景和深灰色的边框。

+ +

左边的表格，空单元格是显示的。在右边，空单元格是隐藏的。

+ + + + + + + + +
+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+
+
+ +
+
细节
+ +

请查看CSS规范中的表格来获得更多关于表格的细节信息。

+ +

规范中有比该教程更进一步的信息，但它不包括浏览器可能会影响复杂表格之间的差异。

+
+ +

实例: 设计表格样式

+ +
    +
  1. 创建一个新的HTML文档, doc3.html。 复制粘贴以下内容，请确保通过滚动获取全部内容： + +
    + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample document 3</title>
+    <link rel="stylesheet" href="style3.css">
+  </head>
+  <body>
+    <table id="demo-table">
+      <caption>Oceans</caption>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Area</th>
+          <th>Mean depth</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>million km<sup>2</sup></th>
+          <th>m</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Arctic</th>
+          <td>13,000</td>
+          <td>1,200</td>
+        </tr>
+        <tr>
+          <th>Atlantic</th>
+          <td>87,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Pacific</th>
+          <td>180,000</td>
+          <td>4,000</td>
+        </tr>
+        <tr>
+          <th>Indian</th>
+          <td>75,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Southern</th>
+          <td>20,000</td>
+          <td>4,500</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th>Total</th>
+          <td>361,000</td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>Mean</th>
+          <td>72,000</td>
+          <td>3,800</td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
+
    +
    +
    2. +
  2. 创建一个新的样式表 style3.css。复制粘贴一些内容，通过滚动获取全部内容： + 
    /*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table > caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table > tfoot td {
+  background-color: #cee;
+}
+
+#demo-table > tfoot > tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+
    +
    3. +
  3. 在浏览器打开文档，它将看起来像下面一样： + + + + + + +
    +
    +

    Oceans

    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     AreaMean depth
     million km2m
    Arctic:13,0001,200
    Atlantic:87,0003,900
    Pacific:180,0004,000
    Indian:75,0003,900
    Southern:20,0004,500
    Total:361,000 
    Mean:72,0003,800
    +
    +
    +
    +
    4. +
  4. 对比样式表里显示表格的规则来确保你理解每一条规则的效果。如果你发现你不明白某一条，注释掉，然后刷新浏览器来看看发生什么。下面是关于该表格一些注意事项： +
      +
    • 标题是放在表格边框的外面的;
      • +
    • 如果你在可选项中设置了最小点尺寸，它可能会影响km2这样的上标;
      • +
    • 有三个空单元格，其中两个显示了表格的背景色，第三个有单元格自己的背景和上边框;
      • +
    • 冒号是通过样式表来添加的。
      • +
    +
    5. +
+ +
+
挑战
+ +

更改样式表来使表格像下面一样显示：

+ + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
+
+ +

Oceans

+
+
+
+ +

查看挑战的答案。

+ +

接下来?

+ +

{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Media", "媒体")}}这是本教程关于CSS属性和值的最后一页。请查看CSS规范中的完全属性表来获得完整的属性和值的信息。

+ +

下一页将再次着眼于CSS样式表的目的和结构。

+
diff --git a/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..a9348bd9bd --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,333 @@ +--- +title: Color +slug: Web/Guide/CSS/Getting_started/Color +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式")}}这是 CSS入门教程 系列的第8部分; 介绍了如何在你的CSS文件中运用颜色值. 在示例样式表中，介绍了背景颜色.

+ +

关于: 颜色

+ +

到目前为止，在这个系列中，都很少用到用名字命名的颜色属性。CSS2支持17种名字的颜色。其中有一些可能不像你期望的那样，如下图：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
blackgraysilverwhite
主要的redlimeblue
次要  yellowaquafuchsia
maroonorangeolivepurplegreennavyteal
+ + + +
+
细节
+ +
你的浏览器可能支持更多名字命名的颜色，比如：
+ +
+ + + + + + + + + + + + + + + + +
dodgerbluepeachpufftanfirebrickaquamarine
+ +

对于更多存在的名字的颜色命名, 你可以参看CSS 3颜色模块中的: SVG color keywords 部分. 一定要注意的是，使用名字命名颜色的时候，有可能用户的浏览器是不支持的。

+
+ +

对于更多地颜色，你可以使用代表红，绿，蓝三个颜色的16进制数字来表示。16进制数字的范围0-9，a-f。其中a-f代表的数值就是10-15：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
黑#000
纯 红#f00
纯 绿#0f0
纯 蓝#00f
白#fff
+ +


+ 要得到浏览器能够呈现的所有的颜色，你就得使用两个16进制来表示（也就是6位）:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
黑#000000
纯红#ff0000
纯绿#00ff00
纯蓝#0000ff
白#ffffff
+ +

你能够从你的画图程序或者其他的工具上得到6位的颜色数值.

+ +
+
例如
+ +

可以通过调整3位数字来得到不同的颜色:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
从纯红开始:#f00
让它淡一点，加一些绿色和蓝色:#f77
让它更偏橙色一些，多加一些绿色:#fa7
让它更深一些，所有的颜色部分，红，绿，蓝都要减少:#c74
让它的饱和度更低一些，所有的颜色值都调整到差不多大小:#c98
如果所有的颜色值都相等，那么就变成了灰色:#ccc
+ +

对于浅色，比如说淡蓝色:

+ + + + + + + + + + + + + + +
从纯白色开始:#fff
稍微降低一下各个颜色值:#eef
+
+ +
+
更多细节
+ +

还能够通过RGB值（0-255或者是百分比值），来得到颜色

+ +

比如，下面是深红色的RGB表示法:

+ +
rgb(128, 0, 0) 
+ +

对于如何指定颜色的所有信息，可以参看 CSS规范中的: Colors 部分.

+ +

更多关于系统颜色的说明，比如菜单、树等，可以参看CSS规范中得: CSS2 System Colors 部分.

+
+ +

颜色属性

+ +

你已经在文本中使用了 {{ cssxref("color") }} 属性.

+ +

同样可以使用{{ cssxref("background-color") }} 属性来改变元素的背景色.

+ +

背景色可以设置 transparent 属性来移除掉所有的颜色，呈现出父元素的背景色

+ +
+
例如
+ +

在本指南中，例如 文本框使用了淡黄色来表示背景色：

+ +
background-color: #fffff4;
+
+ +

更多细节 文本框使用了下面的淡灰色 :

+ +
background-color: #f4f4f4;
+
+
+ + + +

实践: 使用颜色代码

+ +
    +
  1. 编辑你的CSS文件.
    2. +
  2. 下面用粗体显示的部分，表示首字母用淡蓝色显示. (你的文件中的布局和注释可能与下面所示的不同。按照你喜欢的方式来组织它们吧！) + 
    /*** CSS 手册: 颜色页面 ***/
+
+/* 页面 字体 */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* 段落 */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* 首字母 */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;} 
    +
    3. +
  3. 保存文件，刷新浏览器看结果.
    4. +
+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
挑战
+ +

在你的CSS文件中，把所有的代码颜色的名字用3位16进制数字的方式表示出来.

+ +

(不能完全做出来，不过能够最的很接近。如果要准备的表示颜色名字的话，需要6位16进制你需要查一下CSS规范或者是工具来得到一致的颜色.)

+ +
+
Possible solution
+ +

The following values are reasonable approximations of the named colors:

+ +
strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+
+ + +Hide solution
+查看解决的方法.
+ +

下一步?

+ +

{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容")}}. 示例文本和示例样式表是严格分开的。在 下一节 将介绍在什么情况下可以允许他们不分开.

diff --git a/files/zh-cn/conflicting/learn/css/css_layout/index.html b/files/zh-cn/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..ecd91f80e1 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,368 @@ +--- +title: 布局 +slug: Web/Guide/CSS/Getting_started/Layout +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/CSS/开始/Boxes", "盒模型")}}本文是 CSS入门教程 的第12部分; 主要讲述一些修改页面布局的方法。 你可以通过学习来修改自己示例的布局。

+ +

说明: 布局

+ +

你可以通过 CSS 来设置布局的炫酷效果。其中所涉及的部分高阶技术并不是本文范畴。

+ +

当你设计一个简单布局时, 你的样式表与浏览器默认样式表之间的交互、以及与布局引擎的交互都是相当复杂的。 这也是一个高阶话题，并不在本文范畴。

+ +

本文主要介绍一些简单的布局方法。（高阶技术请参阅外部链接 学习高级布局）

+ +

文档结构

+ +

当你想控制文档布局时，就不得不改变它的结构。

+ +

页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用 {{ HTMLElement("div") }} 元素来创建结构。

+ +
+
示例
+ +

在你的示例中, 编号段落并没有自己的容器。

+ +

你的样式表无法为这些段落画出边框，因为没有选择器指向它们。

+ +

为了解决这个问题, 你可以在段落之外添加一个{{ HTMLElement("div") }} 。这个标签是唯一的，可以指定一个id属性来标识:

+ +
<h3>Numbered paragraphs</h3>
+<div id="numbered">
+  <p>Lorem ipsum</p>
+  <p>Dolor sit</p>
+  <p>Amet consectetuer</p>
+  <p>Magna aliquam</p>
+  <p>Autem veleum</p>
+</div>
+
+ +

现在可以通过样式表在每个列表周围画出边框了:

+ +
ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+
+ +

运行结果如下:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+
+ +

大小单位

+ +

到目前为止，你可以通过像素来指定大小。这在有些情况下是非常合适的，比如电脑屏幕显示。 但当用户改变字体大小之后，你的布局可能会发生错位。

+ +

因此，最好通过百分比或 ems (em) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时，你的布局会自己修正。

+ +
+
示例
+ +

文本左边的border通过像素来指定大小。

+ +

文本右边的border通过 ems来指定大小。

+ +

在你的浏览器中，修改字体大小，会发现右边的border会自己修正大小而左边的不会。:

+ + + + + + + +
+
RESIZE ME PLEASE
+
+
+ +
+
更多详情
+ +

对于其它设备，其它的长度单位可能更合适。

+ +

在本指南中会有其它篇幅详细介绍这一点。

+ +

更多详情参见CSS说明中 Values .

+
+ +

文本布局

+ +

有两个属性可以指定元素内容的对齐方式。你可以用它们来进行简单的布局:

+ +
+
{{ cssxref("text-align") }}
+
内容对齐。 可以使用下面几个值： left, right, center, justify。
+
{{ cssxref("text-indent") }}
+
指定内容缩进。
+
+ +

这两个属性可以应用于任何文本类内容，不只是纯文本。 需要注意的是，它们会被元素的子元素继承， 所以需要在子元素中将它们关闭，以免出现意想不到的效果。

+ +
+
示例
+ +

标题居中:

+ +
h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+
+ +

输出结果:

+ + + + + + + +
+

(A) The oceans

+
+ +

在 HTML 文档中, 标题之后的内容并不属于标题。当你对齐一个标题时，其后的元素不会继承该样式。

+
+ +

浮动

+ +

 {{ cssxref("float") }} 属性强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。

+ +

本文剩下部分都是围绕浮动元素展开。你可以使用 {{ cssxref("clear") }} 属性来避免其它元素受到浮动效果的影响。

+ +
+
示例
+ +

在你的示例中，list是根据窗口拉伸。你可以通过使用浮动元素来使它们靠左。

+ +

为了保证标题在正确的位置, 你必须为标题指定clear属性来避免标题靠左:

+ +
ul, #numbered {float: left;}
+h3 {clear: left;}
+
+
+ +

运行结果如下:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+ +

(box右侧需要增加一些padding ,防止文本与边框太近)

+ +

位置

+ +

你可以为一个元素指定  {{ cssxref("position") }} 属性为以下值之一，来设置其位置。

+ +

这些是高阶属性。 可以通过简单的方式来使用它们—这也是在基础教程里提到它们的原因。但使用它们来实现复杂的布局会相对困难一些。

+ +
+
relative
+
通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。
+
fixed
+
为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。
+
absolute
+
为元素指定相对于其父元素的确切位置。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
+
static
+
默认值。当明确要关闭位置属性时使用。
+
+ +

和 position 属性(除了 static)一起使用的, 有下列属性: top, right, bottom, left, width, height 通过设置它们来指定元素的位置或大小。

+ +
+
示例
+ +

为了放置两个元素，一个在另外一个上方, 创建一个父容器来包含两个子元素:

+ +
<div id="parent-div">
+  <p id="forward">/</p>
+  <p id="back">\</p>
+</div>
+
+ +

在你的样式表里，将父容器的position设置为 relative。无需为它设置任何具体变动。 将子元素的position属性设置为 absolute:

+ +
#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin:0px; /* no margin around the elements */
+  top: 0px; /* distance from top */
+  left: 0px; /* distance from left */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+
+ +

输出结果如下,反斜杠显示在斜杠上方

+ +
+

/

+ +

\

+
+ + + + + + + +
 
+
+ +
+
更多详情
+ +

更多详情的postion说明在 CSS Specification 中占用了两个章节: Visual formatting model 和 Visual formatting model details.

+ +

如果你的样式表工作在多种浏览器环境下，你会发现不同浏览器对标准协议的解释会有很多不同, 而且特定浏览器的特定版本可能存在BUG。

+
+ +

实践: 设置布局

+ +
    +
  1. 修改示例文档, doc2.html, 和样式表, style2.css, 使用之前的示例 文档结构 and 浮动.
    2. +
  2. 在 浮动 示例中, 添加padding 来分离文本和右侧border ,值设为0.5 em.
    3. +
+ +
+
挑战
+ +

修改示例文档, doc2.html, 在文档末尾添加一个标签, 注意在</body>之前。

+ +
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+ +

如果你在之前的教程中没有下载过该图片, 现在下载, 将它与示例文件放在同一目录下:

+ + + + + + + +
Image:Yellow-pin.png
+ +

预测一下你的图片将会出现在哪里，然后刷新浏览器验证一下。

+ +

在样式表中添加一条规则，将图片显示在文档右上角。

+ +

刷新浏览器并把窗口拉小。 查看图片是否在右上角，拖动容器大小，再次查看。

+ +
+
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +

 

+ +
Yellow map pin
+
+
+
+ +

 查看该挑战的解决方案。

+ +

接下来是什么？

+ +

{{ nextPage("/zh-CN/docs/CSS/开始/Tables", "表格") }}你几乎已经学习了这篇CSS基本教程的所有主题。接下来将描述更多CSS规则的高级选择器，以及你可以用来展示表格的一些特定方法。

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. +
+ +

 

diff --git a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..fd67fc382c --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,156 @@ +--- +title: 理解下划线 +slug: Understanding_Underlines +tags: + - 'CSS:Articles' +translation_of: >- + Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration +translation_of_original: Understanding_Underlines +--- +

对于 Web 设计者来说, 想移除其设计中某些 (或全部) 超链接的下划线是相当常见的事情。但是由于在过去浏览器中的一些不标准的行为, 一些人在删除超链接中下划线的正确方法方面存在一些问题。最常见的错误是这样做：

+ +
<a href="link.html">
+<span style="text-decoration: none;">一个链接</span>
+</a>
+ +

与大部分人的想法相反，这样去除下划线是不应该的。本文将会探讨去除下滑的正确方法及其原因。正确的处理下划线有很大的好处，譬如简洁的标签及高可读性的源代码。

+ +

文字是如何被加上修饰线（decoration）的

+ +

了解如何正确删除下划线之前，我们先了解一下修饰线（decoration 下同）是如何被应用的。首先，让我们先思考一个 span 在一个 p 中会是什么样子。

+ +
<p><span style="text-decoration: underline;">
+这里有一些文字
+</span></p>
+ +

很明显，就像下面所展示的：文字被加上了下划线。

+ + + +

这里有一些文字。

+ + + +

现在，让我们添加再添加一个 span 嵌套在之前的 span 里面。然后再给后加的 span 一个不一样的线样式：

+ +
<p><span style="text-decoration: underline;">
+这里有一些
+<span style="text-decoration: overline;">额外的</span>
+文字。
+</span></p>
+ + + +

这里有一些额外的文字。

+ + + +

我们发现此例的 “额外的” 一词出现了既有上划线也有下划线的情况。但是这为什么呢？我们仅给最里面 span 标签设置了上划线。text-decoration 的值并不会被继承。那么为什么 “额外的” 下面会有下划线呢？

+ +

现在让我们把最里面 span 的文字颜色（color 下同）改一下，比如红色，我们就能知道怎么回事了。

+ + + +

这里有一些额外的文字。

+ + + +

上划线和文字一起变成了红色，但是下划线并没有。这是因为下划线实际上是外面 span 的一部分，它只是在最里面 span 的下方经过而已。如果我们给外面的 span 加个背景，我们一般是希望背景也能穿过里面 span 显示出来。同样的，父级的文字修饰线就会显示在子级元素上，即使你并没有给子级元素设置或继承修饰线。

+ +

现在，让我们明确地移除里面 span 的修饰线样式。

+ +
<p><span style="text-decoration: underline;">
+这里有一些
+<span style="text-decoration: none; color: red;">额外的</span>
+文字。
+</span></p>
+ +

这样意味着不应有任何修饰线样式在里面的 span 上，但是这样并不会阻止外面的 span 显示下划线。这就和 “把里面 span 的背景设为透明并不会让我们看不到外面 span (或者 body 之类的) 的背景” 一样。我们可以在下面看见，下划线仍旧是外面 span 的颜色。

+ + + +

这里有一些额外的文字。

+ + + +

那么让我们考虑一下这种情况：你在一个超链接 a 里添加了一个 span ，如果你想移除链接的下划线。但是因为上面所说的原因，你是没办法这样达成目的：

+ +
<a href="http://developer.netscape.com/">这个链接
+<span style="text-decoration: none; font-weight: bold;">
+有个span
+</span>在里面</a>
+ + + + + + + +

因此，我们不能使用这种方式移除下划线，我们需要其他的方法。而这其他的方法比你想象的要简单许多。

+ +

如何真正地将下划线移除

+ +

答案很简单：如果你不希望超链接拥有下划线，那么请直接关闭该标签本身的下划线。通过覆写在链接中的span的样式来修改下划线是不会在正常的浏览器中起效的，这是一种多余的无用行为。

+ +

比方说，如果你想移除页面中所有超链接的下划线，那么最简单的办法是：

+ +
a:link, a:visited {text-decoration: none;}
+ +

另一个常见情况是仅从一组选定的链接中删除其中的下划线。比方说，在页面顶部的导航链接通常不会设有下划线。在这种情况下，你最好的选择是使用 class 或者 id 属性对目标元素进行分类，然后编写对应的样式。比方说，假设在下面的表格中有你希望修改的链接标签，那么给table本身追加一个id属性就是你首先需要做的。

+ +
<table id="navbar">
+<tr>
+<td><a href="link1.html">Home</a></td>
+<td><a href="link2.html">Electronics</a></td>
+<td><a href="link3.html">Accessories</a></td>
+<td><a href="link4.html">Software</a></td>
+<td><a href="link5.html">Checkout</a></td>
+</tr>
+</table>
+ +

有了 id 之后, 我们现在就可以为其编写一条CSS规则：

+ +

table#navbar a {text-decoration: none;}

+ +

这种方法最大的额外好处就是你可以基于此规则为这些链接扩展其他样式，比如：

+ +
table#navbar a {text-decoration: none; color: yellow;
+font: 10px sans-serif; letter-spacing: 1px; padding: 0 1em;}
+ +

当然，你也可以直接将你希望修改样式的链接赋上特定的 class ，在有些情况下这是十分有必要的。而且，在绝大多数情况下 ，使用与本页面类似的方法将有效地帮助到其他作者。Of course, you could put classes directly on the links you wish to style, and in some cases that's necessary. However, in the majority of cases, authors will be well served by an approach similar to the one shown here.

+ +

其他修饰线

+ +

本文重点介绍下划线，因为下划线是迄今为止在网络上使用的最常见的文本修饰。不过，此处讨论的原理适用于任何形式的装饰。如果文本设置了删除线样式，则该样式将穿透元素的文本以及任何子元素的文本，无论text-decoration的值是多少。举个例子：This article has focused on underlines because they are by far the most common text decoration in use on the Web. However, the principles discussed here apply to any form of decoration. If text is styled with a strike-through line, then that will run through the element's text and the text of any descendant elements, no matter what value they are given for text-decoration. As an example:

+ +
<p style="text-decoration: line-through;">
+This text has been
+<span style="text-decoration: none; color: red;">stricken</span>
+with a line.
+</p>
+ +

The text in this paragraph will all be stricken, although the word "stricken" will be red. This is shown in Figure 6.

+ + + +

结论

+ +

Although some browsers will let you get away with it, the use of span to "switch off" text decorations is not correct CSS and will not work in CSS-conformant browsers. Thus, many Web sites authored to proprietary behavior will not display as the designer intended in more recent browsers. Fortunately, there are several benefits to abandoning this legacy code practice in favor of directly styling hyperlinks.

+ +

建议

+ + + +
+

文章原始信息

+ + +
diff --git a/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html new file mode 100644 index 0000000000..f7d1d38b23 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/styling_text/fundamentals_5a3f2ce7cc4f23ec431e57a447af0711/index.html @@ -0,0 +1,158 @@ +--- +title: 文本样式 +slug: Web/Guide/CSS/Getting_started/Text_styles +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "创建可读性良好的CSS")}} 这是CSS入门教程系列教程的第7部分；本节讲述了更多的有关文本的样式。你可以通过更改示例样式来使用不同的字体。

+ +

资料：文本样式

+ +

CSS提供了几个属性用来操作字体。

+ +

我们先来看一个简写属性 {{ cssxref("font") }}，使用这个属性可以很方便的指定其他的字体属性。比如：

+ + + +
+
示例
+ +
p {font: italic 75%/125% "Comic Sans MS", cursive;}
+
+ +

这条规则定义了字体的几个属性，使整个段落文本都变成斜体。

+ +

字体大小设置为每个段落父元素字体大小的3/4，行高设置为125%（比常规的间隔稍大一些）。

+ +

文本字体设置为 Comic Sans MS，假如该字体不被浏览器支持则使用默认字体：cursive。

+ +

这条规则还把bold和small-caps这些效果给去掉了（设置它们的值为normal）。

+
+ +

 

+ +

字体

+ +

你无法预料到用户是否可以访问样式表里定义的字体。所以在设置字体时，在属性后指定一个替代的字体列表是个不错的主意。

+ +

在这个字体列表的最后加上系统字体中的一个，如：serif,sans-serif,cursive,fantasy或monospace。

+ +

如果字体不支持样式表里设置的字体特征，浏览器会使用另一种字体。比如，样式表中包含字体不支持的特殊字符，如果浏览器发现另一种字体支持这些特殊字符，那浏览器就会选择使用这种字体。

+ +

使用 {{ cssxref("font-family") }} 属性指定文本的字体。

+ +

简体中文的字体示例：

+ +

Windows：font-family:微软雅黑;

+ +

Mac OS：font-family:"Songti SC";

+ +

字号

+ +

浏览器用户浏览页面时，可以覆盖页面默认的文号大小，也可以改变页面的字号大小。所以说尽可能的使用相对的字号大小对你来说是有意义的。

+ +

你可使用系统内置的值来设置字号，比如small,medium和large。你也可以使用相对父元素字号大小的值来设置，比如：smaller,larger,150%或1.5em。1“em”等于1个字母“m”的宽度（相对于父元素字号大小）;因此1.5em就是1.5倍的父元素字号大小。

+ +

如果有必要你也可以指定一个实际的大小，比如14px(14像素)应用于显示设备或14pt(14点)应用于打印设备。但是实际大小不能应用于视力受损用户的设备上，因为这些设备不支持指定实际的值。一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium，然后再给它的子元素设置个相对值。

+ +

使用{{ cssxref("font-size") }} 属性指定字体的大小。

+ +

行高

+ +

行高用来指定行与行之间的距离。如果你的文档中有一个很长的段落由很多行组成，而且这个段落的字号还比较小，这时给它指定一个稍大的间距，这样阅读起来会更方便。

+ +

使用 {{ cssxref("line-height") }} 属性指定文本的行间距。

+ +

装饰

+ +

单独的 {{ cssxref("text-decoration") }}就可以为文本指定其他风格，比如underline或line-through。你也可以把值设置成none，把这些风格取消掉。

+ +

其他属性

+ +

使用{{ cssxref("font-style") }}: italic;指定文本为斜体;

+ +

使用 {{ cssxref("font-weight") }}: bold;指定文本加粗;

+ +

使用 {{ cssxref("font-variant") }}: small-caps;指定文本为小型大写字母;

+ +

如果我们想单独设置某个效果失效，我们可以把其相应的属性设置为normal或inherit.

+ +
+
详细资料
+ +

我们也可以采用其他方式指定文本样式。

+ +

比如，这里提到的几个属性的其他值。

+ +

在一个复杂的样式表中，应该避免使用font属性，因为它的副作用（重置其他个体属性）。

+ +

字体相关的全部细节，可以在CSS规范里查看Fonts 。文本修饰相关可以查看 Text 。

+ +

如果我们不想使用系统上的默认字体库，我们可以使用{ { cssxref(@font-face)} }指定一个在线字体。然而，这要求用户的浏览器支持该字体。

+
+ +

实践：指定字体

+ +

对于一个简单的页面，我们可以设置 {{ HTMLElement("body") }}元素的字体，然后页面中的其他元素继承这个设置。

+ +
    +
  1. 编辑我们的样式表。
    2. +
  2. 添加以下规则到你的样式表中。推荐这个规则放在css文件的开头: + 
    body {font: 16px "Comic Sans MS", cursive;}
+
    +
    3. +
  3. 添加一个该规则的注释，可以添加空格匹配你的整体样式布局。
    4. +
  4. 保存文件并刷新浏览器查看效果。如果你的系统有Comic Sans MS或cursive字体，这两种字体都不支持斜体。你的浏览器会自动选择另一种字体实现斜体，效果如第一行。 + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    5. +
  5. 从浏览器的菜单栏中选择 视图 > 字体大小 > 放大（或视图 > 缩放 > 放大）。即使你在样式里指定了字体为16px。用户浏览网页时，还是可以改变字体字号的大小。
    6. +
+ +
+
挑战
+ +

不改变什么，让6个初始字母的字号大小调整为2倍于浏览默认的衬线字体:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
Possible solution
+ +

Add the following style declaration to the strong rule:

+ +
  font: 200% serif;
+
+If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. + +

 

+Hide solution
+查看答案.
+ +

下一节?

+ +

{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色")}}示例文档已经使用几个颜色命名。下一节列表中将列出标准的颜色名称，并且介绍其他的定义颜色的方式。

diff --git a/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html b/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..8a85655517 --- /dev/null +++ b/files/zh-cn/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,324 @@ +--- +title: Lists +slug: Web/Guide/CSS/Getting_started/Lists +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Content", "内容") }} 这是CSS入门教程 教程的第10部分; 它将向你描述你如何用CSS来指定列表的外观. 你将创建一个新的包含列表的示例文件，和一个新的定义列表的样式表。

+ +

信息: 列表

+ +

如果你完成了上一节的挑战任务，你就知道如何在列表项前面插入内容。

+ +

CSS为列表提供了专门的属性。如果可以，使用这些属性通常会比较方便。

+ +

使用{{ cssxref("list-style") }} 属性来指定列表项标记的样式。

+ +

你的CSS中的选择器可以选中列表项 (比如, {{ HTMLElement("li") }})。也可以选中列表项的父节点 (比如, {{ HTMLElement ("ul") }})。此时列表项会继承父节点的样式。

+ +

无序列表

+ +

无序列表的每个列表项都用同样的方式标记。

+ +

CSS 有三种标记样式：

+ + + +

你可以指定一个图片的URL来自定义标记样式。

+ +
+
例
+ +

下面的规则为不同类的列表项指定了不同的标记：

+ +
li.open {list-style: circle;}
+li.closed {list-style: disc;}
+
+ +

这些类被用于列表项时，用以区分打开和关闭的列表项 (比如，在一个待办事项列表中)：

+ +
<ul>
+  <li class="open">Lorem ipsum</li>
+  <li class="closed">Dolor sit</li>
+  <li class="closed">Amet consectetuer</li>
+  <li class="open">Magna aliquam</li>
+  <li class="closed">Autem veleum</li>
+</ul>
+
+ +

结果：

+ + + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+ +

有序列表

+ +

在有序列表中，每个列表项都被标记了不同的序号。

+ +

用{{ cssxref("list-style") }} 属性指定标记样式：

+ + + +
+
例
+ +

这条规则指定类名包含info的{{ HTMLElement("ol") }} 元素的列表项用大写字母标序

+ +
ol.info {list-style: upper-latin;}
+
+ +

{{ HTMLElement("li") }} 元素继承了ol的样式：

+ + + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+ +
+
更多细节
+ +

{{ cssxref("list-style") }} 属性是一个快捷写法。在复杂的样式表中你可能更希望用单独的属性设置不同的属性值。欲查看这些单独的属性和更详细的CSS指定列表的方法，见 {{ cssxref("list-style") }}参考页。

+ +

如果你使用如HTML这类提供了方便的无序列表 ({{ HTMLElement("ul") }}) 和有序列表({{ HTMLElement("ol") }})的标记语言，就尽量使用这些标签。当然，你完全可以将 {{ HTMLElement("ul") }} 显示成有序列表，将 {{ HTMLElement("ol") }} 显示成无序列表。

+ +

浏览器实现列表样式略有不同。不要奢望样式表可以让列表在所有浏览器中显示的完全一样。

+
+ +

计数器

+ +
+

注意:  一些浏览器不支持计数器。Quirks Mode site 的CSS contents and browser compatibility 页有更多这方面的兼容表格可以参考。 CSS Reference 也有浏览器兼容性表格。

+
+ +

你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。

+ +

要想计数，你必须定义一个计数器。

+ +

在计数开始前的某个元素上，设置 {{ cssxref("counter-reset") }}属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。

+ +

设置每个需要计数的元素的{{ cssxref("counter-increment") }} 属性为你的计数器名。

+ +

通过为选择器增加 {{ cssxref(":before") }} 或 {{ cssxref(":after") }} 并设置 content 属性来显示计数器。 (如上一节所示, 内容).

+ +

在content属性的值中设置 counter()，在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 有序列表 中相同。

+ +

正常情况下，显示计数器的元素也会递增计数器。

+ +
+
例
+ +

这条规则会为每个类名中包含numbered的{{ HTMLElement("h3") }} 元素初始化计数器 mynum：

+ +
h3.numbered {counter-reset: mynum;}
+
+ +

 

+ +

这条规则为每个类名包含numbered的{{ HTMLELement("p") }}元素显示并递增计数器：

+ +
p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+
+ +

结果：

+ + + + + + + +
Heading + +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+ +
+
更多细节
+ +

除非所有看你文档的人的浏览器都支持计数器，否则你不能使用计数器。

+ +

如果你可以使用计数器，那么你可以单独设置计数器的样式。如上面例子所示：计数器是粗体，但列表不是。

+ +

你还可以用更复杂的方式使用计数器。比如，计数章节, 标题, 子标题以及段落。详见CSS规范中的 Automatic counters and numbering 。

+
+ +

实例: 设计列表样式

+ +

新建doc2.html：

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample document 2</title>
+    <link rel="stylesheet" href="style2.css">
+  </head>
+  <body>
+
+    <h3 id="oceans">The oceans</h3>
+    <ul>
+      <li>Arctic</li>
+      <li>Atlantic</li>
+      <li>Pacific</li>
+      <li>Indian</li>
+      <li>Southern</li>
+    </ul>
+
+    <h3 class="numbered">Numbered paragraphs</h3>
+    <p class="numbered">Lorem ipsum</p>
+    <p class="numbered">Dolor sit</p>
+    <p class="numbered">Amet consectetuer</p>
+    <p class="numbered">Magna aliquam</p>
+    <p class="numbered">Autem veleum</p>
+
+  </body>
+</html>
+
+ +

新建style2.css：

+ +
/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+ +

如果布局和注释不符合你的口味，随便改。

+ +

在浏览器中打开。如果你的浏览器支持计数器，你将看到下面的样子。如果不支持，你将看不到数字序号。 (甚至冒号都看不到)：

+ + + + + + + +
+

The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
挑战
+ +

增加一条规则，用罗马数字i到v计数大洋的名字

+ + + + + + + +
+

The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

 

+ +

修改样式，将标题用大写字母加括号的方式标序：

+ + + + + + + +
+

(A) The oceans

+ +

. . .

+ +

(B) Numbered paragraphs

+ +

. . .

+
+
+ +

答案

+ +

接下来?

+ +

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Boxes", "盒模型") }}浏览器显示你的样例文档，在将元素放置在页面上时，会在元素周围创建空间。下一章节将向你描述如何使用CSS来和元素下的形状一起工作，元素下的形状我们称为盒子（boxes）。

+ +

 

diff --git a/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..67056c679b --- /dev/null +++ b/files/zh-cn/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,294 @@ +--- +title: 起步(Javascript 教程) +slug: Web/JavaScript/Getting_Started +tags: + - bug-840092 +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +translation_of_original: Web/JavaScript/Getting_Started +--- +

JavaScript是什么?

+ +

作为一门计算机语言，JavaScript本身强大、复杂，且难于理解。但是，你可以用它来开发一系列的应用程序，它有巨大的潜力来改变当前的互联网现状。下面这个应用程序就是一个很好的例子：Google Maps。

+ +

JavaScript（通称为ECMAScript）最大的优势在于，它基于浏览器，但是通过浏览器的支持可以在不同平台上生产出相同结果。 本文举出的例子是 Google Maps，它几乎可以无差别的运行在 Linux、Windows和Mac OS系统中。 伴随大量JavaScript类库的出现，你现在可以用它很轻易的实现文档导航、DOM元素选择、创建动画、处理事件和开发AJAX应用。同其他因各种利益目的而推动的技术不同，JavaScript是一种真正免费并且被广泛采用的跨平台编程语言。

+ +

你应该知道

+ +

JavaScript是一种非常容易入门的编程语言。你只需要一个文本编辑器和web浏览器就可以开始进行学习。 

+ +

在使用 JavaScript进行开发的过程中，可能还会涉及很多其他技术，这不在本文讨论的范围之内。 所以，不要期望在学习的第一天就能开发出一个类似 Google maps 这样的应用程序。

+ +

起步

+ +

JavaScript的起步非常简单。你不需要进行复杂的程序安装，不需要去了解如何使用shell、打包器或编译器。它是通过浏览器来展示的，你所需要做的全部事情就是把你的代码保存为文本文件，然后再浏览器中打开。就这么简单！

+ +

JavaScript非常适合作为入门级的编程语言。它直观形象，并且教会学生认识到这是一个在实际生活中非常有用的工具。 对比C、C++和 Java等语言会发现有很大不同，它们只对那些专业的软件开发者来说是有价值的。

+ +

浏览器兼容问题

+ +

不同浏览器在功能实现上有很多不同之处。Mozilla, Microsoft IE, Apple Safari 和 Opera 在行为上有很多差异。 我们计划在此记录这些差异 documenting these variations。你可以使用各种跨平台的JavaScript API接口来解决这些兼容性问题。这些API隐藏了浏览器之间的各种差异，提供了通用性的功能函数来方便调用。

+ +

如何运行示例

+ +

下面的例子都有相同的代码。要执行它们有多种方法，如果你有自己的个人站点，你还可以在站点上把这些例子保存为新的页面。

+ +

如果你没有自己的个人站点，你可以在电脑上把这些例子保存下来，并使用你自己的浏览器来执行它们。这就是JavaScript简单的地方，也是它适合做入门语言的原因。你不需要编译器或者开发环境，你只需要一个浏览器就可以开始起步了。

+ +

举例：捕获一个鼠标单击事件

+ +

事件处理 (事件类型、事件注册、冒泡等) 的细节是一个非常宽泛的话题，这个简单的例子并不能说明所有的问题。然而，如果我们不涉及JavaScript事件系统，我们就不能很好展示一个鼠标点击捕获的范例。你只需要记得例子里展示的只是JavaScrpt事件系统里非常表象的一些东西，如果你想要了解更多的内部细节，那你可以去查找更详细的相关资料。

+ +

鼠标事件只是浏览器同用户交互过程中所产生的事件系统里的一个子集。下面列举了一些用户在交互过程中产生的具体的鼠标事件：

+ + + +

捕获事件并注册处理函数最简单的办法就是使用HTML，你可以把事件当成元素属性来使用。例子：

+ +
  <span onclick="alert('Hello World!');">Click Here</span>
+ +

要执行的JavaScript代码既可以作为属性值写在行内位置，也可以写成函数并用<script>包裹后放到HTML页面中：

+ +
<script type="text/javascript">
+  function onclick_callback () {
+     alert ("Hello, World!");
+  }
+</script>
+<span onclick="onclick_callback();">Click Here</span>
+ +

另外，事件对象是可以被捕获和引用，开发者可以通过访问事件对象来获取更多信息，如捕获事件的对象、事件类型、哪个鼠标按键被点击等。我们还用上面的例子来说明：

+ +
<script type="text/javascript">
+  function onclick_callback(event) {
+    var eType = event.type;
+    /* the following is for compatability */
+    /* Moz populates the target property of the event object */
+    /* IE populates the srcElement property */
+    var eTarget = event.target || event.srcElement;
+
+    alert( "Captured Event (type=" + eType + ", target=" + eTarget );
+  }
+</script>
+<span onclick="onclick_callback(event);">Click Here</span>
+ +

对于事件的注册和接收还用注意一些的是，你可以给任何使用JavaScript生成的HTMLElement对象做相同的操作。下面的例子展示了一个这样的过程：生成span对象，添加到页面中的body，给span注册mouse-over、mouse-out、mouse-down和 mouse-up事件。

+ +
<script type="text/javascript">
+  function mouseevent_callback(event) {
+    /* The following is for compatability */
+    /* IE does NOT by default pass the event object */
+    /* obtain a ref to the event if one was not given */
+    if (!event) event = window.event;
+
+    /* obtain event type and target as earlier */
+    var eType = event.type;
+    var eTarget = event.target || event.srcElement;
+    alert(eType +' event on element with id: '+ eTarget.id);
+  }
+
+ function onload () {
+   /* obtain a ref to the 'body' element of the page */
+   var body = document.body;
+   /* create a span element to be clicked */
+   var span = document.createElement('span');
+   span.id = 'ExampleSpan';
+   span.appendChild(document.createTextNode ('Click Here!'));
+
+   /* register the span object to receive specific mouse events */
+   span.onmousedown = mouseevent_callback;
+   span.onmouseup = mouseevent_callback;
+   span.onmouseover = mouseevent_callback;
+   span.onmouseout = mouseevent_callback;
+
+   /* display the span on the page */
+   body.appendChild(span);
+}
+</script>
+ +

{{ draft() }}

+ +

举例：捕获一个键盘事件

+ +

同上面的例子类似，键盘事件捕获也依赖于JavaScript事件系统。当键盘上的键被使用的时候触发键盘事件。

+ +

下面的列表展示了一些具体的键盘事件，同鼠标事件相比是很少的：

+ + + +

在一个 keypress 事件中，键值的Unicode编码会存储到属性keyCode或者charCode 中，但是两者不会同时存在。按键会生成一个字母 (如 'a')，这时会把字母的编码存储到charCode 中，注意这里是区分大小写的( charCode 会判断shift键是否同时被按下)。其他情况下，编码会存储到 keyCode中。

+ +

捕获键盘事件最简单的方法仍然是在HTML中注册键盘事件的处理函数，在元素属性中处理相关事件。 举例：

+ +
  <input type="text" onkeypress="alert ('Hello World!');"></input>
+
+ +

同鼠标事件类似，你的 JavaScript代码既可以写到属性值内，也可以作为函数用<script包裹后写到HTML页面中：

+ +
<script type="text/javascript">
+  function onkeypress_callback () {
+    alert ("Hello, World!");
+  }
+</script>
+
+<input onkeypress="onkeypress_callback();"></input>
+
+ +

捕获事件和引用事件源(一个真实的键被按下时) 的方法同鼠标事件类似：

+ +
<script type="text/javascript">
+  function onkeypress_callback(evt) {
+      var eType = evt.type; // Will return "keypress" as the event type
+      var eCode = 'keyCode is ' + evt.keyCode;
+      var eChar = 'charCode is ' + evt.charCode;
+
+      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
+   }
+</script>
+<input onkeypress="onkeypress_callback(event);"></input>
+ +

要捕获页面上所有的键盘事件，可以在document上注册和绑定相关的处理函数：

+ +
<script type="text/javascript">
+  document.onkeypress = key_event;
+  document.onkeydown = key_event;
+  document.onkeyup = key_event;
+
+  function key_event(evt) {
+      var eType = evt.type;
+      var eCode = "ASCII code is " + evt.keyCode;
+      var eChar = 'charCode is ' + evt.charCode;
+
+      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
+   }
+</script>
+ +

下面是一个完整的键盘事件处理过程：

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <script>
+    var metaChar = false;
+    var exampleKey = 16;
+    function keyEvent(event) {
+      var key = event.keyCode || event.which;
+      var keychar = String.fromCharCode(key);
+      if (key==exampleKey) { metaChar = true; }
+      if (key!=exampleKey) {
+         if (metaChar) {
+            alert("Combination of metaKey + " + keychar)
+            metaChar = false;
+         } else { alert("Key pressed " + key); }
+      }
+    }
+    function metaKeyUp (event) {
+      var key = event.keyCode || event.which;
+      if (key==exampleKey) { metaChar = false; }
+    }
+  </script>
+</head>
+<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
+</body>
+</html>
+ +

浏览器 bugs 和 quirks

+ +

键盘事件中有两个可用的属性keyCode 和 charCode。通常情况下，keyCode 指向的是用户按下的键盘上的那个键，而charCode 存储的是相应键的 ASCII 码值。这两个值不一定相同，如， 小写 'a' 和 大写 'A' 拥有相同的 keyCode，因为用户按下的是相同的按键，但是他们的charCode不同，因为两个字母的码值不同。 

+ +

不同浏览器对于charCode的处理方式并不统一。例如Internet Explorer 和Opera 并不支持 charCode，他们把字母信息写到了keyCode中，而且只在 onkeypress下有效。在 Onkeydown 和Onkeyup的事件中， keyCode 存储的仍然是按键的相关信息。 Firefox 则使用 "which", 来区分字母。.

+ +

可以到 Mozilla 文档 Keyboard Events 去了解关于键盘事件的更多信息。.

+ +

{{ draft() }}

+ +

举例：拖曳图片

+ +

下面的例子展示了firefox浏览器下如何实现拖动图片：

+ +
<!DOCTYPE html>
+<html>
+<head>
+<style type='text/css'>
+img { position: absolute; }
+</style>
+
+<script type='text/javascript'>
+window.onload = function() {
+
+  movMeId=document.getElementById("ImgMov");
+  movMeId.style.top = "80px";
+  movMeId.style.left = "80px";
+  movMeId.style.position = "absolute";
+
+  document.onmousedown = coordinates;
+  document.onmouseup=mouseup;
+
+  function coordinates(e) {
+    if (e == null) { e = window.event;}
+    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
+
+    if (sender.id=="ImgMov") {
+      mouseover = true;
+      pleft = parseInt(movMeId.style.left);
+      ptop = parseInt(movMeId.style.top);
+      xcoor = e.clientX;
+      ycoor = e.clientY;
+      document.onmousemove=moveImage;
+      return false;
+    } else {
+        return false;
+    }
+  }
+
+  function moveImage(e) {
+    if (e == null) { e = window.event; }
+    movMeId.style.left = pleft+e.clientX-xcoor+"px";
+    movMeId.style.top = ptop+e.clientY-ycoor+"px";
+    return false;
+  }
+
+  function mouseup(e) {
+    document.onmousemove = null;
+  }
+}
+</script>
+</head>
+
+<body>
+  <img id="ImgMov" src="http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only.png" width="64" height="64"/>
+  <p>Drag and drop around the image in this page.</p>
+</body>
+
+</html>
+ +

举例：改变大小

+ +
{{todo("Need Content. Or, remove headline")}}
+ +

举例：绘制直线

+ +
+

附加文档信息

+ + +
+ +

 

diff --git a/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..fd51ef502f --- /dev/null +++ b/files/zh-cn/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,86 @@ +--- +title: Email links +slug: Web/Guide/HTML/Email_links +tags: + - HTML5 + - SEO + - a + - email link + - mailto +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links +translation_of_original: Web/Guide/HTML/Email_links +--- +

这往往是有益的Web站点能够创建链接或按钮，点击后，打开一个新的出站电子邮件。例如，这可能会创造一个“联系我们”按钮时使用。这是使用完成{{HTMLElement("a")}} 元素和mailto URL方案。.

+ +

Mailto 基础

+ +

以它最基础和最常用的形式，一个mailto链接仅简单的指明目标收件人的邮箱地址。例如：

+ +
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+
+Complete examples detail:
+
+<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com
+&amp;subject=The%20subject%20of%20the%20email
+&amp;body=The%20body%20of%20the%20email">
+Send mail with cc, bcc, subject and body</a>
+ + + +

这导致链接看起来像这样: Send email to nowhere.

+ +

事实上, 目标收件人邮件地址都是可选的。 如果你不添加它 (也就是，你的{{htmlattrxref("href", "a")}} 是简单的 "mailto:")，用户的邮件客户端将打开一个新的外发电子邮件窗口，该窗口尚未指定目标地址。这通常非常有用，因为用户可以单击“共享”链接以将电子邮件发送到他们选择的地址。

+ +

指定细节

+ +

除了电子邮件地址，您还可以提供其他信息。事实上, 任何标准的邮件头字段都可以添加到您提供的mailto URL中。 最广泛使用的是： "subject", "cc", and "body" (这不是真正的标题字段，但允许您为新电子邮件指定简短内容消息). 每个字段及其值都被指定为一个查询字词（query term）。

+ +
+
+
译者注：
+
+ + +
+ +
+

Note: 每个字段的值都必须进行编码  (也就是, 带有非印刷字符和空格 percent-escaped).

+
+ +

样品mailto 网址

+ +

这有一些有关 mailto 的示例链接:

+ + + +

请注意，使用＆符号来分隔mailto URL中的每个字段。这是标准的URL查询表示法。

+ +

例子

+ +

如果您想创建一封要求订阅新闻通讯的外发电子邮件, 您可能会使用一个 mailto链接，像这样:

+ +
<a href="mailto:nowhere@mozilla.org?subject=Newsletter%20subscription%20request&body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F">
+Subscribe to our newsletter
+</a>
+ +

结果链接看起来像这样: Subscribe to our newsletter.

+ + diff --git a/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..f1ebacd184 --- /dev/null +++ b/files/zh-cn/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,275 @@ +--- +title: 使用 HTML5 音频和视频 +slug: Web/Guide/HTML/Using_HTML5_audio_and_video +tags: + - Flash + - HTML + - HTML5 + - Media + - Ogg + - Web + - 媒体 + - 指南 + - 概述 + - 特性 + - 范例 + - 视频 + - 音频 +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video +--- +

HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。

+ +

嵌入媒体

+ +

在HTML中嵌入媒体：

+ +
+
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
+  你的浏览器不支持 <code>video</code> 标签.
+</video>
+ +

这个例子展示了一个带有回放控制器的可播放视频，视频来源于Theora网站。

+ +

下面是一个将音频嵌入到HTML文档的例子。

+ +
<audio src="/test/audio.ogg">
+你的浏览器不支持audio标签
+</audio>
+
+ +

src属性可以设置为一个音频文件的URL或者本地文件的路径。

+ +
+
<audio src="audio.ogg" controls autoplay loop>
+你的浏览器不支持audio标签
+</audio>
+
+ +

这个例子的代码中使用了HTML的“audio”元素的一些属性：

+ + + +
+
<audio src="audio.mp3" preload="auto" controls></audio>
+
+ +

preload属性用来缓冲audio元素的大文件，有三个属性值可供设置：

+ + + +

可以用 {{ HTMLElement("source") }} 标签来指定多个文件，以为不同浏览器提供可支持的编码格式。例如：

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg">
+  <source src="foo.mp4" type="video/mp4">
+  Your browser does not support the <code>video</code> element.
+</video>
+
+ +

当浏览器支持Ogg格式的时候， 该代码会播放Ogg文件。 如果浏览器不支持Ogg，浏览器会播放MPEG-4 file。参见列表 audio和video元素支持的媒体格式 来查看不同浏览器对视频音频编码格式的支持情况。

+ +

你也可以指定视频文件需要的视频编解码器的值；这样允许浏览器做出更加正确的决定：

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
+  Your browser does not support the <code>video</code> element.
+</video>
+ +

在这里，我们指定video标签使用Dirac和Speex的视频编解码器。如果浏览器支持Ogg，但是不支持指定的编解码器，则视频不会被加载。

+ +

如果类型属性没有被指定，媒体类型将返回至服务器然后检查浏览器是否可以解决；如果不能被执行，就检查下一个来源。如果没有任何一个指定的来源元素可以使用，则分派一个错误事件给video标签。如果指定了类型属性，那么将会与浏览器能够播放的类型做对比，如果其没有被识别，甚至不会被向服务器发出询问；相反，下一个来源会被同时检查。

+ +

点击 媒体事件 来查看完整的媒体回放事件列表。要查看不同浏览器支持的媒体格式的详细信息， 点击 Media formats supported by the audio and video elements.

+ +

媒体回放控制

+ +

当你已经用新的元素将媒体嵌入 HTML 文档以后，你就可以用 JavaScript 代码 采用编程的方式来控制它们。比如说，如果你想（重新）开始播放，可以写如下的代码：

+ +
var v = document.getElementsByTagName("video")[0];
+v.play();
+
+ +

头一行是取得当前文档中第一个视频元素，下一行调用了该元素的 play() 方法， 这一方法在实现媒体元素的接口中定义。

+ +

控制一个 HTML5 音频播放器的播放、暂停、增减音量等则直接了当：

+ +
<audio id="demo" src="audio.mp3"></audio>
+<div>
+  <button onclick="document.getElementById('demo').play()">播放声音</button>
+  <button onclick="document.getElementById('demo').pause()">暂停声音</button>
+  <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button>
+  <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button>
+</div>
+
+ +

终止媒体下载

+ +

停止媒体播放很简单，只要调用 pause() 方法即可，然而浏览器还会继续下载媒体直至媒体元素被垃圾回收机制回收。

+ +

以下是即刻停止媒体下载的方法：

+ +
var mediaElement = document.getElementById("myMediaElementID");
+mediaElement.pause();
+mediaElement.src='';
+//or
+mediaElement.removeAttribute("src");
+
+ +

通过移除媒体元素的 src 属性（或者直接将其设为一个空字符串——这取决于具体浏览器）， 你可以摧毁该元素的内部解码，从而结束媒体下载。removeAttribute() 操作并不干净， 而将<video>元素的 'src' 属性设为空字符串可能会引起我们不想要的请求（Mozilla Firefox 22）。

+ +

 

+ +

在媒体中查找

+ +

媒体元素支持在媒体的内容中从当前播放位置移到某个特定点。 这是通过设置元素的属性currentTime的值来达成的；有关元素属性的详细信息请看{{ domxref("HTMLMediaElement") }} 。 简单的设置那个你希望继续播放的以秒为单位时间值。

+ +

你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的{{ domxref("TimeRanges") }} 时间对象。

+ +
var mediaElement = document.getElementById('mediaElementID');
+mediaElement.seekable.start();  // 返回开始时间 (in seconds)
+mediaElement.seekable.end();    // 返回结束时间 (in seconds)
+mediaElement.currentTime = 122; // 设定在 122 seconds
+mediaElement.played.end();      // 返回浏览器播放的秒数
+
+ +

标记播放范围

+ +

在给一个<audio>或者<video>元素标签指定媒体的URI的时候，你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话，需要附加一个哈希标志("#")，后面跟着媒体片段的描述。

+ +

一条指定时间范围的语句：

+ +
#t=[starttime][,endtime]
+ +

时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。

+ +

一些例子：

+ +
+
http://foo.com/video.ogg#t=10,20
+
指定视频播放范围为从第10秒到第20秒.
+
http://foo.com/video.ogg#t=,10.5
+
指定视频从开始播放到第10.5秒.
+
http://foo.com/video.ogg#t=,02:00:00
+
指定视频从开始播放到两小时.
+
http://foo.com/video.ogg#t=60
+
指定视频从第60秒播放到结束.
+
+ +
+

媒体元素URI中播放范围部分的规范已被加入到 Gecko 9.0 {{ geckoRelease("9.0") }}. 当下, 这是Geoko Media Fragments URI specification 唯一实现的部分，并且只有是在非地址栏给媒体元素指定来源时才可使用。

+
+ +

备选项

+ +

在HTML之间，例如，不支持HTML5媒体的浏览器可以处理媒体元素的开始和结束标记.你可以利用这一点给这些浏览器添加一些备项。

+ +

此节给视频提供了两个可能的备选项，在各种情况下，如果浏览器支持HTML5视频，它就会被使用，否则，会使用备选项。

+ +

使用Flash

+ +

{{ HTMLElement("video") }} 标签不被支持时可以使用Flash播放Flash格式的影像。

+ +
<video src="video.ogv" controls>
+    <object data="flvplayer.swf" type="application/x-shockwave-flash">
+      <param value="flvplayer.swf" name="movie"/>
+    </object>
+</video>
+ +

注意不要在object标签中加入class、id以兼容IE以外的浏览器。

+ +

使用Java 小程序播放Ogg视频

+ +

这里有一个名为Cortado的Java小程序，在不支持HTML5视频的浏览器你可以用它作为备选项来播放Ogg视频:

+ +
<video src="my_ogg_video.ogg" controls width="320" height="240">
+  <object type="application/x-java-applet" width="320" height="240">
+     <param name="archive" value="cortado.jar">
+     <param name="code" value="com.fluendo.player.Cortado.class">
+     <param name="url" value="my_ogg_video.ogg">
+     <p>You need to install Java to play this file.</p>
+  </object>
+</video>
+ +

如果你没有给cortado object元素创建一个备用的子元素，像上面的 {{ HTMLElement("p") }} 元素，没有安装java的Firfox3.5设备就会错误的通知用户需要安装一个插件才能查看页面内容.

+ +

{{ h1_gecko_minversion("错误处理", "2.0") }}

+ +

Geocko2.0首发{{ geckoRelease("2.0") }}, 错误处理已经被修订符合HTML5的最新版规范。 取缔把错误事件发送给媒体元素自生的方式，现在把它交付给子代中的 {{ HTMLElement("source") }}元素对应导致错误的来源。

+ +

这使你可以查到是哪个资源加载失败，哪个是可用的。

+ +
<video>
+<source id="mp4_src"
+  src="video.mp4"
+  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+</source>
+<source id="3gp_src"
+  src="video.3gp"
+  type='video/3gpp; codecs="mp4v.20.8, samr"'>
+</source>
+<source id="ogg_src"
+  src="video.ogv"
+  type='video/ogg; codecs="theora, vorbis"'>
+</source>
+</video>
+ +

由于专利限制，Firefox不支持MP4和3GP，ID为“mp4_src"和"3gp_src"的 {{ HTMLElement("source") }} 元素在Ogg资源加载之前将会接收到错误事件。这些资源会根据出现的顺序尝试被加载，一旦有一个资源加载成功，剩下的资源就不会被加载。

+ +

没有资源加载成功时的检测

+ +

检测是否所有的子{{ HTMLElement("source") }} 元素都加载失败，检查媒体元素的networkState属性值。如果值为HTMLMediaElement.NETWORK_NO_SOURCE，就可以知道所以的资源都加载失败了。

+ +

如果这时你通过插入一个新的 {{ HTMLElement("source") }} 元素作为媒体元素的子元素的方法添加一个新资源，Gecko会尝试加载指定的资源。

+ +

没有资源可用时显示备用内容

+ +

另一个显示视频的备用内容的方法是在最后一个source元素上增加一个错误处理器。

+ +
<video controls>
+  <source src="dynamicsearch.mp4" type="video/mp4"></source>
+  <a href="dynamicsearch.mp4">
+    <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
+  </a>
+  <p>Click image to play a video demo of dynamic app search</p>
+</video>
+
+
+ +
var v = document.querySelector('video'),
+    sources = v.querySelectorAll('source'),
+    lastsource = sources[sources.length-1];
+lastsource.addEventListener('error', function(ev) {
+  var d = document.createElement('div');
+  d.innerHTML = v.innerHTML;
+  v.parentNode.replaceChild(d, v);
+}, false);
+
+ +

相关文章

+ + diff --git a/files/zh-cn/conflicting/learn/index.html b/files/zh-cn/conflicting/learn/index.html new file mode 100644 index 0000000000..9e2e40d682 --- /dev/null +++ b/files/zh-cn/conflicting/learn/index.html @@ -0,0 +1,172 @@ +--- +title: 如何建设一个网站 +slug: Learn/tutorial/How_to_build_a_web_site +translation_of: Learn +translation_of_original: Learn/tutorial/How_to_build_a_web_site +--- +

  当我们在学习网页设计时，许多人都希望尽快建设一个属于自己的网站。为了让你建站之路更平坦，我们已经缩小了你所需要的最低限度的知识。

+ +

我们建议你先从这儿的文章开始 ，认真学习它们，如果你在学习中有关术语的问题，请用我们的词汇表.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 理论
+ 知识		技术
+ 知识		实践
+ 知识
1开始你的web项目
+ 在这篇文章中我们首先讨论了在任何一个项目中你所必要的一步：确定你要完成什么和为什么.		  
2英特网是如何工作的
+ 这篇文章将为你解释什么是英特网以及它是如何工作的。		  
3 了解网页、网站、服务器、以及搜索引擎之间的不同网络服务器是什么?
+ 在这篇文章中，我们将要论述什么是网络服务器，它们是如何运作的以及它们为什么如此重要.		我们需要什么软件（它们用来干什么）?
+ 在文中我们将要介绍你在编辑网页，上传文件，以及管理网站中你需要什么软件。
4了解网络上的链接
+ 在文章中, 我们将详细的论述网络链接, 这个在万维网中相当重要的一个角色.		  
5了解URLs以及它们的构成
+ 在这篇文章中，我们将介绍URLs是什么（同一资源定位器）以及它们是如何构成的。		认识域名
+ 在这篇文章中，我们将对域名留下深刻印象：域名是什么，它们如何构成，以及怎样获取一个域名。		 
6剖析一个网页
+ 当你在做你自己的网站时，你最好知道一些普通的设计.		 在网上做些什么花费多少钱？
+ 涉及到互联网的东西并不像它看起来那么便宜。在文中我们将论述你可能花费多少钱以及为什么。
7设计之外，基础的网页设计 选择下载安装一个编辑器
+ 在这篇文章中，我们强调一些事情关于下载安装编译器用于网站开发。
8  创建一个基本的工作环境
+ 这篇文章让你用工作站建立你的网站
9 用HTML写一个简单的网页
+ 学习如何创造一个简单的网页。		打开文件在你的浏览器中r
+ 这篇文章讲解了在浏览器中通过各种方式接入文件，以及这种正确的方式为什么如此重要。
10 什么是HTML标签&如何使用它们
+ 这篇文章包含了 HTML 基础:什么是标签以及如何使用它们。		上传文件到服务器
+ 本文介绍了如何使用FTP工具发布你的网站
11   +

检查你的网站是否工作正常
+ 本指南概述了一些找到并修复常见错误的策略

+
+ +

这些是都是你需要的第一个网站学习的基本知识，但如果你想做出更高端更专业的网站，请继续往下读：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 理论
+ 知识		技术
+ 知识		实践
+ 知识
12人们需要什么才能查看你的网站  
13 在你的网页中使用CSS
+ 本文将介绍如何使用CSS样式表来改变你的网页样式		 
14什么是无障碍性网页
+ 本文介绍了无障碍性网页背后的基本概念。		什么是CSS属性以及该如何使用它们
+ CSS特性应该如何使用。本文介绍了图和使用CSS属性选择器应用HTML元素		 
15为各类用户设计101
+ 本文提供了基本的无障碍性网站技巧		 +

CSS基本的文字排版
+ 最常见的CSS属性概述

+ 		 
16 使用图片 
17避开在网页设计中的常见陷阱用户体验（UX）基础设计导航菜单
+ +

 

diff --git a/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..1f53ff70ba --- /dev/null +++ b/files/zh-cn/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,172 @@ +--- +title: JavaScript 与 CSS +slug: Web/Guide/CSS/Getting_started/JavaScript +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +--- +

{{ CSSTutorialTOC() }}

+ +

本文是 CSS tutorial 第二部分的第一章节。第二部分的内容主要是一些css和其他web技术的使用范例。 

+ +

第二部分的内容主要来向你展示CSS是如何同其他技术进行交互的。但是这样做的目的并不是教你如何使用这些技术，如果你想深入学习，可以查找具体的文档。

+ +

换句话说，这些页面是用来向你展示CSS的多种用途的。通过这些页面，你不需要掌握其他技术就可以获取到很多CSS的相关知识。

+ +

上一章 (Part I)： Media
+ 下一章： SVG

+ +

相关知识： JavaScript

+ +

JavaScript是一种编程语言，它被广泛用来实现web站点和应用中的交互效果。

+ +

JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。 

+ +

有三种方法可以实现这样的效果：

+ + + + + + + + + + +
更多细节
要了解 JavaScript的更多细节，可以到这个wiki JavaScript 。
+ +

范例： 一个JavaScript的实例

+ +

新建一个doc5.html的页面，把下面的代码复制粘贴进入，注意要保证保存了所有的代码：

+ +
+
<!DOCTYPE html>
+<html>
+
+<head>
+<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
+<link rel="stylesheet" type="text/css" href="style5.css" />
+<script type="text/javascript" src="script5.js"></script>
+</head>
+
+<body>
+<h1>JavaScript sample</h1>
+<div id="square"></div>
+<button>Click Me</button>
+
+</body>
+</html>
+
+
+ +

新建一个CSS文件style5.css，复制粘贴下面的样式代码到文件中：

+ +
+
  #square {
+
+      width: 20em;
+
+      height: 20em;
+
+      border: 2px inset gray;
+
+      margin-bottom: 1em;
+
+  }
+
+  button {
+
+      padding: .5em 2em;
+
+  }
+
+ +

新建一个JavaScript文件script5.js，复制粘贴下面的代码到文件中：

+ +
+
// JavaScript demonstration
+var changeBg = function (event) {
+    console.log("method called");
+    var me = event.target
+    ,   square = document.getElementById("square");
+    square.style.backgroundColor = "#ffaa44";
+    me.setAttribute("disabled", "disabled");
+    setTimeout(function () { clearDemo(me) }, 2000);
+}
+
+function clearDemo(button) {
+    var square = document.getElementById("square");
+    square.style.backgroundColor = "transparent";
+    button.removeAttribute("disabled");
+}
+
+window.onload = function() {
+    var button = document.querySelector("button");
+    button.addEventListener("click", changeBg);
+    console.log(button);
+}
+
+ +

用浏览器打开HTML文件并点击按钮。

+ +

这里有在线的示例：Here is the Live Example

+ + + + + + + + +
+ + + + + + +
+

JavaScript demonstration

+
+ 		+ + + + + + +
+

JavaScript demonstration

+
+
+ +
重要提示 ： + + +
+ + + + + + + + +
挑战
修改脚本代码实现如下效果：当颜色改变的时候让方块跳至右侧20em的距离，然后再恢复到原来的位置。
+ +

这里有一个解决方案示例：See a solution to this challenge.

+ +

下一步做什么呢？

+ +

如果你对本页内容有疑问，或者有其他想法，欢迎到 Discussion 页面进行讨论。

+ +

在示例中，尽管只有button元素使用了脚本代码，但是HTML文档还是i需要外链一个脚本文件。Mozilla 对CSS做了扩展，让它可以为选择元素引用JavaScript代码 (也可以使内容或者其他样式表文件) 。下篇文章会对此有详细说明： XBL bindings

diff --git a/files/zh-cn/conflicting/learn/javascript/objects/index.html b/files/zh-cn/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..1ae4554c63 --- /dev/null +++ b/files/zh-cn/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,362 @@ +--- +title: JavaScript面向对象简介 +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - JavaScript + - OOP + - 命名空间 + - 对象 + - 封装 + - 成员 + - 构造函数 + - 继承 + - 面向对象 +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +
{{jsSidebar("Introductory")}}
+ +
 
+ +

JavaScript 的核心是支持面向对象的，同时它也提供了强大灵活的 OOP 语言能力。本文从对面向对象编程的介绍开始，带您探索 JavaScript 的对象模型，最后描述 JavaScript 当中面向对象编程的一些概念。

+ +

JavaScript回顾

+ +

如果您对 JavaScript 的概念（如变量、类型、方法和作用域等）缺乏自信，您可以在重新介绍 JavaScript 这篇文章里学习这些概念。您也可以查阅这篇 JavaScript 1.5 核心指南。

+ +

面向对象编程

+ +

面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例，包括模块化，多态和封装几种技术。今天，许多流行的编程语言（如Java，JavaScript，C＃，C+ +，Python，PHP，Ruby和Objective-C）都支持面向对象编程（OOP）。

+ +

相对于「一个程序只是一些函数的集合，或简单的计算机指令列表。」的传统软件设计观念而言，面向对象编程可以看作是使用一系列对象相互协作的软件设计。 在 OOP 中，每个对象能够接收消息，处理数据和发送消息给其他对象。每个对象都可以被看作是一个拥有清晰角色或责任的独立小机器。

+ +

面向对象程序设计的目的是在编程中促进更好的灵活性和可维护性，在大型软件工程中广为流行。凭借其对模块化的重视，面向对象的代码开发更简单，更容易理解，相比非模块化编程方法 1, 它能更直接地分析, 编码和理解复杂的情况和过程。

+ +

术语

+ +
+
Namespace 命名空间
+
允许开发人员在一个独特，应用相关的名字的名称下捆绑所有功能的容器。
+
Class 类
+
定义对象的特征。它是对象的属性和方法的模板定义。
+
Object 对象
+
类的一个实例。
+
Property 属性
+
对象的特征，比如颜色。
+
Method 方法
+
对象的能力，比如行走。
+
Constructor 构造函数
+
对象初始化的瞬间，被调用的方法。通常它的名字与包含它的类一致。
+
Inheritance 继承
+
一个类可以继承另一个类的特征。
+
Encapsulation 封装
+
一种把数据和相关的方法绑定在一起使用的方法。
+
Abstraction 抽象
+
结合复杂的继承，方法，属性的对象能够模拟现实的模型。
+
Polymorphism 多态
+
多意为「许多」，态意为「形态」。不同类可以定义相同的方法或属性。
+
+ +

更多关于面向对象编程的描述，请参照维基百科的 面向对象编程 。

+ +

原型编程

+ +

基于原型的编程不是面向对象编程中体现的风格，且行为重用（在基于类的语言中也称为继承）是通过装饰它作为原型的现有对象的过程实现的。这种模式也被称为弱类化，原型化，或基于实例的编程。

+ +

原始的（也是最典型的）基于原型语言的例子是由大卫·安格尔和兰德尔·史密斯开发的。然而，弱类化的编程风格近来变得越来越流行，并已被诸如JavaScript，Cecil，NewtonScript，IO，MOO，REBOL，Kevo，Squeak（使用框架操纵Morphic组件），和其他几种编程语言采用。1

+ +

JavaScript面向对象编程

+ +

命名空间

+ +

命名空间是一个容器，它允许开发人员在一个独特的，特定于应用程序的名称下捆绑所有的功能。 在JavaScript中，命名空间只是另一个包含方法，属性，对象的对象。

+ +
+

注意：需要认识到重要的一点是：与其他面向对象编程语言不同的是，Javascript中的普通对象和命名空间在语言层面上没有区别。这点可能会让JavaScript初学者感到迷惑。

+
+ +

创造的JavaScript命名空间背后的想法很简单：一个全局对象被创建，所有的变量，方法和功能成为该对象的属性。使用命名空间也最大程度地减少应用程序的名称冲突的可能性。

+ +

我们来创建一个全局变量叫做 MYAPP

+ +
// 全局命名空间
+var MYAPP = MYAPP || {};
+ +

在上面的代码示例中，我们首先检查MYAPP是否已经被定义（是否在同一文件中或在另一文件）。如果是的话，那么使用现有的MYAPP全局对象，否则，创建一个名为MYAPP的空对象用来封装方法，函数，变量和对象。

+ +

我们也可以创建子命名空间：

+ +
// 子命名空间
+MYAPP.event = {};
+ +

下面是用于创建命名空间和添加变量，函数和方法的代码写法：

+ +
// 给普通方法和属性创建一个叫做MYAPP.commonMethod的容器
+MYAPP.commonMethod = {
+  regExForName: "", // 定义名字的正则验证
+  regExForPhone: "", // 定义电话的正则验证
+  validateName: function(name){
+    // 对名字name做些操作，你可以通过使用“this.regExForname”
+    // 访问regExForName变量
+  },
+
+  validatePhoneNo: function(phoneNo){
+    // 对电话号码做操作
+  }
+}
+
+// 对象和方法一起申明
+MYAPP.event = {
+    addListener: function(el, type, fn) {
+    //  代码
+    },
+   removeListener: function(el, type, fn) {
+    // 代码
+   },
+   getEvent: function(e) {
+   // 代码
+   }
+
+   // 还可以添加其他的属性和方法
+}
+
+//使用addListener方法的写法:
+MYAPP.event.addListener("yourel", "type", callback);
+ +

标准内置对象

+ +

JavaScript有包括在其核心的几个对象，例如，Math，Object，Array和String对象。下面的例子演示了如何使用Math对象的random()方法来获得一个随机数。

+ +
console.log(Math.random());
+
+ +
注意：这里和接下来的例子都假设名为 console.log 的方法全局有定义。console.log 实际上不是 JavaScript 自带的。
+ +

查看 JavaScript 参考：全局对象 了解 JavaScript 内置对象的列表。

+ +

JavaScript 中的每个对象都是 Object 对象的实例且继承它所有的属性和方法。

+ +

自定义对象

+ +

类

+ +

JavaScript是一种基于原型的语言，它没类的声明语句，比如C+ +或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定义了一个新类Person。

+ +
function Person() { }
+// 或
+var Person = function(){ }
+
+ +

对象（类的实例）

+ +

我们使用 new obj 创建对象 obj 的新实例, 将结果（obj 类型）赋值给一个变量方便稍后调用。

+ +

在下面的示例中，我们定义了一个名为Person的类，然后我们创建了两个Person的实例(person1 and person2).

+ +
function Person() { }
+var person1 = new Person();
+var person2 = new Person();
+
+ +
注意：有一种新增的创建未初始化实例的实例化方法，请参考 Object.create 。
+ +

构造器

+ +

在实例化时构造器被调用 (也就是对象实例被创建时)。构造器是对象中的一个方法。 在JavaScript中函数就可以作为构造器使用，因此不需要特别地定义一个构造器方法，每个声明的函数都可以在实例化后被调用执行。

+ +

构造器常用于给对象的属性赋值或者为调用函数做准备。 在本文的后面描述了类中方法既可以在定义时添加，也可以在使用前添加。

+ +

在下面的示例中, Person类实例化时构造器调用一个 alert函数。

+ +
function Person() {
+  alert('Person instantiated');
+}
+
+var person1 = new Person();
+var person2 = new Person();
+
+ +

属性 (对象属性)

+ +

属性就是 类中包含的变量;每一个对象实例有若干个属性. 为了正确的继承，属性应该被定义在类的原型属性 (函数)中。

+ +

可以使用 关键字 this调用类中的属性, this是对当前对象的引用。 从外部存取(读/写)其属性的语法是: InstanceName.Property; 这与C++，Java或者许多其他语言中的语法是一样的 (在类中语法 this.Property 常用于set和get属性值)

+ +

在下面的示例中，我们为定义Person类定义了一个属性 firstName 并在实例化时赋初值。

+ +
function Person(firstName) {
+  this.firstName = firstName;
+  alert('Person instantiated');
+}
+
+var person1 = new Person('Alice');
+var person2 = new Person('Bob');
+
+// Show the firstName properties of the objects
+alert('person1 is ' + person1.firstName); // alerts "person1 is Alice"
+alert('person2 is ' + person2.firstName); // alerts "person2 is Bob"
+
+ +

方法（对象属性）

+ +

方法与属性很相似， 不同的是：一个是函数，另一个可以被定义为函数。 调用方法很像存取一个属性,  不同的是add () 在方法名后面很可能带着参数. 为定义一个方法, 需要将一个函数赋值给类的 prototype 属性; 这个赋值给函数的名称就是用来给对象在外部调用它使用的。

+ +

在下面的示例中，我们给Person类定义了方法 sayHello()，并调用了它.

+ +
function Person(firstName) {
+  this.firstName = firstName;
+}
+
+Person.prototype.sayHello = function() {
+  alert("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+
+// call the Person sayHello method.
+person1.sayHello(); // alerts "Hello, I'm Alice"
+person2.sayHello(); // alerts "Hello, I'm Bob"
+
+ +

在JavaScript中方法通常是一个绑定到对象中的普通函数, 这意味着方法可以在其所在context之外被调用。 思考下面示例中的代码:

+ +
function Person(firstName) {
+  this.firstName = firstName;
+}
+
+Person.prototype.sayHello = function() {
+  alert("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+var helloFunction = person1.sayHello;
+
+person1.sayHello();                                 // alerts "Hello, I'm Alice"
+person2.sayHello();                                 // alerts "Hello, I'm Bob"
+helloFunction();                                    // alerts "Hello, I'm undefined" (or fails
+                                                    // with a TypeError in strict mode)
+console.log(helloFunction === person1.sayHello);          // logs true
+console.log(helloFunction === Person.prototype.sayHello); // logs true
+helloFunction.call(person1);                        // logs "Hello, I'm Alice"
+
+ +

如上例所示, 所有指向sayHello函数的引用 ，包括 person1, Person.prototype, 和 helloFunction 等， 均引用了相同的函数.

+ +

在调用函数的过程中，this的值取决于我们怎么样调用函数.  在通常情况下，我们通过一个表达式person1.sayHello()来调用函数：即从一个对象的属性中得到所调用的函数。此时this被设置为我们取得函数的对象（即person1）。这就是为什么person1.sayHello() 使用了姓名“Alice”而person2.sayHello()使用了姓名“bob”的原因。 

+ +

然而我们使用不同的调用方法时, this的值也就不同了。当从变量 helloFunction()中调用的时候， this就被设置成了全局对象 (在浏览器中即window)。由于该对象 (非常可能地) 没有firstName 属性, 我们得到的结果便是"Hello, I'm undefined". (这是松散模式下的结果， 在 严格模式中，结果将不同（此时会产生一个error）。 但是为了避免混淆，我们在这里不涉及细节) 。另外，我们可以像上例末尾那样，使用Function#call (或者Function#apply)显式的设置this的值。

+ +
更多有关信息请参考 Function#call and Function#apply
+ +

继承

+ +

创建一个或多个类的专门版本类方式称为继承（Javascript只支持单继承）。 创建的专门版本的类通常叫做子类，另外的类通常叫做父类。 在Javascript中，继承通过赋予子类一个父类的实例并专门化子类来实现。在现代浏览器中你可以使用 Object.create 实现继承.

+ +
+

JavaScript 并不检测子类的 prototype.constructor (见 Object.prototype), 所以我们必须手动申明它.

+
+ +

在下面的例子中, 我们定义了 Student类作为 Person类的子类. 之后我们重定义了sayHello() 方法并添加了 sayGoodBye() 方法.

+ +
// 定义Person构造器
+function Person(firstName) {
+  this.firstName = firstName;
+}
+
+// 在Person.prototype中加入方法
+Person.prototype.walk = function(){
+  alert("I am walking!");
+};
+Person.prototype.sayHello = function(){
+  alert("Hello, I'm " + this.firstName);
+};
+
+// 定义Student构造器
+function Student(firstName, subject) {
+  // 调用父类构造器, 确保(使用Function#call)"this" 在调用过程中设置正确
+  Person.call(this, firstName);
+
+  // 初始化Student类特有属性
+  this.subject = subject;
+};
+
+// 建立一个由Person.prototype继承而来的Student.prototype对象.
+// 注意: 常见的错误是使用 "new Person()"来建立Student.prototype.
+// 这样做的错误之处有很多, 最重要的一点是我们在实例化时
+// 不能赋予Person类任何的FirstName参数
+// 调用Person的正确位置如下，我们从Student中来调用它
+Student.prototype = Object.create(Person.prototype); // See note below
+
+// 设置"constructor" 属性指向Student
+Student.prototype.constructor = Student;
+
+// 更换"sayHello" 方法
+Student.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName + ". I'm studying " + this.subject + ".");
+};
+
+// 加入"sayGoodBye" 方法
+Student.prototype.sayGoodBye = function(){
+  console.log("Goodbye!");
+};
+
+// 测试实例:
+var student1 = new Student("Janet", "Applied Physics");
+student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
+student1.walk();       // "I am walking!"
+student1.sayGoodBye(); // "Goodbye!"
+
+// Check that instanceof works correctly
+console.log(student1 instanceof Person);  // true
+console.log(student1 instanceof Student); // true
+
+ +

对于“Student.prototype = Object.create(Person.prototype);”这一行，在不支持 Object.create方法的老JavaScript引擎中，可以使用一个"polyfill"（又名"shim"，查看文章链接），或者使用一个function来获得相同的返回值，就像下面：

+ +
function createObject(proto) {
+    function ctor() { }
+    ctor.prototype = proto;
+    return new ctor();
+}
+
+// Usage:
+Student.prototype = createObject(Person.prototype);
+
+ +
更多相关信息请参考 Object.create，连接中还有一个老JavaScript引擎的兼容方案（shim）。
+ +

封装

+ +

在上一个例子中，Student类虽然不需要知道Person类的walk()方法是如何实现的，但是仍然可以使用这个方法；Student类不需要明确地定义这个方法，除非我们想改变它。 这就叫做封装，对于所有继承自父类的方法，只需要在子类中定义那些你想改变的即可。

+ +

抽象

+ +

抽象是允许模拟工作问题中通用部分的一种机制。这可以通过继承（具体化）或组合来实现。
+ JavaScript通过继承实现具体化，通过让类的实例是其他对象的属性值来实现组合。

+ +

JavaScript Function 类继承自Object类（这是典型的具体化） 。Function.prototype的属性是一个Object实例（这是典型的组合）。

+ +
var foo = function(){};
+console.log( 'foo is a Function: ' + (foo instanceof Function) );                  // logs "foo is a Function: true"
+console.log( 'foo.prototype is an Object: ' + (foo.prototype instanceof Object) ); // logs "foo.prototype is an Object: true"
+ +

多态

+ +

就像所有定义在原型属性内部的方法和属性一样，不同的类可以定义具有相同名称的方法;方法是作用于所在的类中。并且这仅在两个类不是父子关系时成立（继承链中，一个类不是继承自其他类）。

+ +

注意

+ +

本文中所展示的面向对象编程技术不是唯一的实现方式，在JavaScript中面向对象的实现是非常灵活的。

+ +

同样的，文中展示的技术没有使用任何语言hacks，它们也没有模仿其他语言的对象理论实现。

+ +

JavaScript中还有其他一些更加先进的面向对象技术，但这些都超出了本文的介绍范围。

+ +

参考

+ +
    +
  1. 维基百科。「面向对象程序设计」，http://zh.wikipedia.org/wiki/面向对象程序设计​
    2. +
  2. 维基百科。“Encapsulation (object-oriented programming)”
    3. +
diff --git a/files/zh-cn/conflicting/learn/server-side/django/index.html b/files/zh-cn/conflicting/learn/server-side/django/index.html new file mode 100644 index 0000000000..95ec82f251 --- /dev/null +++ b/files/zh-cn/conflicting/learn/server-side/django/index.html @@ -0,0 +1,111 @@ +--- +title: Python +slug: Python +tags: + - Python + - Services +translation_of: Learn/Server-side/Django +translation_of_original: Python +--- +

Python 是一款直译式脚本语言，支持包括 Linux、Mac OS X 和 Microsoft Windows 在内的多种平台。

+ +

学习 Python

+ +

免费的电子书

+ +

 如果你是个初学者，可以考虑看看 Dive Into Python 。虽然它最后更新的时间是2004年，但依然是一部免费而且很棒的教程。 它含括了几乎所有Python 的基本元素，还有一些平常使用 Python 可以执行什么任务，像是对 Web 请求和文件的处理。如果对于 Python 已经有了基本的概念，就可以考虑看看 Text Processing In Python，这本书对于 Python 有着更进阶的介绍。

+ +

还有其他免费的电子书和在线资源可供参考：

+ + + +

译者注：如果有发现其他中文教程，欢迎编写本页来分享。

+ +

当你对这款语言有了基础的认识后， Code Like a Pythonista: Idiomatic Python 将帮你了解 Python 的一些特别之处，以及和其他语言的区别。

+ +

免费在线课程

+ + + +

Python 也用在了基于 Mozilla 的应用程序中

+ +

XPCOM 在 Mozilla 中用于支持跨语言通信（inter-language communication）。它仅原生支持 C++ <-> JavaScript 的交流。 Python 的 XPCOM 组件（也叫做 PyXPCOM）是将 Python 和 Mozilla 粘合在一块的低级别胶水（the low-level glue），使得用 JavaScript 或 C++ 编写的 XPCOM 组件既可以通过 Python 使用，反之亦然。PyXPCOM 并不默认包含在 Firefox 构建版本中，因此你须要使用第三方构建版本或自己构建一个版本来使用它。PyXPCOM中最知名的消费者是Komodo系列的产品。 

+ +

从Mozilla 1.9版本开始就已经支持 (PyDOM) 。 这也让chrome 的XUL 和 HTML 作者在他们的 <script> 标签中使用python（再一次声明，官方版本的Firefox和Thunderbird版本还不支持）。

+ +

Mozilla中基于Python的开发者工具

+ +

Python已经被众多Mozilla开发者应用于大量的app和框架中。更多信息请参考Python Environment and Tools for Mozilla.

+ +

工具列表在这里: http://k0s.org/toolbox/?language=python

+ +

Mozilla中Python的使用

+ +

Mozilla有大量的基于python的框架，包括:

+ + + +

Mozilla-Central的Python身影

+ +

[参考网址://bugzilla.mozilla.org/show_bug.cgi?id=835553]

+ +

在Mozilla-Central很多的正式版本，测试版本以及其他的框架和工具都是使用的python

+ + + +

一个虚拟化环境(virtualenv)包含在调用$OBJDIR/_virtualenv 版本的objdir 时 . 为了封装到虚拟环境中, 可编辑build/virtualenv_packages.txt . 这里有安装好了的版本 build/virtualenv/populate_virtualenv.py .

+ +

Python的封装

+ +

Python使用setup.py 来记录元数据和python包（python packages）的安装。运行 (e.g.) python setup.py install 将安装打包文件以及使python's import path中的模块可用。对python 2.x来说， 有几种不同的分布式或安装式模块存在，distutils 只在python标准库( python's standard library)的分布式封装中可用， distutils 可以上传到python封装索引python package index 并且安装python包。详情请参阅Python documentation on distutils

+ +

当 distutils 已经被加入python标准库中后, 初始化工具 setuptools是一个为封装和分发的第三方的特设标准。它几乎完全兼容distutils,但是却非常关键的使封装文件具有“依赖关系”include dependencies 的能力，可以在setup.py 被调用的时候作为预置条件安装，同时也有了在开发者模式development mode下安装python包的能力. 这使得文件能通过 .pth files来编辑，这对于积极工作的人来说非常容易上手。 setuptools 也提供了一个通过 PyPI来快速安装打包文件和依赖关系的脚本easy_install 。比如安装 PyYAML包，运行

+ +
easy_install PyYAML
+
+ +

因为 setuptools 没有被包含在python中，你需要对其进行安装，你可以去到PyPI主页去下载setuptoolsi，然后解压，在目录下运行python setup.py install ，你也可以使用快速安装脚本ez_setup.py来进行安装，你可以在拥有root权限或管理员权限的python环境中下载和安装，或者在 bash shell中运行

+ +
sudo python <(curl http://peak.telecommunity.com/dist/ez_setup.py)
+
+ +

setuptools 也提供了一个虚拟环境virtualenv, 所以如果你想使用虚拟环境来开发，你不需要全局安装setuptools ，distribute是一个Mozilla大佬 Tarek Ziade 在setuptools 的一个，它完全兼容setuptools，并修复了一些bug。

+ +
注意: 非常建议你使用虚拟环境virtualenv来开发
+ +

python包索引Python Package Index (PyPI) 是一个标准的python打包文件的分发点。如果你需要查找一些python的功能，这是一个很好的查询的地方。

+ +

参阅: http://k0s.org/portfolio/packaging.html

+ +

参阅：

+ + -- cgit v1.2.3-54-g00ecf