From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/guide/css/getting_started/boxes/index.html | 330 +++++++++++++ .../cascading_and_inheritance/index.html | 124 +++++ .../web/guide/css/getting_started/color/index.html | 332 ++++++++++++++ .../guide/css/getting_started/content/index.html | 160 +++++++ .../css/getting_started/how_css_works/index.html | 120 +++++ .../zh-cn/web/guide/css/getting_started/index.html | 58 +++ .../css/getting_started/javascript/index.html | 171 +++++++ .../guide/css/getting_started/layout/index.html | 367 +++++++++++++++ .../web/guide/css/getting_started/lists/index.html | 323 +++++++++++++ .../web/guide/css/getting_started/media/index.html | 391 ++++++++++++++++ .../css/getting_started/readable_css/index.html | 166 +++++++ .../guide/css/getting_started/selectors/index.html | 413 +++++++++++++++++ .../css/getting_started/svg_and_css/index.html | 191 ++++++++ .../guide/css/getting_started/tables/index.html | 508 +++++++++++++++++++++ .../css/getting_started/text_styles/index.html | 157 +++++++ .../css/getting_started/what_is_css/index.html | 114 +++++ .../css/getting_started/why_use_css/index.html | 104 +++++ .../guide/css/getting_started/xml_data/index.html | 241 ++++++++++ 18 files changed, 4270 insertions(+) create mode 100644 files/zh-cn/web/guide/css/getting_started/boxes/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/color/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/content/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/how_css_works/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/javascript/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/layout/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/lists/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/media/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/readable_css/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/selectors/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/svg_and_css/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/tables/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/text_styles/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/what_is_css/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/why_use_css/index.html create mode 100644 files/zh-cn/web/guide/css/getting_started/xml_data/index.html (limited to 'files/zh-cn/web/guide/css/getting_started') diff --git a/files/zh-cn/web/guide/css/getting_started/boxes/index.html b/files/zh-cn/web/guide/css/getting_started/boxes/index.html new file mode 100644 index 0000000000..05d0dffafc --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/boxes/index.html @@ -0,0 +1,330 @@ +--- +title: 盒模型 +slug: Web/Guide/CSS/Getting_started/Boxes +translation_of: Learn/CSS/Building_blocks +--- +

{{ 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/web/guide/css/getting_started/cascading_and_inheritance/index.html b/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html new file mode 100644 index 0000000000..8bc02fb698 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html @@ -0,0 +1,124 @@ +--- +title: 层叠和继承 +slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_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/web/guide/css/getting_started/color/index.html b/files/zh-cn/web/guide/css/getting_started/color/index.html new file mode 100644 index 0000000000..bab181afd1 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/color/index.html @@ -0,0 +1,332 @@ +--- +title: Color +slug: Web/Guide/CSS/Getting_started/Color +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +

{{ 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/web/guide/css/getting_started/content/index.html b/files/zh-cn/web/guide/css/getting_started/content/index.html new file mode 100644 index 0000000000..f3f9a0797b --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/content/index.html @@ -0,0 +1,160 @@ +--- +title: Content +slug: Web/Guide/CSS/Getting_started/Content +translation_of: Learn/CSS/Howto/Generated_content +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色") }}这是 CSS 入门教程的第9部分，介绍了一些通过CSS改变文档内容的方法。这样，仅修改样式表你就能把文本内容及图片添加到文档。

+ +

信息: 内容

+ +

CSS的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。

+ +

在样式中可以定义文本内容和图片内容。当内容与文档结构紧密相关的时候，你可以在样式表中指定内容。

+ +
+
更多细节
+ +

在样式表中指定内容会使事情变得复杂：你可能有多个语言版本的文档共享同一个样式表。如果样式表的一部分需要翻译，这就意味着你需要将这部分单独保存在多个样式表中，并在不同语言的文档中引用。

+ +

如果你指定的内容由通用符号和图片组成的话，就不存在这个问题。

+ +

样式表中指定的内容不会成为DOM的一部分。

+
+ +

文本内容

+ +

CSS可以在元素的前后插入文本：在选择器的后面加上{{ cssxref("::before") }} 或者 {{ cssxref("::after") }} 。在声明中，指定 {{ cssxref("content") }} 属性，并设置文本内容。

+ +
+
例
+ +

下面这条规则在所有类名包含 ref的元素前面加上 Reference:

+ +
.ref::before {
+  font-weight: bold;
+  color: navy;
+  content: "Reference: ";
+}
+
+
+ +
+
更多细节
+ +

样式表默认使用UTF-8字符集。也可以通过link属性或样式表以及其他方式指定。 参见 CSS规范中 4.4 CSS style sheet representation

+ +

还可以通过转义机制（通过反斜杠转义）指定单个字符。比如， \265B 是国际象棋黑皇后的符号 ♛。更多参见 Referring to characters not represented in a character encoding 和CSS规范中的 Characters and case。

+
+ +

图片内容

+ +

可以通过将{{ cssxref("content") }} 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。

+ +
+
例
+ +

下面这条规则在所有类名包含glossary的a标签后面插入一个空格和一个图标：

+ +
a.glossary::after {content: " " url("../images/glossary-icon.gif");}
+
+
+ +

将图片设置成元素的背景图：将 {{ cssxref("background") }} 的值设为图片的URL。这是同时设置背景颜色，背景图，图片如何重复等的快捷写法。

+ +
+
例
+ +

这条规则通过指定图片URL设置特定元素的背景。

+ +

这是一个ID选择器；no-repeat表示背景图只出现一次，不重复:

+ +
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+
+
+ +
+
更多细节
+ +

了解更多影响背景图的属性，以及其他背景图选项，参见 {{ cssxref("background") }} 。

+
+ +

实践: 添加背景图片

+ +

这幅图是一个白方块，底部有一条蓝色实线:

+ + + + + + + +
Image:Blue-rule.png
+ +
    +
  1. 下载上图放到CSS同目录下
    2. +
  2. 编辑CSS文件，为body设置背景图. + 
    background: url("Blue-rule.png");
+
    + +

    背景图默认是 repeat（重复）的，无需明确指出。图片在水平和垂直方向重复，最终呈现出横格纸的效果：

    + +
    +

    Image:Blue-rule-ground.png

    + +
    +
    +

    Cascading Style Sheets

    +
    + +
    +

    Cascading Style Sheets

    +
    +
    +
    +
    3. +
+ +
+
挑战
+ +

下载图片:

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

在样式表中增加一条规则，使得每行前面显示上面的图标

+ +
+

Image:Blue-rule-ground.png

+ +
+
image:Yellow-pin.png Cascading Style Sheets
+ +
image:Yellow-pin.png Cascading Style Sheets
+
+
+ +
+
Possible solution
+ +

Add this rule to your stylesheet:

+ +
p:before{
+  content: url("yellow-pin.png");
+}
+
+ +

 

+Hide solution
+答案.
+ +

接下来?

+ +

{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Lists", "列表") }}列表是一种常见的为列表元素添加内容的方式。下节将介绍如何 为列表元素指定样式。

diff --git a/files/zh-cn/web/guide/css/getting_started/how_css_works/index.html b/files/zh-cn/web/guide/css/getting_started/how_css_works/index.html new file mode 100644 index 0000000000..b43fc34302 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/how_css_works/index.html @@ -0,0 +1,120 @@ +--- +title: CSS如何工作 +slug: Web/Guide/CSS/Getting_started/How_CSS_works +translation_of: Learn/CSS/First_steps/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/web/guide/css/getting_started/index.html b/files/zh-cn/web/guide/css/getting_started/index.html new file mode 100644 index 0000000000..9e9aefd3d9 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/index.html @@ -0,0 +1,58 @@ +--- +title: CSS入门教程 +slug: Web/Guide/CSS/Getting_started +tags: + - CSS + - 'CSS:Getting_Started' + - CSS入门 + - CSS教程 + - Web + - 初学者 + - 教程 +translation_of: Learn/CSS/First_steps +--- +

 

+ +

该  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/web/guide/css/getting_started/javascript/index.html b/files/zh-cn/web/guide/css/getting_started/javascript/index.html new file mode 100644 index 0000000000..c5ccd6e901 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/javascript/index.html @@ -0,0 +1,171 @@ +--- +title: JavaScript 与 CSS +slug: Web/Guide/CSS/Getting_started/JavaScript +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +

{{ 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/web/guide/css/getting_started/layout/index.html b/files/zh-cn/web/guide/css/getting_started/layout/index.html new file mode 100644 index 0000000000..cd58ff4d63 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/layout/index.html @@ -0,0 +1,367 @@ +--- +title: 布局 +slug: Web/Guide/CSS/Getting_started/Layout +translation_of: Learn/CSS/CSS_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/web/guide/css/getting_started/lists/index.html b/files/zh-cn/web/guide/css/getting_started/lists/index.html new file mode 100644 index 0000000000..94cb7f3c1a --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/lists/index.html @@ -0,0 +1,323 @@ +--- +title: Lists +slug: Web/Guide/CSS/Getting_started/Lists +translation_of: Learn/CSS/Styling_text/Styling_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/web/guide/css/getting_started/media/index.html b/files/zh-cn/web/guide/css/getting_started/media/index.html new file mode 100644 index 0000000000..ef181eedcc --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/media/index.html @@ -0,0 +1,391 @@ +--- +title: 媒体 +slug: Web/Guide/CSS/Getting_started/Media +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +

{{CSSTutorialTOC}} {{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Tables", "表格")}}

+ +

本章节是 CSS入门教程 指南的第14章也是最后一部分。 这本指南主要描述了用来展示文档的CSS的属性及其值，本章节依旧着眼于这个目标，同时也会介绍CSS样式表的结构。

+ +

信息: Media

+ +

CSS的作用是将网页文档以更友好的展现方式呈现给用户。

+ +

例如，假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法。

+ +

CSS通过使用{{CSSXref("@media")}} 的格式来对特定的媒介指定适配规则。

+ +
+
示例
+ +

我们的站点上有一个导航区域允许用户浏览。

+ +

在标签语言中，导航区域父元素的id是 nav-area.(在 {{HTMLVersionInline(5)}}中, 可以使用 {{HTMLElement("nav")}} 元素代替带有id属性的 {{HTMLElement("div")}}。)

+ +

为了网页在被打印的时候去掉无用的信息，我们在样式表中加一条适配规则，使导航区域在打印时是被隐藏起来的:

+ +
@media print {
+  #nav-area {display: none;}
+  }
+
+
+ +

一些常见的媒介类型:

+ + + + + + + + + + + + + + + + + + + + +
screen彩色计算机显示
print打印（分页式媒体）
projection投影
all所有媒体 (默认)
+ +
+
更多
+ +

一些其他指定媒介类型的规则。

+ +

类型可以在样式表通过link方式加到文档时被指定，这是文档的标签语言允许的 。例如，在HTML中，你可以通过在 LINK 标签上添加media属性来指定媒介类型。

+ +

在CSS中，你可以在样式表开头使用 {{CSSXref("@import")}} 一个url来引入另外的样式表，同时指定其媒介类型。

+ +

根据这些知识，你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。

+ +

想获取媒介类型更多细节，请参考CSS规范中的 Media 部分。

+ +

接下来将介绍更多 {{cssxref("display")}} 属性的例子: XML data.

+
+ +

打印

+ +

CSS有一些特性能够支持打印和分页媒体。

+ +

 {{cssxref("@page")}} 规则能够设置页间距，对于双面打印，还可以分开设置 @page:left 和 @page:right。

+ +

对于打印媒介，可以使用适当的长度单位，像是英寸(in)、点（1pt = 1/72 inch）、厘米（cm）还有毫米（mm）。这等同于使用em来配合字体大小和百分比。

+ +

可以通过使用 {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} 和 {{cssxref("page-break-inside")}} 属性来控制文档内容的分页边界。

+ +
+
示例
+ +

这个规则把四个方向的页边距都设置为1 inch:

+ +
@page {margin: 1in;} 
+ +

这个规则确保每个H1元素都从新的一页开始:

+ +
h1 {page-break-before: always;}
+
+
+ +
+
更多细节
+ +

想获取更多细节，请参考CSS规范中的 Paged media 部分。

+ +

像CSS的其他特性一样，打印也依赖于你的浏览器及其设置。例如，在打印的时候Mozilla浏览器支持默认的间距，页眉和页脚。而当其他用户打印你的文档时，你无法预知他会使用的什么样的浏览器和设置，因此你也不能完全控制打印情况。

+
+ +

用户界面

+ +

CSS有一些特殊的属性能够支持设备的用户界面，像电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。

+ +

并没有针对用户界面设备的特殊媒介类型。

+ +

下面有五种特殊的选择器:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
E{{cssxref(":hover")}}当鼠标悬浮任何E元素上
E{{cssxref(":focus")}}当元素获得键盘焦点
E{{cssxref(":active")}}当元素是当前的活动元素
E{{cssxref(":link")}}当元素超链接到一个url但是用户还没有访问过
E{{cssxref(":visited")}}当元素超链接到一个url但是用户已经访问过
+ +
+

注意: 在 {{gecko("2.0")}} 中可获得的 :visited 选择器信息是有限的。更过细节请参照 Privacy and the :visited selector 。

+
+ +

 {{cssxref("cursor")}} 属性指定鼠标的形状：一些常见的形状如下表所示。把你的鼠标放在列表的选项上来看浏览器中实际显示的鼠标形状:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
pointer指示超链接
wait表明程序无法接受输入
progress表明程序正在运行，但是仍可以接受输入
default默认（通常是箭头）
+ +

 {{cssxref("outline")}} 属性通过创建轮廓来表明获得键盘焦点。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
+ 它的作用相当于 {{cssxref("border")}} 属性，但与其不同的是它不能指明个别方向。

+ +

一些其他的用户界面特性通常会通过属性来应用。例如，禁用或者只读的元素可以设置 disabled 属性和 readonly 属性。选择器可以通过方括: {{mediawiki.external('disabled')}} 或者 {{mediawiki.external('readonly')}}来指定这些属性。

+ +
+
示例
+ +

这些规则规定了按钮在用户使用时动态变化的样式:

+ +
.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  } 
+ +

这个wiki不支持页面上的用户界面，所以这些按钮不能点击。下面用一些静态图片来举例说明:

+ + + + + + + +
+ + + + + + + + + + + + + + + + +
Click MeClick MeClick Me
 
disablednormalactive
+
+ +

当一个功能性按钮初始化的时候，它的周围会围绕着一条黑色的轮廓。当它获取键盘焦点时，从表面上看有一条虚线轮廓。同时当鼠标悬浮在它上面时也有一些悬浮效果。

+
+ +
+
更多
+ +

获取更多关于CSS用户界面的信息，请参考CSS规范中的 User interface 部分。

+ +

本文的第二部分列举了Mozilla的用户界面标签语言的例子，XUL。

+
+ +

实践: 打印文档

+ +
    +
  1. 创建一个新的HTML文档, doc4.html. 把下面的HTML代码粘贴过去: + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Print sample</title>
+    <link rel="stylesheet" href="style4.css">
+  </head>
+  <body>
+    <h1>Section A</h1>
+    <p>This is the first section...</p>
+    <h1>Section B</h1>
+    <p>This is the second section...</p>
+    <div id="print-head">
+      Heading for paged media
+    </div>
+    <div id="print-foot">
+      Page:
+    </div>
+</body>
+</html>
+
    +
    2. +
  2. 创建一个新的样式表, style4.css. 把下面的HTML代码粘贴过去: + 
    /*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+
    +
    3. +
  3. 在浏览器中查看文档，你会看到它使用的是默认样式。
    4. +
  4. 打印（或者打印预览）文档；样式表的适配规则开始起作用，同时会显示每个页面的页眉和页脚，如果浏览器支持记数器，页码也会被显示出来。 + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section A
    + +
    This is the first section...
    + +
    Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section B
    + +
    This is the second section...
    + +
    Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + + +
挑战
把指定打印样式的规则转移到单独的CSS文件。 +

学习 {{CSSXref("@import")}} 了解如何将新的指定打印 CSS 文件引用到 style4.css 样式表里去。

+ +

当鼠标放在标题时，改变颜色为蓝色。

+
+ +

查看这些挑战的解决方案。

+ +

接下来?

+ +

如果你还是很难理解这个章节，或者你对它有一些意见或者建议，请在 讨论区 中不吝赐教。

+ +

目前，本文所有的样式规则都可以在文件里面规定。这些规则及其值均是固定的。下面的篇章将会描述该如何使用程序语言 JavaScript 来动态地改变规则。

diff --git a/files/zh-cn/web/guide/css/getting_started/readable_css/index.html b/files/zh-cn/web/guide/css/getting_started/readable_css/index.html new file mode 100644 index 0000000000..a3ef5d29ec --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/readable_css/index.html @@ -0,0 +1,166 @@ +--- +title: 创建可读性良好的CSS +slug: Web/Guide/CSS/Getting_started/Readable_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +

{{ 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/web/guide/css/getting_started/selectors/index.html b/files/zh-cn/web/guide/css/getting_started/selectors/index.html new file mode 100644 index 0000000000..51f8693438 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/selectors/index.html @@ -0,0 +1,413 @@ +--- +title: 选择器 +slug: Web/Guide/CSS/Getting_started/Selectors +translation_of: Learn/CSS/Building_blocks/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/web/guide/css/getting_started/svg_and_css/index.html b/files/zh-cn/web/guide/css/getting_started/svg_and_css/index.html new file mode 100644 index 0000000000..f2e753baca --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/svg_and_css/index.html @@ -0,0 +1,191 @@ +--- +title: SVG and CSS +slug: Web/Guide/CSS/Getting_started/SVG_and_CSS +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +
+ {{CSSTutorialTOC}}
+

本节将演示如何将CSS应用到 SVG 中。

+

你将创建一个简单的演示代码并在支持SVG的浏览器中运行。

+

这是 CSS 教程 第二部分的第二节
+ 前一节: JavaScript
+ 下一节: XML data

+

信息: SVG

+

SVG (Scalable Vector Graphics)是一个基于XML的图形描述语言。

+

它可以用于描述静态图、动画，以及用户界面。

+

和其他基于XML的语言一样，SVG 支持用 CSS 样式表将图形内容和图形样式分离。

+

在样式表中你可以在任何可以可以指定图片的地方指定一个SVG的URL。比如，在HTML的样式表中，你可以为 background 属性指定一个SVG的URL。

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

在这个教程编写的时间点(2011中旬)，绝大多数现代浏览器都对SVG有基本的支持。其中包括 Internet Explorer 9 及其后续版本。一些SVG特性只被某些浏览器支持。参见 SVG tables on caniuse.com 了解支持情况。 参见 SVG element reference 了解兼容情况。

+

通过安装 Adobe 提供的插件，你可以让某些浏览器支持SVG。

+

欲在Mozilla了解更多关于SVG的信息，参考 这里SVG。

+
+

实例: 一个SVG演示

+

建立一个SVG文件doc8.svg。复制下面所有内容：

+
<?xml version="1.0" standalone="no"?>
+
+<?xml-stylesheet type="text/css" href="style8.css"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<title>SVG demonstration</title>
+<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
+
+<defs>
+  <g id="segment" class="segment">
+    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+    </g>
+  <g id="quadrant">
+    <use xlink:href="#segment"/>
+    <use xlink:href="#segment" transform="rotate(18)"/>
+    <use xlink:href="#segment" transform="rotate(36)"/>
+    <use xlink:href="#segment" transform="rotate(54)"/>
+    <use xlink:href="#segment" transform="rotate(72)"/>
+    </g>
+  <g id="petals">
+    <use xlink:href="#quadrant"/>
+    <use xlink:href="#quadrant" transform="rotate(90)"/>
+    <use xlink:href="#quadrant" transform="rotate(180)"/>
+    <use xlink:href="#quadrant" transform="rotate(270)"/>
+    </g>
+  <radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse">
+    <stop id="fade-stop-1" offset="33%"/>
+    <stop id="fade-stop-2" offset="95%"/>
+    </radialGradient>
+  </defs>
+
+<text id="heading" x="-280" y="-270">
+  SVG demonstration</text>
+<text  id="caption" x="-280" y="-250">
+  Move your mouse pointer over the flower.</text>
+
+<g id="flower">
+  <circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/>
+  <use id="outer-petals" xlink:href="#petals"/>
+  <use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/>
+  </g>
+
+</svg>
+
+

创建一个CSS文件, style8.css。 复制下面所有内容：

+
/*** SVG demonstration ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover > .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover > .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover > .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover > .segment-edge {
+  stroke: green;
+  }
+
+

在支持SVG的浏览器中打开上面的文档。将鼠标移到图上。

+

由于这个wiki不支持嵌入SVG，所以下面是一个截图供参考:

+ + + + + + +
SVG demonstration
+

解释:

+ + + + + + + + +
+ 挑战
修改样式表使得当鼠标指针移到任何一个内层花瓣上时所有内层花瓣都变为粉色，但不改变外层花瓣的效果。
+

接下来?

+

如果你有任何疑问或评论请移步到讨论区。

+

在这个演示中，支持SVG的浏览器知道如何显示SVG元素。样式表只是修改其呈现的方式。同样，这对HTML和XUL文档也是适用的。你也可以将CSS用于XML文档。（与HTML相比，）XML没有预先为元素定义样式。下一个节将对此进行演示: XML data

diff --git a/files/zh-cn/web/guide/css/getting_started/tables/index.html b/files/zh-cn/web/guide/css/getting_started/tables/index.html new file mode 100644 index 0000000000..7a7e442207 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/tables/index.html @@ -0,0 +1,508 @@ +--- +title: 表格 +slug: Web/Guide/CSS/Getting_started/Tables +translation_of: Learn/CSS/Building_blocks/Styling_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/web/guide/css/getting_started/text_styles/index.html b/files/zh-cn/web/guide/css/getting_started/text_styles/index.html new file mode 100644 index 0000000000..2f8f9f7629 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/text_styles/index.html @@ -0,0 +1,157 @@ +--- +title: 文本样式 +slug: Web/Guide/CSS/Getting_started/Text_styles +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +

{{ 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/web/guide/css/getting_started/what_is_css/index.html b/files/zh-cn/web/guide/css/getting_started/what_is_css/index.html new file mode 100644 index 0000000000..0f015ab172 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/what_is_css/index.html @@ -0,0 +1,114 @@ +--- +title: What is CSS +slug: Web/Guide/CSS/Getting_started/What_is_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +
{{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/web/guide/css/getting_started/why_use_css/index.html b/files/zh-cn/web/guide/css/getting_started/why_use_css/index.html new file mode 100644 index 0000000000..f312b080a3 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/why_use_css/index.html @@ -0,0 +1,104 @@ +--- +title: 为何使用CSS？ +slug: Web/Guide/CSS/Getting_started/Why_use_CSS +tags: + - CSS + - 'CSS:入门' + - NeedsLiveSample +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{ 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/web/guide/css/getting_started/xml_data/index.html b/files/zh-cn/web/guide/css/getting_started/xml_data/index.html new file mode 100644 index 0000000000..bbdbd784f5 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/xml_data/index.html @@ -0,0 +1,241 @@ +--- +title: XML 数据 +slug: Web/Guide/CSS/Getting_started/XML_data +tags: + - CSS + - Web + - 中级 + - 实例 + - 开始学CSS + - 指南 + - 需要更新 +translation_of: Archive/Beginner_tutorials/XML_data +--- +

{{ CSSTutorialTOC() }}

+ +

此页面包含一个如何使用CSS和XML数据的示例。

+ +

你将创建一个XML文档范例，和使之在浏览器中展现的样式表。

+ +

这是 CSS tutorial 第二部分的第三节。
+ 前一章节: SVG
+ 后一章节:  XBL binding

+ +

信息: XML 数据

+ +

XML (eXtensible Markup Language 可扩展标记语言) 是一种可用于任何类型的结构化数据的通用型语言。

+ +

默认情况下，Mozilla 浏览器会将 XML 按照非常类似XML文件的原始数据的方式展现。你可以看到定义数据结构的具体的标签。

+ +

通过将你的XML文档与CSS样式表链接，你可以定义展现XML的其他方式。为了实现这一点，样式表建立了映射规则，将XML文档中的标签映射为HTML中使用的展现类型。

+ + + + + + + + +
示例
XML文档中的数据采用<INFO> 标签。你希望文档中的 INFO 元素像 HTML 的段落一样展现。. +

在该文档的样式表中，你指定了 INFO 元素的展现方式：

+ +
+ 
+INFO {
+  display: block;
+  margin: 1em 0;
+  }
+
+
+
+ +

在display属性中最常用的值是：

+ + + + + + + + + + + + +
blockDisplayed like HTML's DIV (for headings, paragraphs)
inlineDisplayed like HTML's SPAN (for emphasis within text)
+ +

如同对待HTML一样，通过设置字体、间距和其他细节来添加你自己的样式规则。

+ + + + + + + + +
更多细节
其他display的值可以展现类似于列表项目的元素，或者类似表格组件的元素。 +

请查看CSS规范中的The display property ，来获取全部display类型。

+ +

单独使用CSS，display的结构必须与文档结构一致。其它方式是修改display的结构—例如：使用XBL添加内容，使用JavaScript修改DOM。

+ +

请查看 XML 页面，来获取更多关于XML in Mozilla的信息。

+
+ +

实例: XML 演示

+ +

新建一个 XML 文件： doc9.xml 。复制粘帖以下内容，注意滚动以获得全部：

+ +
+
<?xml version="1.0"?>
+<!-- XML demonstration -->
+
+<?xml-stylesheet type="text/css" href="style9.css"?>
+
+<!DOCTYPE planet>
+<planet>
+
+<ocean>
+<name>Arctic</name>
+<area>13,000</area>
+<depth>1,200</depth>
+</ocean>
+
+<ocean>
+<name>Atlantic</name>
+<area>87,000</area>
+<depth>3,900</depth>
+</ocean>
+
+<ocean>
+<name>Pacific</name>
+<area>180,000</area>
+<depth>4,000</depth>
+</ocean>
+
+<ocean>
+<name>Indian</name>
+<area>75,000</area>
+<depth>3,900</depth>
+</ocean>
+
+<ocean>
+<name>Southern</name>
+<area>20,000</area>
+<depth>4,500</depth>
+</ocean>
+
+</planet>
+
+
+ +

新建一个 CSS 文件： style9.css 。复制粘帖以下内容，注意滚动以获得全部：

+ +
+
/*** XML demonstration ***/
+
+planet:before {
+  display: block;
+  width: 8em;
+  font-weight: bold;
+  font-size: 200%;
+  content: "Oceans";
+  margin: -.75em 0px .25em -.25em;
+  padding: .1em .25em;
+  background-color: #cdf;
+  }
+
+planet {
+  display: block;
+  margin: 2em 1em;
+  border: 4px solid #cdf;
+  padding: 0px 1em;
+  background-color: white;
+  }
+
+ocean {
+  display: block;
+  margin-bottom: 1em;
+  }
+
+name {
+  display: block;
+  font-weight: bold;
+  font-size: 150%;
+  }
+
+area {
+  display: block;
+  }
+
+area:before {
+  content: "Area: ";
+  }
+
+area:after {
+  content: " million km\B2";
+  }
+
+depth {
+  display: block;
+  }
+
+depth:before {
+  content: "Mean depth: ";
+  }
+
+depth:after {
+  content: " m";
+  }
+
+
+ +

在你的浏览器中打开该文档：

+ + + + + + + +
+
+

Oceans

+ +

Arctic
+ Area: 13,000 million km²
+ Mean depth: 1,200 m

+ +

Atlantic
+ Area: 87,000 million km²
+ Mean depth: 3,900 m

+ +

. . .

+
+
+ +


+ 此演示的注解：

+ + + +

 

+ + + + + + + + +
挑战
修改样式表使文档可以作为表格展现。 +

（请参见 CSS 规范的 Tables 章节作为参考。）

+
+ +

接下来？

+ +

如果你难以理解此页面，或者你有其他意见，请提交到讨论页： Discussion 。

+ +

这是本教程的最后一页。请查看此 wiki 的 CSS 主页，获取更多Mozilla CSS 信息。

-- cgit v1.2.3-54-g00ecf