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 --- .../building_blocks/a_cool_looking_box/index.html | 88 +++ .../creating_fancy_letterheaded_paper/index.html | 101 +++ .../fundamental_css_comprehension/index.html | 127 ++++ .../handling_different_text_directions/index.html | 151 +++++ .../index.html" | 151 ----- .../css_layout/legacy_layout_methods/index.html | 577 ++++++++++++++++ .../learn/css/css_layout/positioning/index.html | 615 +++++++++++++++++ .../index.html" | 577 ---------------- .../\345\256\232\344\275\215/index.html" | 615 ----------------- .../index.html" | 162 ----- .../css/first_steps/getting_started/index.html | 267 ++++++++ .../learn/css/first_steps/how_css_works/index.html | 162 +++++ .../\345\274\200\345\247\213/index.html" | 267 -------- files/zh-cn/learn/css/howto/css_faq/index.html | 183 ++++++ .../learn/css/howto/generated_content/index.html | 160 +++++ .../fundamental_css_comprehension/index.html | 127 ---- .../styling_boxes/a_cool_looking_box/index.html | 88 --- .../creating_fancy_letterheaded_paper/index.html | 101 --- .../learn/css/styling_text/fundamentals/index.html | 727 +++++++++++++++++++++ files/zh-cn/learn/css/styling_text/index.html | 54 ++ .../css/styling_text/styling_links/index.html | 431 ++++++++++++ .../css/styling_text/styling_lists/index.html | 374 +++++++++++ .../styling_text/typesetting_a_homepage/index.html | 119 ++++ .../learn/css/styling_text/web_fonts/index.html | 186 ++++++ .../fundamentals/index.html" | 727 --------------------- .../index.html" | 54 -- .../styling_links/index.html" | 431 ------------ .../styling_lists/index.html" | 374 ----------- .../typesetting_a_homepage/index.html" | 119 ---- .../web_\345\255\227\344\275\223/index.html" | 186 ------ 30 files changed, 4322 insertions(+), 3979 deletions(-) create mode 100644 files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html create mode 100644 files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html create mode 100644 files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html delete mode 100644 "files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" create mode 100644 files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html create mode 100644 files/zh-cn/learn/css/css_layout/positioning/index.html delete mode 100644 "files/zh-cn/learn/css/css_layout/\344\274\240\347\273\237\347\232\204\345\270\203\345\261\200\346\226\271\346\263\225/index.html" delete mode 100644 "files/zh-cn/learn/css/css_layout/\345\256\232\344\275\215/index.html" delete mode 100644 "files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" create mode 100644 files/zh-cn/learn/css/first_steps/getting_started/index.html create mode 100644 files/zh-cn/learn/css/first_steps/how_css_works/index.html delete mode 100644 "files/zh-cn/learn/css/first_steps/\345\274\200\345\247\213/index.html" create mode 100644 files/zh-cn/learn/css/howto/css_faq/index.html create mode 100644 files/zh-cn/learn/css/howto/generated_content/index.html delete mode 100644 files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html delete mode 100644 files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html delete mode 100644 files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html create mode 100644 files/zh-cn/learn/css/styling_text/fundamentals/index.html create mode 100644 files/zh-cn/learn/css/styling_text/index.html create mode 100644 files/zh-cn/learn/css/styling_text/styling_links/index.html create mode 100644 files/zh-cn/learn/css/styling_text/styling_lists/index.html create mode 100644 files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html create mode 100644 files/zh-cn/learn/css/styling_text/web_fonts/index.html delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/fundamentals/index.html" delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/index.html" delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_links/index.html" delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_lists/index.html" delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/typesetting_a_homepage/index.html" delete mode 100644 "files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/web_\345\255\227\344\275\223/index.html" (limited to 'files/zh-cn/learn/css') diff --git a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html new file mode 100644 index 0000000000..6ddd1d114b --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html @@ -0,0 +1,88 @@ +--- +title: 一个漂亮的盒子 +slug: Learn/CSS/Styling_boxes/A_cool_looking_box +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

在这个评估里，通过尝试创造一个引人瞩目的盒子，你将得到更多关于如何创造酷炫盒子的练习。

+ + + + + + + + + + + + +
前提条件：在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。
目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如背景和边框。
+ +

起点

+ +

在开始评估之前，你需要：

+ + + +
+

提醒：或者你也可以用JSBin或Thimble这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。

+
+ +

项目简介

+ +

你的任务是创建一个酷炫的盒子，并探索CSS的乐趣。

+ +

一般任务

+ + + +

样式化盒子

+ +

给{{htmlelement("p")}}添加样式：

+ + + +

范例

+ +

完成之后的盒子可能会像下面的截图这样：

+ +

+ +

评估

+ +

如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在Learning Area Discourse thread或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！

+ +

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

在这个模块里

+ + + +

​​​ 

diff --git a/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..692071dfde --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,101 @@ +--- +title: 创建精美的信纸 +slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
+ +

如果你想给人留下好印象，把信写在一张精美的信纸上会是个不错的开始，在这个评估里我们希望你能创建一个在线模版来达到这样的效果。

+ + + + + + + + + + + + +
前提条件：在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。
目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如实现背景等。
+ +

起点

+ +

在开始评估之前，你需要：

+ + + +
+

提醒：或者你也可以用JSBin或Thimble这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。

+
+ +

项目简介

+ +

你已经有了创建一个信纸模版所需的所有文件，只需把它们放到一起就好。为了达到目标，你需要：

+ +

信纸主体

+ + + +

标志

+ + + +

提示和技巧

+ + + +

范例

+ +

完成之后的信纸可能会像下面的截图这样：

+ +

+ +

 

+ +

评估

+ +

如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 discussion thread for this exercise 或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

在这个模块里

+ + + +

 

diff --git a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..b246af87fe --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,127 @@ +--- +title: 基本的CSS理解 +slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +tags: + - 初学者 + - 盒模型 + - 评估 + - 选择器 +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

你已经在这个模块中了解到了很多内容, 所以当你达到这个模块的最后一篇文章的时候，感觉一定非常不错吧！在你继续之前的最后一步，就是完成对于这个模块的测验。本次测验涉及到几个相关的练习，你必须按顺序完成，这样你才能设计出最终的成品：一张名片/游戏玩家卡片/社交媒体的简介。

+ + + + + + + + + + + + +
学习本章的前提条件:在尝试这个测验之前，你应该已经完成了这个模块中所有文章的学习。
目标：来测试对 CSS 理论、语法、功能性的基本理解。
+ +

起点

+ +

在开始测验之前，你应该:

+ + + +
+

注意: 另外, 你可以使用一个网站比如 JSBin 或 Thimble 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 this URL 来让 <img> 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入<style> 元素中。

+
+ +

项目概要

+ +

我们已经为你提供了一些原始的 HTML 和一张图片，然后需要编写必要的 CSS 来让其成为一个漂亮的网上小名片，可能大小是游戏玩家卡片或社交媒体简介的两倍。下面的段落描述了你需要做的事情。

+ +

基本设置:

+ + + +

关注我们为你提供的选择器和规则集：

+ + + +

你需要写的新规则：

+ + + +
+

注意: 记住第二条规则集会将 font-size: 10px; 设置在 <html> 元素上 — 这意味着 <html> 的任何后代中，一个em将会等于10px而不是默认的 16px 。(这是当然的，如果在层次结构中，有不同的 font-size 设置于其上，问题中的后代没有任何的祖先位于 em元素和 <html> 之间。这可能会影响您所需要的值，尽管在这个简单的示例中，这不是问题。)

+
+ +

其他事情要考虑：

+ + + +

注意和提示

+ + + +

示例

+ +

完成的设计应如下图所示：

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

评估

+ +

如果您将此评估作为有组织的课程的一部分，您应该能够将您的工作交给您的老师/导师进行打分。 如果您是自学的，那么您可以通过询问  Learning Area Discourse thread, 或在 #mdn的IRC频道 Mozilla IRC 中轻松获得打分指南. 首先尝试练习 - 作弊学不到什么！

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+ +

在本单元中

+ + diff --git a/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html new file mode 100644 index 0000000000..f907c93a3c --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html @@ -0,0 +1,151 @@ +--- +title: 处理不同方向的文本 +slug: Learn/CSS/Building_blocks/处理_不同_方向的_文本 +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
+ +

目前为止我们在CSS学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。

+ +

然而，CSS在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。

+ + + + + + + + + + + + +
先决条件：计算机基础知识，基本软件（参见basic software installed），文件管理的基本知识（参见working with files），HTML基础（HTML 学习Introduction to HTML）以及CSS基础（学习CSS first steps）。
目标：了解书写模式对现代CSS的重要
+ +

什么是书写模式

+ +

CSS中的书写模式是指文本的排列方向是横向还是纵向的。{{cssxref("writing-mode")}} 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。

+ +

下面的例子中，我们使用writing-mode: vertical-rl对一个标题的显示进行设置。现在，标题文本是竖向的了。竖向文本在平面设计中很常见，也可以为你的网页设计增添更加有趣的外观。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

+ +

writing-mode的三个值分别是：

+ + + +

因此，writing-mode属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。

+ +

书写模式、块级布局和内联布局

+ +

我们已经讨论了块级布局和内联布局（block and inline layout），也知道外部显示类型元素分为块级元素和内联元素。如上所述，块级显示和内联显示与文本的书写模式（而非屏幕的物理显示）密切相关。如果你使用书写模式的显示是横向的，如英文，那么块在页面上的显示就是从上到下的。

+ +

用一个例子可以更清楚地说明这一点。下一个例子中有两个盒子，分别包含一个标题和一个段落。第一个盒子应用的是writing-mode: horizontal-tb，这是一个从上到下的横向的书写模式。第二个盒子应用的是writing-mode: vertical-rl，这是一个从右到左的纵向的书写模式。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

+ +

当我们切换书写模式时，我们也在改变块和内联文本的方向。horizontal-tb书写模式下块的方向是从上到下的横向的，而 vertical-rl书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。 

+ +

这张图展示了在水平书写模式下的两种维度。

+ +

这张图片展示了纵向书写模式下的两种维度。

+ +

+ +

一旦你开始接触CSS布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。

+ +

方向

+ +

除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想讲某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是CSS本身功能的一部分。网页可不仅限于从左向右排列的语言！

+ +

由于书写模式和文本方向都是可变的，新的CSS布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的开头和结尾一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握CSS非常有用。

+ +

逻辑属性和逻辑值

+ +

我们之所以要在这里探讨书写模式和方向，是因为目前为止我们已经了解了很多与屏幕的物理显示密切相关的很多属性，而书写模式和方向在水平书写模式下会很有意义。

+ +

让我们再来看看那两个盒子——一个用horizontal-tb设定了书写模式，一个用vertical-rl设定了书写模式。我为这两个盒子分别设定了宽度（ {{cssxref("width")}}）。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

+ +

通过这一些列调整，我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。

+ +

为了更容易实现这样的转变，CSS最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。

+ +

横向书写模式下，映射到width的属性被称作内联尺寸（{{cssxref("inline-size")}}）——内联维度的尺寸。而映射height的属性被称为块级尺寸（{{cssxref("block-size")}}），这是块级维度的尺寸。下面的例子展示了替换掉width的inline-size是如何生效的。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

+ +

逻辑外边距、边框和内边距属性

+ +

我们在前面两节中学习了CSS的盒模型和CSS边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、 {{cssxref("padding-left")}}和 {{cssxref("border-bottom")}}。就像width和height有映射，这些属性也有相应的映射。

+ +

margin-top属性的映射是{{cssxref("margin-block-start")}}——总是指向块级维度开始处的边距。

+ +

{{cssxref("padding-left")}}属性映射到 {{cssxref("padding-inline-start")}}，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。{{cssxref("border-bottom")}}属性映射到的是{{cssxref("border-block-end")}}，也就是块级维度结尾处的边框。

+ +

下面是物理和逻辑属性之间的对比。

+ +

如果你用writing-mode把盒子.box的书写模式改为vertical-rl，你将会看到尽管盒子的物理方向变了，盒子的物理属性仍然没变，然而逻辑属性会随着书写模式一起改变。

+ +

你还可以看到，二级标题{{htmlelement("h2")}}有一个黑色的底部边框border-bottom。你知道如何使得底部边框无论在那种书写模式下都位于文本的下方吗？

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

+ +

对于每一个普通边距，都有许多属性可以参考，你可以在MDN页面（Logical Properties and Values）查看所有映射属性。

+ +

逻辑值

+ +

目前为止我们看到的都是逻辑属性的名称。还有一些属性的取值是一些物理值（如top、right、bottom和left）。这些值同样拥有逻辑值映射（block-start、inline-end、block-end和inline-start）。

+ +

例如，你可以将一张图片移到左边，并使文本环绕图片。你可以将left替换为inline-start ，就像下面的例子中一样。

+ +

将这个例子的书写模式改为vertical-rl，看看图片会发生什么。将inline-start改为inline-end来改变图片的移动。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

+ +

之类，我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。

+ +
+

译者注：float的逻辑值暂时只有Firefox和Firefox for Android支持，上面的例子可能无法生效。

+
+ +

应该使用物理属性还是逻辑属性呢？

+ +

逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看MDN的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。

+ +

总结

+ +

本章介绍的概念在CSS的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。

+ +

在下一部分，我们将会看一下CSS中的溢出。

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

+ +

模块目录

+ +
    +
  1. 层叠与继承
    2. +
  2. CSS选择器 + +
    3. +
  3. 盒模型
    4. +
  4. 背景与边框
    5. +
  5. 处理不同文字方向的文本
    6. +
  6. 溢出的内容
    7. +
  7. 值和单位
    8. +
  8. 在CSS中调整大小
    9. +
  9. 图像、媒体和表单元素
    10. +
  10. 样式化表格
    11. +
  11. 调试CSS
    12. +
  12. 组织CSS
    13. +
diff --git "a/files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" "b/files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" deleted file mode 100644 index f907c93a3c..0000000000 --- "a/files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: 处理不同方向的文本 -slug: Learn/CSS/Building_blocks/处理_不同_方向的_文本 -translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
- -

目前为止我们在CSS学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。

- -

然而，CSS在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。

- - - - - - - - - - - - -
先决条件：计算机基础知识，基本软件（参见basic software installed），文件管理的基本知识（参见working with files），HTML基础（HTML 学习Introduction to HTML）以及CSS基础（学习CSS first steps）。
目标：了解书写模式对现代CSS的重要
- -

什么是书写模式

- -

CSS中的书写模式是指文本的排列方向是横向还是纵向的。{{cssxref("writing-mode")}} 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。

- -

下面的例子中，我们使用writing-mode: vertical-rl对一个标题的显示进行设置。现在，标题文本是竖向的了。竖向文本在平面设计中很常见，也可以为你的网页设计增添更加有趣的外观。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

- -

writing-mode的三个值分别是：

- - - -

因此，writing-mode属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。

- -

书写模式、块级布局和内联布局

- -

我们已经讨论了块级布局和内联布局（block and inline layout），也知道外部显示类型元素分为块级元素和内联元素。如上所述，块级显示和内联显示与文本的书写模式（而非屏幕的物理显示）密切相关。如果你使用书写模式的显示是横向的，如英文，那么块在页面上的显示就是从上到下的。

- -

用一个例子可以更清楚地说明这一点。下一个例子中有两个盒子，分别包含一个标题和一个段落。第一个盒子应用的是writing-mode: horizontal-tb，这是一个从上到下的横向的书写模式。第二个盒子应用的是writing-mode: vertical-rl，这是一个从右到左的纵向的书写模式。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

- -

当我们切换书写模式时，我们也在改变块和内联文本的方向。horizontal-tb书写模式下块的方向是从上到下的横向的，而 vertical-rl书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。 

- -

这张图展示了在水平书写模式下的两种维度。

- -

这张图片展示了纵向书写模式下的两种维度。

- -

- -

一旦你开始接触CSS布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。

- -

方向

- -

除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想讲某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是CSS本身功能的一部分。网页可不仅限于从左向右排列的语言！

- -

由于书写模式和文本方向都是可变的，新的CSS布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的开头和结尾一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握CSS非常有用。

- -

逻辑属性和逻辑值

- -

我们之所以要在这里探讨书写模式和方向，是因为目前为止我们已经了解了很多与屏幕的物理显示密切相关的很多属性，而书写模式和方向在水平书写模式下会很有意义。

- -

让我们再来看看那两个盒子——一个用horizontal-tb设定了书写模式，一个用vertical-rl设定了书写模式。我为这两个盒子分别设定了宽度（ {{cssxref("width")}}）。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

- -

通过这一些列调整，我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。

- -

为了更容易实现这样的转变，CSS最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。

- -

横向书写模式下，映射到width的属性被称作内联尺寸（{{cssxref("inline-size")}}）——内联维度的尺寸。而映射height的属性被称为块级尺寸（{{cssxref("block-size")}}），这是块级维度的尺寸。下面的例子展示了替换掉width的inline-size是如何生效的。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

- -

逻辑外边距、边框和内边距属性

- -

我们在前面两节中学习了CSS的盒模型和CSS边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、 {{cssxref("padding-left")}}和 {{cssxref("border-bottom")}}。就像width和height有映射，这些属性也有相应的映射。

- -

margin-top属性的映射是{{cssxref("margin-block-start")}}——总是指向块级维度开始处的边距。

- -

{{cssxref("padding-left")}}属性映射到 {{cssxref("padding-inline-start")}}，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。{{cssxref("border-bottom")}}属性映射到的是{{cssxref("border-block-end")}}，也就是块级维度结尾处的边框。

- -

下面是物理和逻辑属性之间的对比。

- -

如果你用writing-mode把盒子.box的书写模式改为vertical-rl，你将会看到尽管盒子的物理方向变了，盒子的物理属性仍然没变，然而逻辑属性会随着书写模式一起改变。

- -

你还可以看到，二级标题{{htmlelement("h2")}}有一个黑色的底部边框border-bottom。你知道如何使得底部边框无论在那种书写模式下都位于文本的下方吗？

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

- -

对于每一个普通边距，都有许多属性可以参考，你可以在MDN页面（Logical Properties and Values）查看所有映射属性。

- -

逻辑值

- -

目前为止我们看到的都是逻辑属性的名称。还有一些属性的取值是一些物理值（如top、right、bottom和left）。这些值同样拥有逻辑值映射（block-start、inline-end、block-end和inline-start）。

- -

例如，你可以将一张图片移到左边，并使文本环绕图片。你可以将left替换为inline-start ，就像下面的例子中一样。

- -

将这个例子的书写模式改为vertical-rl，看看图片会发生什么。将inline-start改为inline-end来改变图片的移动。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

- -

之类，我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。

- -
-

译者注：float的逻辑值暂时只有Firefox和Firefox for Android支持，上面的例子可能无法生效。

-
- -

应该使用物理属性还是逻辑属性呢？

- -

逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看MDN的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。

- -

总结

- -

本章介绍的概念在CSS的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。

- -

在下一部分，我们将会看一下CSS中的溢出。

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

- -

模块目录

- -
    -
  1. 层叠与继承
    2. -
  2. CSS选择器 - -
    3. -
  3. 盒模型
    4. -
  4. 背景与边框
    5. -
  5. 处理不同文字方向的文本
    6. -
  6. 溢出的内容
    7. -
  7. 值和单位
    8. -
  8. 在CSS中调整大小
    9. -
  9. 图像、媒体和表单元素
    10. -
  10. 样式化表格
    11. -
  11. 调试CSS
    12. -
  12. 组织CSS
    13. -
diff --git a/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html new file mode 100644 index 0000000000..58313b6fdd --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/legacy_layout_methods/index.html @@ -0,0 +1,577 @@ +--- +title: 传统的布局方法 +slug: Learn/CSS/CSS_layout/传统的布局方法 +translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

+ +

在CSS布局中，网格系统是一种非常常见的布局方式，并且在CSS 网格布局之前，它们倾向于由浮动和其他的布局功能实现。假想你的布局是一组数字标注的列（例如4、6或者12），然后把你的内容填充到这些想象的列中。这篇文章将要探讨这种早期的方法是怎么实现的，来帮助你在旧项目工作时更好地理解他们。

+ + + + + + + + + + + + +
学习前提：HTML 基础(学习 Introduction to HTML),并且了解CSS是怎么工作的(学习 Introduction to CSS and Styling boxes.)
目标：了解浏览器CSS网格布局系统的基本概念。
+ +

CSS网格布局之前的布局与网格系统

+ +

一个来自设计领域的人或许会惊讶，CSS直到最近才有网格系统，不仅如此，我们还用了许多次优方法来建立类网格设计。我们现在把这些称为“古老”的方法。

+ +

对于新项目来说，大多数情况下CSS网格布局（CSS Grid Layout）被用来和其他一个或多个现代的布局方法结合，以形成布局的基础。但是你会时不时的遇到采用这种古老方法的“网格系统”。值得了解它们是如何工作的，以及为什么它们和CSS网格布局不同。

+ +

这个课程将会解释基于float和flexbox的网格系统和网格框架是如何工作的。学习过网格布局之后，你可能会惊讶，这些看起来真的好复杂！如果你需要为不支持新技术的老浏览器上创建后备代码的话，这些知识将会变的十分有用，而且你也可以在使用这些类别系统的已有工程上工作。

+ +

值得铭记在心的是，在我们探索这些系统时，它们里面没有哪个的建立方式是像通过CSS网格布局创建网格那样，真的建立一个网格。他们通过给目标一个大小， 然后推动它们，让它们看起来像网格一样排列成一条线。

+ +

两列布局

+ +

让我们从最简单的实例开始——一个两列布局。你可以按照步骤在你的电脑上创建一个新的 index.html，先用一个简单HTML模板填充它，然后在适当的位置填充下面的代码。在这节底部，你可以看到一个展示最终代码样貌的实时实例。

+ +

首先，我们需要在我们的栏中放入一些内容。把现在在body中的内容替换成下面的代码：

+ +
<h1>2 column layout example</h1>
+<div>
+  <h2>First column</h2>
+  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+</div>
+
+<div>
+  <h2>Second column</h2>
+  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+</div>
+ +

每一列都需要一个上一级元素来包含内容，这样我们可以一次性操作所有内容。在这个例子中我们选择了{{htmlelement("div")}}， 但是你可以选择其他更合适的，例如{{htmlelement("article")}}, {{htmlelement("section")}}, 和 {{htmlelement("aside")}}，或者是任何别的元素。

+ +

现在我们来看CSS。首先，应用以下的代码来对HTML进行基本设置：

+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+ +

body将会占据90%的视口宽度，直到达到900像素，在这种情况下，它将固定并保持在视口正中。 默认情况下，它的子项（the {{htmlelement("h1")}} 和两个 {{htmlelement("div")}}）将会达到正文宽度的100%。如果我们希望两个{{htmlelement("div")}}，一个浮在窗口的一边，另一个浮动在另一边的话， 我们需要将它们的宽度设置为其父元素的100%或者更小，以便他们可以并排放置。将下面的代码加在CSS的底部：

+ +
div:nth-of-type(1) {
+  width: 48%;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+}
+ +

这里我们将它们都设置为了父元素宽度的48%——总共是96%，在两栏之间留4%的空隙，为它们提供一些宽松的空间。现在我们只需要将让列浮动，像这样：

+ +
div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}
+ +

将这些都放在一起，会得到这样的结果：

+ +
+ +
+ +

{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}

+ +

你有没有注意到我们在宽度的表示上都用的是百分比——这是一个很好的策略，这创建了一个流动布局（liquid layout），能够适应不同的屏幕大小，在小一些的屏幕上也能使列保持一样的比例。试一试自己来调整浏览器窗口的宽度，这是响应式网页非常有价值的一个工具。

+ +
+

备注：你可以在 0_two-column-layout.html 实时查看这个实例（另见源代码）。

+
+ +

创建简单的传统网格框架

+ +

大多数传统的框架使用{{cssxref("float")}}属性来使列相邻排列，让它们看起来像是一个网格。以用float创建网格的流程工作，可以向你展示它们工作的原理，并介绍一些更高级的概念，并在浮动和清除这节课中学到的内容之上搭建更多的东西。

+ +

最简单的一类网格创建是固定宽度的——我们只需要计算设计中总的宽度、列的数目、每一列和间隔的宽度。但是，如果我们决定设计的网格是可以根据浏览器宽度缩放的，我们则需要计算每一列和间距的所占的宽度的百分比。

+ +

下一部分我们将学习如何创建这两种方式的网格。我们会构建一个有12列的表格——我们选择了12这个常见的数字，来看它对不同情景的适应情况，因为12可以被6，4，3，和2完全整除。

+ +

一个简单的固定宽度网格

+ +

让我们先来创建一个固定列宽度的网格系统吧。

+ +

首先，把 simple-grid.html下载储存下来，其body中包含以下的标记：

+ +
<div class="wrapper">
+  <div class="row">
+    <div class="col">1</div>
+    <div class="col">2</div>
+    <div class="col">3</div>
+    <div class="col">4</div>
+    <div class="col">5</div>
+    <div class="col">6</div>
+    <div class="col">7</div>
+    <div class="col">8</div>
+    <div class="col">9</div>
+    <div class="col">10</div>
+    <div class="col">11</div>
+    <div class="col">12</div>
+  </div>
+  <div class="row">
+    <div class="col span1">13</div>
+    <div class="col span6">14</div>
+    <div class="col span3">15</div>
+    <div class="col span2">16</div>
+  </div>
+</div>
+ +

我们的目标是把它变成一个有两行十二列的演示网格——第一行显示各列的大小，第二行显示网格上不同大小的区域。

+ +

+ +

在{{htmlelement("style")}}中，加入下面的代码，使容器右侧的内边距为20像素，总的宽度变为980像素。这样给我们留出960像素可以放置列和它们的间隔——这种情况下，内边距会被从总的内容宽度中减去，因为我们在{{cssxref("box-sizing")}}中将站点上所有的元素设置成了border-box （可以查看完全改变盒模型，获得更多解释）。

+ +
* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 20px;
+}
+ +

现在使用包装了网格每行的列容器，清除网格中每行的浮动，在你前面的规则里加入下面的规则：

+ +
.row {
+  clear: both;
+}
+ +

应用这条清除规则，意味着我们不用在每行上都填充12列元素。行与行之间不会互相干扰，并保持分隔。

+ +

列与列之间保持20像素的间隔。我们使用每列元素的左外边框来实现这个间隔。然后我们一共有12个间隔 — 12 x 20 = 240。

+ +

我们需要从960px的总宽减去这个间隔，然后剩下720像素给我们的列。如果用720除以12，我们知道每列有60个像素宽。

+ +

接下来我们给.col类写一个规则,  让它向左浮动，给它设置20像素的{{cssxref("margin-left")}}来实现一个间隔，再设置60像素的{{cssxref("width")}}。把下面的规则加到你的CSS底部：

+ +
.col {
+  float: left;
+  margin-left: 20px;
+  width: 60px;
+  background: rgb(255, 150, 150);
+}
+ +

单个列的最上面一行现在铺开成为了一个排列整齐的网格。

+ +
+

备注：我们也已经让每列变成亮红色，这样你就能准确看到每列占据了多少空间。

+
+ +

如果我们想让布局容器横跨多列，必须要给它设置特殊的类，来适应列的数量的{{cssxref("width")}} 值（加上间隔的值）。我们需要新建额外的类来允许横跨2-12列。每个宽度是将该列数的列宽加上间隔宽度相加的结果，这些宽度总是比列数少一个。

+ +

在你的CSS底部加入下面的内容：

+ +
/* Two column widths (120px) plus one gutter width (20px) */
+.col.span2 { width: 140px; }
+/* Three column widths (180px) plus two gutter widths (40px) */
+.col.span3 { width: 220px; }
+/* And so on... */
+.col.span4 { width: 300px; }
+.col.span5 { width: 380px; }
+.col.span6 { width: 460px; }
+.col.span7 { width: 540px; }
+.col.span8 { width: 620px; }
+.col.span9 { width: 700px; }
+.col.span10 { width: 780px; }
+.col.span11 { width: 860px; }
+.col.span12 { width: 940px; }
+ +

创建了这些类以后，我们可以在网格上布局不同宽度的列。试试保存并在你的浏览器上加载这个页面，来查看效果。

+ +
+

备注： 如果你在让上面的示例实现的时候正遇到麻烦，尝试将它和我们在GitHub上的完成版进行比较（再看下实时的示例）。

+
+ +

试试修改这些类，甚至添加、删除一些容器，来看看你能怎么改变这个布局。例如，你可以把第二行写成这样：

+ +
<div class="row">
+  <div class="col span8">13</div>
+  <div class="col span4">14</div>
+</div>
+ +

现在你的网格布局生效了。你可以简单的定义这些行，和每行的列数，然后给他们添加你想要的内容。真棒！

+ +

创建液态网格

+ +

这个网格表现的不错，但是它长度固定。 我们实际却想要一个弹性（流体）的网格，它可以随着浏览器的{{Glossary("viewport")}}大小的变化自动伸缩。为了达成这个目标，我们需要把相应的像素的长度变为百分比长度。

+ +

把固定宽度转为伸缩的基于百分比宽度的算式在下面：

+ +
target / context = result
+ +

在我们的列宽里，我们的目标列长度是60像素，我们的上下文是960像素的包装。我们可以这么计算百分比：

+ +
60 / 960 = 0.0625
+ +

然后我们挪动小数点两位，得到百分数6.25%。所以在CSS里面，我们可以用6.25%代替60像素。

+ +

我们需要同样这么算间隔：

+ +
20 / 960 = 0.02083333333
+ +

所以我们需要用2.08333333%代替.col里{{cssxref("margin-left")}}的20像素，和.wrapper里{{cssxref("padding-right")}}的20像素。

+ +

更新我们的网格

+ +

创建一个之前例子网页的副本。然后开始这个章节，或者制作一个simple-grid-finished.html代码的本地副本，以将其作为入手点。

+ +

更新第二个CSS规则（有着.wrapper选择器），像下面这样：

+ +
body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+ +

我们不仅给它一个百分比的{{cssxref("width")}}，还添加了{{cssxref("max-width")}}属性，来确保布局不过于宽。

+ +

下一步，更新第四条CSS规则（有.col选择器），像这样：

+ +
.col {
+  float: left;
+  margin-left: 2.08333333%;
+  width: 6.25%;
+  background: rgb(255, 150, 150);
+}
+ +

现在做些稍微麻烦的事 — 我们需要更新所有 .col.span 规则来把像素变为百分比。这需要点时间计算；为节省你的功夫，我们在下面替你做了。

+ +

像下面这样更新CSS规则的底部块：

+ +
/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
+.col.span2 { width: 14.58333333%; }
+/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
+.col.span3 { width: 22.91666666%; }
+/* And so on... */
+.col.span4 { width: 31.24999999%; }
+.col.span5 { width: 39.58333332%; }
+.col.span6 { width: 47.91666665%; }
+.col.span7 { width: 56.24999998%; }
+.col.span8 { width: 64.58333331%; }
+.col.span9 { width: 72.91666664%; }
+.col.span10 { width: 81.24999997%; }
+.col.span11 { width: 89.5833333%; }
+.col.span12 { width: 97.91666663%; }
+ +

现在保存你的代码，从浏览器里加载它，尝试改变视口长度——你应该可以看到网格完美地适配了。

+ +
+

备注：如果你在让上面的示例实现的时候正遇到困难，试着把它和我们GitHub上的完成版比较（另见实时的示例）。

+
+ +

使用calc()函数的更简单计算

+ +

你可以用 {{cssxref("calc()")}} 函数来在CSS里面做数学方面的计算——这允许你在CSS里插入简单的算式，来计算那些值。这个会很有用，特别当你有个复杂计算的时候，甚至你还可以在算式里用不同的单位，比如“我想要这个元素一直比它父元素少50像素”。看下这个来自MediaRecorder API教程的示例。

+ +

言归正传, 来讲我们的网格！我们网格里跨越超过一列的列，它的总长是6.45%乘跨越的列数加 2.08333333%，乘间隔数（间隔数总等于行数减一）。calc() 函数允许我们就在宽度值里面这么计算，所以对跨越4列的列我们可以这么算：

+ +
.col.span4 {
+  width: calc((6.25%*4) + (2.08333333%*3));
+}
+ +

试着用下面的内容替换你底部的规则块，然后在浏览器中重载，看看你是否能得到相同的结果：

+ +
.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
+.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
+.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
+.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
+.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
+.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
+.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
+.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
+.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
+.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
+.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
+ +
+

备注：你能在fluid-grid-calc.html里看到我们的完成版（另见实时版）。

+
+ +
+

备注：如果你不能让这个正常工作，可能是你的浏览器不支持calc()函数，尽管各浏览器对它的支持相当好——远至IE9那样老。

+
+ +

语义vs.“无语义”网格系统

+ +

在标记中添加类以定义布局，意味着您的内容和标记与您的可视化表示相关联。你将会偶尔听到，这种使用CSS类的方式，被描绘成“无语义”：描述了内容的外观，而不是描述内容的语义性的类的使用。这是我们的span2、span3等类所面临的情况。

+ +

这些并不是唯一的方法，你或许会转头决定使用网格，然后向已有的语义类里面加入尺寸信息。例如，如果你有一个带有content类的{{htmlelement("div")}}，而且你想让它横跨8列，你可以从span8类里面复制整个关于宽度的规则，结果是像这样的一条规则：

+ +
.content {
+  width: calc((6.25%*8) + (2.08333333%*7));
+}
+ +
+

备注： 如果你要用预处理工具，如Sass，你可以建立一个简单的类（mixin）以插入那个值。

+
+ +

在我们的网格里启用偏移容器

+ +

我们创造的网格很有效。只要我们想把所有容器都从网格的左手边对齐。如果我们想在第一个容器前来个空列，或者容器之间来个空列，我们需要新建一个偏移类，为站点加上左外边距，来可见地推动网格。再来点数学计算！

+ +

让我们实际试试吧。

+ +

从你以前的代码开始，或者把我们的fluid-grid.html文件用作起始点。

+ +

我们在CSS上搞一个类，它会给一个容器元素来个一列宽度的偏移。将下面的内容加到你的CSS的底部：

+ +
.offset-by-one {
+  margin-left: calc(6.25% + (2.08333333%*2));
+}
+ +

或者假如你更愿意自己算百分比，用下面这个：

+ +
.offset-by-one {
+  margin-left: 10.41666666%;
+}
+ +

想要给一个容器的左边加个有一列宽的空白的话，你可以在容器上添加这个类。例如，如果你在HTML中有这个内容的时候：

+ +
<div class="col span6">14</div>
+ +

试着用下面的替换：

+ +
<div class="col span5 offset-by-one">14</div>
+ +
+

备注： 注意你需要别让横跨多列的列太多，给偏移留点空间！

+
+ +

试着载入，刷新来查看区别，或者查看我们的fluid-grid-offset.html示例（另见实时示例）。完成的示例应该看起来像这样：

+ +

+ +
+

备注：作为额外练习，你能实现一个offset-by-two类吗？

+
+ +

浮动网格的限制

+ +

当你想用这个网格系统时，你得仔细看看你的总长是否正确，并且每行中的元素所横跨的列数不超过这一行可容纳的列数。由于浮动布局实现的方式，如果网格列的数目对与网格来说太大，在最后边的元素会跑到下一行去，搞坏了布局 。

+ +

还要记住，如果元素内容比行宽，它会溢出，看起来一团糟。

+ +

这个系统的最大限制是，它本质上是一维的。我们在处理列、让元素跨越列，但是处理不了行。如果不设置一个确定的高度，用老方法很难控制元素高。这个方法很不灵活 —它只有在你确定你的内容有个明确的高的情况下有用。

+ +

弹性盒网格？

+ +

如果你读了之前关于flexbox的文章，你大概会想，弹性布局是个写网格布局的好办法。现在有很多基于弹性布局的网格布局，并且弹性布局可以解决很多上面讲的问题。

+ +

但是，弹性布局不是为网格布局而设的，把它当网格布局来用也有新的挑战。举个简单的例子，我们可以使用我们在上面使用过的同样的示例标记，用下面的CSS样式化wrapper、row和col类：

+ +
body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+
+
+.row {
+  display: flex;
+}
+
+.col {
+  margin-left: 2.08333333%;
+  margin-bottom: 1em;
+  width: 6.25%;
+  flex: 1 1 auto;
+  background: rgb(255,150,150);
+}
+ +

你可以试着在你自己的示例里做这些替换，或者看下我们的flexbox-grid.html示例代码（另见实时版）。

+ +

这里，我们会把每行变成一个弹性容器。有了弹性盒为基础的网格，我们仍然需要行，以让我们的元素加起来能不超过100%。我们将容器设为display: flex。

+ +

在.col上。我们设定{{cssxref("flex")}}属性的第一个值（{{cssxref("flex-grow")}}）为1，这样我们的物件可以变大；第二个值（{{cssxref("flex-shrink")}}）为1，这样我们的物件可以缩小；第三个值（{{cssxref("flex-basis")}}）为auto。因为我们的元素的{{cssxref("width")}}被设定了， auto将会使用和flex-basis 值一样的宽度。

+ +

在顶行，我们有十二个整齐的盒子，它们在视口宽度改变时同等地放大缩小。可是在下一行，我们只有四个物件，它们也从六十像素的基础上变大变小。因为它们只有四个，它们可以长得比上一行的物件更快，结果是它们都占据了第二行的相同宽度。

+ +

+ +

为了解决这个问题，我们仍然需要包含span类，以提供一个用于那个元素的，可以替换掉为 flex-basis所使用的值的宽度。

+ +

它们也不遵从上面的物件使用的网格，因为它们对它一无所知。

+ +

弹性盒设计上是一维。它处理单个维度，行的或者列的。我们不能创建一个对行列严格要求的网格，意即如果我们要在我们的网格上使用弹性盒的话，我们仍然需要计算浮动布局的百分比。

+ +

在你的工程中，由于弹性盒相比浮动能提供附加的对齐和空间分布能力，你可能仍然选择使用弹性盒“网格”。但是你应该清楚，你仍然是在使用一个被设计用来做其他事情的工具。所以你可能觉得，这就像是在你抵达你想要的结果之前，让你跳过额外的坑。

+ +

第三方网格系统

+ +

既然我们理解了我们的网格计算背后的数学了，我们现在该看看一些常用的第三方网格系统了。如果你在互联网上搜索“CSS网格框架”的话，你会发现一个包含了可选项的庞大列表。流行的框架，例如Bootstrap和Foundation，就包含了网格系统。此外还有独立的网格系统，不是用CSS开发的就是用预处理器开发的。

+ +

让我们看下这些独立系统其中的一个，它阐释了利用网格框架工作的常见技术。我们将要使用的网格是Skeleton的一部分，它是一种简单的CSS框架。

+ +

访问Skeleton网站以开始，选择“Download”下载ZIP文件。解压文件，把skeleton.css和normalize.css复制到一个新路径下。

+ +

制作一个html-skeleton.html文件的副本，在同skeleton和normalize CSS相同的路径下保存副本。

+ +

在HTML页面包含skeleton和normalize CSS，通过把以下内容加到文件头部的方式：

+ +
<link href="normalize.css" rel="stylesheet">
+<link href="skeleton.css" rel="stylesheet">
+ +

Skeleton不仅包含了网格系统，它还包含了用于排版和其他能作为起始点的页面元素上的CSS。我们现在把这些部分留作默认值，我们在这里真正感兴趣的是网格。

+ +
+

备注：Normalize是由Nicolas Gallagher编写的一个很有用的小CSS库，它自动做了一些有用的基础布局修正，让元素默认的样式化在不同浏览器中更加协调。

+
+ +

我们将会使用和在前面的示例中相似的HTML。将下面的内容加到你的HTML body中：

+ +
<div class="container">
+  <div class="row">
+    <div class="col">1</div>
+    <div class="col">2</div>
+    <div class="col">3</div>
+    <div class="col">4</div>
+    <div class="col">5</div>
+    <div class="col">6</div>
+    <div class="col">7</div>
+    <div class="col">8</div>
+    <div class="col">9</div>
+    <div class="col">10</div>
+    <div class="col">11</div>
+    <div class="col">12</div>
+  </div>
+  <div class="row">
+    <div class="col">13</div>
+    <div class="col">14</div>
+    <div class="col">15</div>
+    <div class="col">16</div>
+  </div>
+</div>
+ +


+ 要开始使用Skeleton，我们需要给包装的{{htmlelement("div")}}一个container类——这已经包含在了我们的HTML里面。这让最大宽度为960像素的内容居中了。你可以看看盒子现在是怎么不会宽于960像素的。

+ +

你可以看看skeleton.css文件里，CSS在我们应用这个类的时候是如何使用的。<div>用值为auto的左右外边距居中，左边和右边还应用了20像素的内边距。同我们前面做过的那样，Skeleton同时把Skeleton{{cssxref("box-sizing")}}属性设为border-box值，所以这个元素的内边距和边框将会被包含在整个width里面。

+ +
.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+ +

如果它们在行里面的话，元素只会是网格的一部分，所以对于前面的示例，我们需要一个额外的<div>或者其他带有row类的、内嵌到content <div>和我们实际的内容容器的<div>之间的元素。我们也已经做了这件事。

+ +

现在让我们铺开容器盒子。Skeleton基于一个12列的网格。顶端一行的盒子都需要加上one column的类，以让它们横跨一列。

+ +

现在加上这些，像是在下面的节录里面显示的那样：

+ +
<div class="container">
+  <div class="row">
+    <div class="one column">1</div>
+    <div class="one column">2</div>
+    <div class="one column">3</div>
+    /* and so on */
+  </div>
+</div>
+ +

然后，给第二行的容器加上解释它们应该横跨几个列的类，像这样：

+ +
<div class="row">
+  <div class="one column">13</div>
+  <div class="six columns">14</div>
+  <div class="three columns">15</div>
+  <div class="two columns">16</div>
+</div>
+ +

试着保存你的HTML，在你的浏览器里面载入，看下效果。

+ +
+

备注：如果你在实现这个示例的时候遇到麻烦，试着拿它和我们的html-skeleton-finished.html文件进行比较（另见实时运行版）。

+
+ +

如果你看下skeleton.css文件的内容，你能理解这是如何实现的。例如，Skeleton有下面的定义内容，用于样式化加入了“three colomns”类的元素。

+ +
.three.columns { width: 22%; }
+ +

Skeleton（或者其他任何网格框架）正在做的所有事情是，设定一个预定义的类，你可以通过把它们加到你的标记文件里面的方式使用这些框架，和你自己做计算这些百分数的工作完全是一样的。

+ +

正如你所看到的这样，我们使用Skeleton的时候，几乎不需要写多少CSS。它在我们向标记文本里面加类的时候，替我们处理了所有的浮动。正是把布局的责任甩给其他人的可能性，使得使用用于网格系统的框架成为了一个强制性的选择！但是现在来看，有了CSS网格布局，许多开发者正在停止使用这些框架，转而使用CSS提供的内建的原生网格。

+ +

小结

+ +

你现在理解了多种网格系统是如何建立的。这将会在处理老网站的时候，以及理解CSS网格布局的原生网格和那些老系统的不同的时候帮到你。

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

+ +

模块目录

+ + diff --git a/files/zh-cn/learn/css/css_layout/positioning/index.html b/files/zh-cn/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..cbfa094300 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/positioning/index.html @@ -0,0 +1,615 @@ +--- +title: 定位 +slug: Learn/CSS/CSS_layout/定位 +tags: + - CSS + - 初学者 + - 定位 + - 布局 + - 指南 + - 相对定位 + - 绝对定位 +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

+
+ +

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 本文解释的是定位({{cssxref("position")}})的各种不同值，以及如何使用它们。

+ + + + + + + + + + + + +
预备知识:HTML 基础 (学习 HTML导学)和CSS怎样工作的 (学习 CSS导学)
目的:了解CSS定位的工作原理
+ +

文档流

+ +

定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它的工作原理。

+ +

首先，围绕元素内容添加任何内边距、边界和外边距来布置单个元素盒子——这就是 盒模型 ，我们前面看过。 默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。内联元素高宽与他们的内容高宽一样。您不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。 如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block;。

+ +

这只是解释了单个元素，但是元素相互之间如何交互呢？ 正常的布局流（在布局介绍文章中提到）是将元素放置在浏览器视口内的系统。默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。

+ +

内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。

+ +

如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫外边距折叠, 我们之前也遇到过。

+ +

让我们来看一个简单的例子来解析这一切：

+ +
<h1>Basic document flow</h1>
+
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
+
+<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
+
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
+
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+ +

{{ EmbedLiveSample('文档流', '100%', 500) }}

+ +

在我们阅读本文时，我们将多次重复这个例子，因为我们要展示不同定位选项的效果。

+ +

如果可能，我们希望您在本地计算机上跟随练习 — 从GitHub仓库下载一个0_basic-flow.html (源代码) 然后用它作为我们的起步点。

+ +

介绍定位

+ +

定位的整个想法是允许我们覆盖上面描述的基本文档流行为，以产生有趣的效果。如果你想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是你的工具。或者，如果您想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。

+ +

有许多不同类型的定位，您可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用{{cssxref("position")}}属性。

+ +

静态定位

+ +

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。

+ +

为了演示这一点，并为以后的部分设置示例，首先在HTML中添加一个positioned 的 class 到第二个{{htmlelement("p")}}：

+ +
<p class="positioned"> ... </p>
+ +

现在，将以下规则添加到CSS的底部：

+ +
.positioned {
+  position: static;
+  background: yellow;
+}
+ +

如果现在保存和刷新，除了第2段的更新的背景颜色，根本没有差别。这很好——正如我们之前所说，静态定位是默认行为！

+ +
+

注意：你可以在 1_static-positioning.html 查看这个例子 (see source code)。

+
+ +

相对定位

+ +

相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 让我们继续并更新代码中的 position 属性：

+ +
position: relative;
+ +

如果您在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？ 您需要使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}属性 ，我们将在下一节中解释。

+ +

介绍 top, bottom, left,  right

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, 和 {{cssxref("right")}} 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 .positioned 规则中添加以下声明：

+ +
top: 30px;
+left: 30px;
+ +
+

注意：这些属性的值可以采用逻辑上期望的任何单位 ——px，mm，rems，％等。

+
+ +

如果你现在保存和刷新，你会得到一个这样的结果：

+ + + +

{{ EmbedLiveSample('介绍_top_bottom_left_right', '100%', 500) }}

+ +

酷，是吗？ 好吧，所以这个结果这可能不是你期待的——为什么它移动到底部和右边，但我们指定顶部和左边？ 听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 top: 30px;一个力推动框的顶部，使它向下移动30px。

+ +
+

注意： 你可以在 2_relative-positioning.html 查看这个例子 (see source code)。

+
+ +

绝对定位

+ +

绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：

+ +
position: absolute;
+ +

如果你现在保存和刷新，你应该看到这样：

+ + + +

{{ EmbedLiveSample('绝对定位', '100%', 420) }}

+ +

首先，请注意，定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经靠在一起，就像第二个元素不再存在！好吧，在某种程度上，这是真的。绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……

+ +

第二，注意元素的位置已经改变——这是因为{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。 所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部30px，从左边30px。

+ +
+

注意：如果需要，您可以使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}} 调整元素大小。 尝试设置 top: 0; bottom: 0; left: 0; right: 0; 和 margin: 0; 对你定位的元素，看看会发生什么！ 之后再回来

+
+ +
+

注意：是的，margins 仍会影响定位的元素。 然而margin collapsing不会。

+
+ +
+

注意：你可以在3_absolute-positioning.html 查看这个例子(see source code)。

+
+ +

定位上下文

+ +

哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性。(参见 Identifying the containing block).

+ +

如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。

+ +

绝对定位元素在HTML源代码中，是被放在<body>中的，但是在最终的布局里面，它离页面(而不是<body>)的左边界、上边界有30px的距离。我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。 为了演示这一点，将以下声明添加到您的body规则中：

+ +
position: relative;
+ +

应该得到以下结果：

+ + + +

{{ EmbedLiveSample('定位上下文', '100%', 420) }}

+ +

定位的元素现在相对于{{htmlelement("body")}}元素。

+ +
+

注意：你可以在这里看到这个例子 4_positioning-context.html (see source code).

+
+ +

介绍 z-index

+ +

所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？ 在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢？

+ +

尝试添加以下到您的CSS，使第一段也是绝对定位：

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

此时，您将看到第一段的颜色为绿色，移出文档流程，并位于原始位置上方一点。它也堆叠在原始的 .positioned 段落下，其中两个重叠。这是因为 .positioned 段落是源顺序(HTML标记)中的第二个段落，并且源顺序中后定位的元素将赢得先定位的元素。

+ +

您可以更改堆叠顺序吗？是的，您可以使用{{cssxref("z-index")}}属性。 “z-index”是对z轴的参考。你可以从源代码中的上一点回想一下，我们使用水平（x轴）和垂直（y轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。 （0,0）位于页面（或元素）的左上角，x和y轴跨页面向右和向下（适合从左到右的语言，无论如何）。

+ +

网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。{{cssxref("z-index")}} 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。

+ +

要更改堆叠顺序，请尝试将以下声明添加到 p:nth-of-type(1) 规则中：

+ +
z-index: 1;
+ +

你现在应该可以看到完成的例子：

+ + + +

{{ EmbedLiveSample('介绍_z-index', '100%', 400) }}

+ +

请注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值，这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。

+ +
+

注意：你可以在这里看到这个例子 5_z-index.html (see source code).

+
+ +

固定定位

+ +

还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 {{htmlelement("html")}} 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

+ +

让我们举一个简单的例子来说明我们的意思。首先，从CSS中删除现有的 p:nth-of-type(1) 和.positioned 规则。

+ +

现在，更新 body 规则以删除position: relative; 声明并添加固定高度，如此：

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

现在我们要给{{htmlelement("h1")}}元素 position: fixed;，并让它坐在视口的顶部中心。将以下规则添加到CSS：

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

 top: 0;是要使它贴在屏幕的顶部；我们然后给出标题与内容列相同的宽度，并使用可靠的老技巧 margin: 0 auto; 使它居中。 然后我们给它一个白色背景和一些内边距，所以内容将不会在它下面可见。

+ +

如果您现在保存并刷新，您会看到一个有趣的小效果，标题保持固定，内容显示向上滚动并消失在其下。 但是我们可以改进这一点——目前标题下面挡住一些内容的开头。这是因为定位的标题不再出现在文档流中，所以其他内容向上移动到顶部。 我们要把它向下移动一点；我们可以通过在第一段设置一些顶部边距来做到这一点。添加：

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

你现在应该看到完成的例子：

+ + + +

{{ EmbedLiveSample('固定定位', '100%', 400) }}

+ +
+

注意：你可以在这里看到这个例子6_fixed-positioning.html (see source code).

+
+ +

position: sticky

+ +

还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起1​​0像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

+ + + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+ +

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

+ +

position: sticky 的另一种有趣且常用的用法，是创建一个滚动索引页面。在此页面上，不同的标题会停留在页面顶部。这样的示例的标记可能如下所示：

+ +
<h1>Sticky positioning</h1>
+
+<dl>
+    <dt>A</dt>
+    <dd>Apple</dd>
+    <dd>Ant</dd>
+    <dd>Altimeter</dd>
+    <dd>Airplane</dd>
+    <dt>B</dt>
+    <dd>Bird</dd>
+    <dd>Buzzard</dd>
+    <dd>Bee</dd>
+    <dd>Banana</dd>
+    <dd>Beanstalk</dd>
+    <dt>C</dt>
+    <dd>Calculator</dd>
+    <dd>Cane</dd>
+    <dd>Camera</dd>
+    <dd>Camel</dd>
+    <dt>D</dt>
+    <dd>Duck</dd>
+    <dd>Dime</dd>
+    <dd>Dipstick</dd>
+    <dd>Drone</dd>
+    <dt>E</dt>
+    <dd>Egg</dd>
+    <dd>Elephant</dd>
+    <dd>Egret</dd>
+</dl>
+ +

CSS可能如下所示。在正常布局流中，{{htmlelement("dt")}}元素将随内容滚动。当我们在{{htmlelement("dt")}}元素上添加position: sticky，并将{{cssxref("top")}}的值设置为0，当标题滚动到视口的顶部时，支持此属性的浏览器会将标题粘贴到那个位置。随后，每个后续标题将替换前一个标题，直到它向上滚动到该位置。

+ +
dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+
+ + + +

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

+ +
+

注意：你可以在 7_sticky-positioning.html 查看这个例子(see source code)。

+
+ +

试试你的技术!

+ +

这篇文章到此为止了，但你们能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证是否完全掌握了这个知识：试试你的技术。

+ +

总结

+ +

我相信你用基本定位愉快地玩耍；它是创建复杂的CSS布局和UI功能背后的基本工具之一。 考虑到这一点，在下一篇文章中，我们将更有趣的定位——我们将进一步，开始建立一些真实世界有用的东西。

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

+ +

在本单元中

+ + diff --git "a/files/zh-cn/learn/css/css_layout/\344\274\240\347\273\237\347\232\204\345\270\203\345\261\200\346\226\271\346\263\225/index.html" "b/files/zh-cn/learn/css/css_layout/\344\274\240\347\273\237\347\232\204\345\270\203\345\261\200\346\226\271\346\263\225/index.html" deleted file mode 100644 index 58313b6fdd..0000000000 --- "a/files/zh-cn/learn/css/css_layout/\344\274\240\347\273\237\347\232\204\345\270\203\345\261\200\346\226\271\346\263\225/index.html" +++ /dev/null @@ -1,577 +0,0 @@ ---- -title: 传统的布局方法 -slug: Learn/CSS/CSS_layout/传统的布局方法 -translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

- -

在CSS布局中，网格系统是一种非常常见的布局方式，并且在CSS 网格布局之前，它们倾向于由浮动和其他的布局功能实现。假想你的布局是一组数字标注的列（例如4、6或者12），然后把你的内容填充到这些想象的列中。这篇文章将要探讨这种早期的方法是怎么实现的，来帮助你在旧项目工作时更好地理解他们。

- - - - - - - - - - - - -
学习前提：HTML 基础(学习 Introduction to HTML),并且了解CSS是怎么工作的(学习 Introduction to CSS and Styling boxes.)
目标：了解浏览器CSS网格布局系统的基本概念。
- -

CSS网格布局之前的布局与网格系统

- -

一个来自设计领域的人或许会惊讶，CSS直到最近才有网格系统，不仅如此，我们还用了许多次优方法来建立类网格设计。我们现在把这些称为“古老”的方法。

- -

对于新项目来说，大多数情况下CSS网格布局（CSS Grid Layout）被用来和其他一个或多个现代的布局方法结合，以形成布局的基础。但是你会时不时的遇到采用这种古老方法的“网格系统”。值得了解它们是如何工作的，以及为什么它们和CSS网格布局不同。

- -

这个课程将会解释基于float和flexbox的网格系统和网格框架是如何工作的。学习过网格布局之后，你可能会惊讶，这些看起来真的好复杂！如果你需要为不支持新技术的老浏览器上创建后备代码的话，这些知识将会变的十分有用，而且你也可以在使用这些类别系统的已有工程上工作。

- -

值得铭记在心的是，在我们探索这些系统时，它们里面没有哪个的建立方式是像通过CSS网格布局创建网格那样，真的建立一个网格。他们通过给目标一个大小， 然后推动它们，让它们看起来像网格一样排列成一条线。

- -

两列布局

- -

让我们从最简单的实例开始——一个两列布局。你可以按照步骤在你的电脑上创建一个新的 index.html，先用一个简单HTML模板填充它，然后在适当的位置填充下面的代码。在这节底部，你可以看到一个展示最终代码样貌的实时实例。

- -

首先，我们需要在我们的栏中放入一些内容。把现在在body中的内容替换成下面的代码：

- -
<h1>2 column layout example</h1>
-<div>
-  <h2>First column</h2>
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-</div>
-
-<div>
-  <h2>Second column</h2>
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-</div>
- -

每一列都需要一个上一级元素来包含内容，这样我们可以一次性操作所有内容。在这个例子中我们选择了{{htmlelement("div")}}， 但是你可以选择其他更合适的，例如{{htmlelement("article")}}, {{htmlelement("section")}}, 和 {{htmlelement("aside")}}，或者是任何别的元素。

- -

现在我们来看CSS。首先，应用以下的代码来对HTML进行基本设置：

- -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-}
- -

body将会占据90%的视口宽度，直到达到900像素，在这种情况下，它将固定并保持在视口正中。 默认情况下，它的子项（the {{htmlelement("h1")}} 和两个 {{htmlelement("div")}}）将会达到正文宽度的100%。如果我们希望两个{{htmlelement("div")}}，一个浮在窗口的一边，另一个浮动在另一边的话， 我们需要将它们的宽度设置为其父元素的100%或者更小，以便他们可以并排放置。将下面的代码加在CSS的底部：

- -
div:nth-of-type(1) {
-  width: 48%;
-}
-
-div:nth-of-type(2) {
-  width: 48%;
-}
- -

这里我们将它们都设置为了父元素宽度的48%——总共是96%，在两栏之间留4%的空隙，为它们提供一些宽松的空间。现在我们只需要将让列浮动，像这样：

- -
div:nth-of-type(1) {
-  width: 48%;
-  float: left;
-}
-
-div:nth-of-type(2) {
-  width: 48%;
-  float: right;
-}
- -

将这些都放在一起，会得到这样的结果：

- -
- -
- -

{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}

- -

你有没有注意到我们在宽度的表示上都用的是百分比——这是一个很好的策略，这创建了一个流动布局（liquid layout），能够适应不同的屏幕大小，在小一些的屏幕上也能使列保持一样的比例。试一试自己来调整浏览器窗口的宽度，这是响应式网页非常有价值的一个工具。

- -
-

备注：你可以在 0_two-column-layout.html 实时查看这个实例（另见源代码）。

-
- -

创建简单的传统网格框架

- -

大多数传统的框架使用{{cssxref("float")}}属性来使列相邻排列，让它们看起来像是一个网格。以用float创建网格的流程工作，可以向你展示它们工作的原理，并介绍一些更高级的概念，并在浮动和清除这节课中学到的内容之上搭建更多的东西。

- -

最简单的一类网格创建是固定宽度的——我们只需要计算设计中总的宽度、列的数目、每一列和间隔的宽度。但是，如果我们决定设计的网格是可以根据浏览器宽度缩放的，我们则需要计算每一列和间距的所占的宽度的百分比。

- -

下一部分我们将学习如何创建这两种方式的网格。我们会构建一个有12列的表格——我们选择了12这个常见的数字，来看它对不同情景的适应情况，因为12可以被6，4，3，和2完全整除。

- -

一个简单的固定宽度网格

- -

让我们先来创建一个固定列宽度的网格系统吧。

- -

首先，把 simple-grid.html下载储存下来，其body中包含以下的标记：

- -
<div class="wrapper">
-  <div class="row">
-    <div class="col">1</div>
-    <div class="col">2</div>
-    <div class="col">3</div>
-    <div class="col">4</div>
-    <div class="col">5</div>
-    <div class="col">6</div>
-    <div class="col">7</div>
-    <div class="col">8</div>
-    <div class="col">9</div>
-    <div class="col">10</div>
-    <div class="col">11</div>
-    <div class="col">12</div>
-  </div>
-  <div class="row">
-    <div class="col span1">13</div>
-    <div class="col span6">14</div>
-    <div class="col span3">15</div>
-    <div class="col span2">16</div>
-  </div>
-</div>
- -

我们的目标是把它变成一个有两行十二列的演示网格——第一行显示各列的大小，第二行显示网格上不同大小的区域。

- -

- -

在{{htmlelement("style")}}中，加入下面的代码，使容器右侧的内边距为20像素，总的宽度变为980像素。这样给我们留出960像素可以放置列和它们的间隔——这种情况下，内边距会被从总的内容宽度中减去，因为我们在{{cssxref("box-sizing")}}中将站点上所有的元素设置成了border-box （可以查看完全改变盒模型，获得更多解释）。

- -
* {
-  box-sizing: border-box;
-}
-
-body {
-  width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 20px;
-}
- -

现在使用包装了网格每行的列容器，清除网格中每行的浮动，在你前面的规则里加入下面的规则：

- -
.row {
-  clear: both;
-}
- -

应用这条清除规则，意味着我们不用在每行上都填充12列元素。行与行之间不会互相干扰，并保持分隔。

- -

列与列之间保持20像素的间隔。我们使用每列元素的左外边框来实现这个间隔。然后我们一共有12个间隔 — 12 x 20 = 240。

- -

我们需要从960px的总宽减去这个间隔，然后剩下720像素给我们的列。如果用720除以12，我们知道每列有60个像素宽。

- -

接下来我们给.col类写一个规则,  让它向左浮动，给它设置20像素的{{cssxref("margin-left")}}来实现一个间隔，再设置60像素的{{cssxref("width")}}。把下面的规则加到你的CSS底部：

- -
.col {
-  float: left;
-  margin-left: 20px;
-  width: 60px;
-  background: rgb(255, 150, 150);
-}
- -

单个列的最上面一行现在铺开成为了一个排列整齐的网格。

- -
-

备注：我们也已经让每列变成亮红色，这样你就能准确看到每列占据了多少空间。

-
- -

如果我们想让布局容器横跨多列，必须要给它设置特殊的类，来适应列的数量的{{cssxref("width")}} 值（加上间隔的值）。我们需要新建额外的类来允许横跨2-12列。每个宽度是将该列数的列宽加上间隔宽度相加的结果，这些宽度总是比列数少一个。

- -

在你的CSS底部加入下面的内容：

- -
/* Two column widths (120px) plus one gutter width (20px) */
-.col.span2 { width: 140px; }
-/* Three column widths (180px) plus two gutter widths (40px) */
-.col.span3 { width: 220px; }
-/* And so on... */
-.col.span4 { width: 300px; }
-.col.span5 { width: 380px; }
-.col.span6 { width: 460px; }
-.col.span7 { width: 540px; }
-.col.span8 { width: 620px; }
-.col.span9 { width: 700px; }
-.col.span10 { width: 780px; }
-.col.span11 { width: 860px; }
-.col.span12 { width: 940px; }
- -

创建了这些类以后，我们可以在网格上布局不同宽度的列。试试保存并在你的浏览器上加载这个页面，来查看效果。

- -
-

备注： 如果你在让上面的示例实现的时候正遇到麻烦，尝试将它和我们在GitHub上的完成版进行比较（再看下实时的示例）。

-
- -

试试修改这些类，甚至添加、删除一些容器，来看看你能怎么改变这个布局。例如，你可以把第二行写成这样：

- -
<div class="row">
-  <div class="col span8">13</div>
-  <div class="col span4">14</div>
-</div>
- -

现在你的网格布局生效了。你可以简单的定义这些行，和每行的列数，然后给他们添加你想要的内容。真棒！

- -

创建液态网格

- -

这个网格表现的不错，但是它长度固定。 我们实际却想要一个弹性（流体）的网格，它可以随着浏览器的{{Glossary("viewport")}}大小的变化自动伸缩。为了达成这个目标，我们需要把相应的像素的长度变为百分比长度。

- -

把固定宽度转为伸缩的基于百分比宽度的算式在下面：

- -
target / context = result
- -

在我们的列宽里，我们的目标列长度是60像素，我们的上下文是960像素的包装。我们可以这么计算百分比：

- -
60 / 960 = 0.0625
- -

然后我们挪动小数点两位，得到百分数6.25%。所以在CSS里面，我们可以用6.25%代替60像素。

- -

我们需要同样这么算间隔：

- -
20 / 960 = 0.02083333333
- -

所以我们需要用2.08333333%代替.col里{{cssxref("margin-left")}}的20像素，和.wrapper里{{cssxref("padding-right")}}的20像素。

- -

更新我们的网格

- -

创建一个之前例子网页的副本。然后开始这个章节，或者制作一个simple-grid-finished.html代码的本地副本，以将其作为入手点。

- -

更新第二个CSS规则（有着.wrapper选择器），像下面这样：

- -
body {
-  width: 90%;
-  max-width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 2.08333333%;
-}
- -

我们不仅给它一个百分比的{{cssxref("width")}}，还添加了{{cssxref("max-width")}}属性，来确保布局不过于宽。

- -

下一步，更新第四条CSS规则（有.col选择器），像这样：

- -
.col {
-  float: left;
-  margin-left: 2.08333333%;
-  width: 6.25%;
-  background: rgb(255, 150, 150);
-}
- -

现在做些稍微麻烦的事 — 我们需要更新所有 .col.span 规则来把像素变为百分比。这需要点时间计算；为节省你的功夫，我们在下面替你做了。

- -

像下面这样更新CSS规则的底部块：

- -
/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
-.col.span2 { width: 14.58333333%; }
-/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
-.col.span3 { width: 22.91666666%; }
-/* And so on... */
-.col.span4 { width: 31.24999999%; }
-.col.span5 { width: 39.58333332%; }
-.col.span6 { width: 47.91666665%; }
-.col.span7 { width: 56.24999998%; }
-.col.span8 { width: 64.58333331%; }
-.col.span9 { width: 72.91666664%; }
-.col.span10 { width: 81.24999997%; }
-.col.span11 { width: 89.5833333%; }
-.col.span12 { width: 97.91666663%; }
- -

现在保存你的代码，从浏览器里加载它，尝试改变视口长度——你应该可以看到网格完美地适配了。

- -
-

备注：如果你在让上面的示例实现的时候正遇到困难，试着把它和我们GitHub上的完成版比较（另见实时的示例）。

-
- -

使用calc()函数的更简单计算

- -

你可以用 {{cssxref("calc()")}} 函数来在CSS里面做数学方面的计算——这允许你在CSS里插入简单的算式，来计算那些值。这个会很有用，特别当你有个复杂计算的时候，甚至你还可以在算式里用不同的单位，比如“我想要这个元素一直比它父元素少50像素”。看下这个来自MediaRecorder API教程的示例。

- -

言归正传, 来讲我们的网格！我们网格里跨越超过一列的列，它的总长是6.45%乘跨越的列数加 2.08333333%，乘间隔数（间隔数总等于行数减一）。calc() 函数允许我们就在宽度值里面这么计算，所以对跨越4列的列我们可以这么算：

- -
.col.span4 {
-  width: calc((6.25%*4) + (2.08333333%*3));
-}
- -

试着用下面的内容替换你底部的规则块，然后在浏览器中重载，看看你是否能得到相同的结果：

- -
.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
-.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
-.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
-.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
-.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
-.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
-.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
-.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
-.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
-.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
-.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
- -
-

备注：你能在fluid-grid-calc.html里看到我们的完成版（另见实时版）。

-
- -
-

备注：如果你不能让这个正常工作，可能是你的浏览器不支持calc()函数，尽管各浏览器对它的支持相当好——远至IE9那样老。

-
- -

语义vs.“无语义”网格系统

- -

在标记中添加类以定义布局，意味着您的内容和标记与您的可视化表示相关联。你将会偶尔听到，这种使用CSS类的方式，被描绘成“无语义”：描述了内容的外观，而不是描述内容的语义性的类的使用。这是我们的span2、span3等类所面临的情况。

- -

这些并不是唯一的方法，你或许会转头决定使用网格，然后向已有的语义类里面加入尺寸信息。例如，如果你有一个带有content类的{{htmlelement("div")}}，而且你想让它横跨8列，你可以从span8类里面复制整个关于宽度的规则，结果是像这样的一条规则：

- -
.content {
-  width: calc((6.25%*8) + (2.08333333%*7));
-}
- -
-

备注： 如果你要用预处理工具，如Sass，你可以建立一个简单的类（mixin）以插入那个值。

-
- -

在我们的网格里启用偏移容器

- -

我们创造的网格很有效。只要我们想把所有容器都从网格的左手边对齐。如果我们想在第一个容器前来个空列，或者容器之间来个空列，我们需要新建一个偏移类，为站点加上左外边距，来可见地推动网格。再来点数学计算！

- -

让我们实际试试吧。

- -

从你以前的代码开始，或者把我们的fluid-grid.html文件用作起始点。

- -

我们在CSS上搞一个类，它会给一个容器元素来个一列宽度的偏移。将下面的内容加到你的CSS的底部：

- -
.offset-by-one {
-  margin-left: calc(6.25% + (2.08333333%*2));
-}
- -

或者假如你更愿意自己算百分比，用下面这个：

- -
.offset-by-one {
-  margin-left: 10.41666666%;
-}
- -

想要给一个容器的左边加个有一列宽的空白的话，你可以在容器上添加这个类。例如，如果你在HTML中有这个内容的时候：

- -
<div class="col span6">14</div>
- -

试着用下面的替换：

- -
<div class="col span5 offset-by-one">14</div>
- -
-

备注： 注意你需要别让横跨多列的列太多，给偏移留点空间！

-
- -

试着载入，刷新来查看区别，或者查看我们的fluid-grid-offset.html示例（另见实时示例）。完成的示例应该看起来像这样：

- -

- -
-

备注：作为额外练习，你能实现一个offset-by-two类吗？

-
- -

浮动网格的限制

- -

当你想用这个网格系统时，你得仔细看看你的总长是否正确，并且每行中的元素所横跨的列数不超过这一行可容纳的列数。由于浮动布局实现的方式，如果网格列的数目对与网格来说太大，在最后边的元素会跑到下一行去，搞坏了布局 。

- -

还要记住，如果元素内容比行宽，它会溢出，看起来一团糟。

- -

这个系统的最大限制是，它本质上是一维的。我们在处理列、让元素跨越列，但是处理不了行。如果不设置一个确定的高度，用老方法很难控制元素高。这个方法很不灵活 —它只有在你确定你的内容有个明确的高的情况下有用。

- -

弹性盒网格？

- -

如果你读了之前关于flexbox的文章，你大概会想，弹性布局是个写网格布局的好办法。现在有很多基于弹性布局的网格布局，并且弹性布局可以解决很多上面讲的问题。

- -

但是，弹性布局不是为网格布局而设的，把它当网格布局来用也有新的挑战。举个简单的例子，我们可以使用我们在上面使用过的同样的示例标记，用下面的CSS样式化wrapper、row和col类：

- -
body {
-  width: 90%;
-  max-width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 2.08333333%;
-}
-
-
-.row {
-  display: flex;
-}
-
-.col {
-  margin-left: 2.08333333%;
-  margin-bottom: 1em;
-  width: 6.25%;
-  flex: 1 1 auto;
-  background: rgb(255,150,150);
-}
- -

你可以试着在你自己的示例里做这些替换，或者看下我们的flexbox-grid.html示例代码（另见实时版）。

- -

这里，我们会把每行变成一个弹性容器。有了弹性盒为基础的网格，我们仍然需要行，以让我们的元素加起来能不超过100%。我们将容器设为display: flex。

- -

在.col上。我们设定{{cssxref("flex")}}属性的第一个值（{{cssxref("flex-grow")}}）为1，这样我们的物件可以变大；第二个值（{{cssxref("flex-shrink")}}）为1，这样我们的物件可以缩小；第三个值（{{cssxref("flex-basis")}}）为auto。因为我们的元素的{{cssxref("width")}}被设定了， auto将会使用和flex-basis 值一样的宽度。

- -

在顶行，我们有十二个整齐的盒子，它们在视口宽度改变时同等地放大缩小。可是在下一行，我们只有四个物件，它们也从六十像素的基础上变大变小。因为它们只有四个，它们可以长得比上一行的物件更快，结果是它们都占据了第二行的相同宽度。

- -

- -

为了解决这个问题，我们仍然需要包含span类，以提供一个用于那个元素的，可以替换掉为 flex-basis所使用的值的宽度。

- -

它们也不遵从上面的物件使用的网格，因为它们对它一无所知。

- -

弹性盒设计上是一维。它处理单个维度，行的或者列的。我们不能创建一个对行列严格要求的网格，意即如果我们要在我们的网格上使用弹性盒的话，我们仍然需要计算浮动布局的百分比。

- -

在你的工程中，由于弹性盒相比浮动能提供附加的对齐和空间分布能力，你可能仍然选择使用弹性盒“网格”。但是你应该清楚，你仍然是在使用一个被设计用来做其他事情的工具。所以你可能觉得，这就像是在你抵达你想要的结果之前，让你跳过额外的坑。

- -

第三方网格系统

- -

既然我们理解了我们的网格计算背后的数学了，我们现在该看看一些常用的第三方网格系统了。如果你在互联网上搜索“CSS网格框架”的话，你会发现一个包含了可选项的庞大列表。流行的框架，例如Bootstrap和Foundation，就包含了网格系统。此外还有独立的网格系统，不是用CSS开发的就是用预处理器开发的。

- -

让我们看下这些独立系统其中的一个，它阐释了利用网格框架工作的常见技术。我们将要使用的网格是Skeleton的一部分，它是一种简单的CSS框架。

- -

访问Skeleton网站以开始，选择“Download”下载ZIP文件。解压文件，把skeleton.css和normalize.css复制到一个新路径下。

- -

制作一个html-skeleton.html文件的副本，在同skeleton和normalize CSS相同的路径下保存副本。

- -

在HTML页面包含skeleton和normalize CSS，通过把以下内容加到文件头部的方式：

- -
<link href="normalize.css" rel="stylesheet">
-<link href="skeleton.css" rel="stylesheet">
- -

Skeleton不仅包含了网格系统，它还包含了用于排版和其他能作为起始点的页面元素上的CSS。我们现在把这些部分留作默认值，我们在这里真正感兴趣的是网格。

- -
-

备注：Normalize是由Nicolas Gallagher编写的一个很有用的小CSS库，它自动做了一些有用的基础布局修正，让元素默认的样式化在不同浏览器中更加协调。

-
- -

我们将会使用和在前面的示例中相似的HTML。将下面的内容加到你的HTML body中：

- -
<div class="container">
-  <div class="row">
-    <div class="col">1</div>
-    <div class="col">2</div>
-    <div class="col">3</div>
-    <div class="col">4</div>
-    <div class="col">5</div>
-    <div class="col">6</div>
-    <div class="col">7</div>
-    <div class="col">8</div>
-    <div class="col">9</div>
-    <div class="col">10</div>
-    <div class="col">11</div>
-    <div class="col">12</div>
-  </div>
-  <div class="row">
-    <div class="col">13</div>
-    <div class="col">14</div>
-    <div class="col">15</div>
-    <div class="col">16</div>
-  </div>
-</div>
- -


- 要开始使用Skeleton，我们需要给包装的{{htmlelement("div")}}一个container类——这已经包含在了我们的HTML里面。这让最大宽度为960像素的内容居中了。你可以看看盒子现在是怎么不会宽于960像素的。

- -

你可以看看skeleton.css文件里，CSS在我们应用这个类的时候是如何使用的。<div>用值为auto的左右外边距居中，左边和右边还应用了20像素的内边距。同我们前面做过的那样，Skeleton同时把Skeleton{{cssxref("box-sizing")}}属性设为border-box值，所以这个元素的内边距和边框将会被包含在整个width里面。

- -
.container {
-  position: relative;
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
- -

如果它们在行里面的话，元素只会是网格的一部分，所以对于前面的示例，我们需要一个额外的<div>或者其他带有row类的、内嵌到content <div>和我们实际的内容容器的<div>之间的元素。我们也已经做了这件事。

- -

现在让我们铺开容器盒子。Skeleton基于一个12列的网格。顶端一行的盒子都需要加上one column的类，以让它们横跨一列。

- -

现在加上这些，像是在下面的节录里面显示的那样：

- -
<div class="container">
-  <div class="row">
-    <div class="one column">1</div>
-    <div class="one column">2</div>
-    <div class="one column">3</div>
-    /* and so on */
-  </div>
-</div>
- -

然后，给第二行的容器加上解释它们应该横跨几个列的类，像这样：

- -
<div class="row">
-  <div class="one column">13</div>
-  <div class="six columns">14</div>
-  <div class="three columns">15</div>
-  <div class="two columns">16</div>
-</div>
- -

试着保存你的HTML，在你的浏览器里面载入，看下效果。

- -
-

备注：如果你在实现这个示例的时候遇到麻烦，试着拿它和我们的html-skeleton-finished.html文件进行比较（另见实时运行版）。

-
- -

如果你看下skeleton.css文件的内容，你能理解这是如何实现的。例如，Skeleton有下面的定义内容，用于样式化加入了“three colomns”类的元素。

- -
.three.columns { width: 22%; }
- -

Skeleton（或者其他任何网格框架）正在做的所有事情是，设定一个预定义的类，你可以通过把它们加到你的标记文件里面的方式使用这些框架，和你自己做计算这些百分数的工作完全是一样的。

- -

正如你所看到的这样，我们使用Skeleton的时候，几乎不需要写多少CSS。它在我们向标记文本里面加类的时候，替我们处理了所有的浮动。正是把布局的责任甩给其他人的可能性，使得使用用于网格系统的框架成为了一个强制性的选择！但是现在来看，有了CSS网格布局，许多开发者正在停止使用这些框架，转而使用CSS提供的内建的原生网格。

- -

小结

- -

你现在理解了多种网格系统是如何建立的。这将会在处理老网站的时候，以及理解CSS网格布局的原生网格和那些老系统的不同的时候帮到你。

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

- -

模块目录

- - diff --git "a/files/zh-cn/learn/css/css_layout/\345\256\232\344\275\215/index.html" "b/files/zh-cn/learn/css/css_layout/\345\256\232\344\275\215/index.html" deleted file mode 100644 index cbfa094300..0000000000 --- "a/files/zh-cn/learn/css/css_layout/\345\256\232\344\275\215/index.html" +++ /dev/null @@ -1,615 +0,0 @@ ---- -title: 定位 -slug: Learn/CSS/CSS_layout/定位 -tags: - - CSS - - 初学者 - - 定位 - - 布局 - - 指南 - - 相对定位 - - 绝对定位 -translation_of: Learn/CSS/CSS_layout/Positioning ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

-
- -

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 本文解释的是定位({{cssxref("position")}})的各种不同值，以及如何使用它们。

- - - - - - - - - - - - -
预备知识:HTML 基础 (学习 HTML导学)和CSS怎样工作的 (学习 CSS导学)
目的:了解CSS定位的工作原理
- -

文档流

- -

定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它的工作原理。

- -

首先，围绕元素内容添加任何内边距、边界和外边距来布置单个元素盒子——这就是 盒模型 ，我们前面看过。 默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。内联元素高宽与他们的内容高宽一样。您不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。 如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block;。

- -

这只是解释了单个元素，但是元素相互之间如何交互呢？ 正常的布局流（在布局介绍文章中提到）是将元素放置在浏览器视口内的系统。默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。

- -

内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。

- -

如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫外边距折叠, 我们之前也遇到过。

- -

让我们来看一个简单的例子来解析这一切：

- -
<h1>Basic document flow</h1>
-
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
-
-<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
-
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: aqua;
-  border: 3px solid blue;
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: red;
-  border: 1px solid black;
-}
- -

{{ EmbedLiveSample('文档流', '100%', 500) }}

- -

在我们阅读本文时，我们将多次重复这个例子，因为我们要展示不同定位选项的效果。

- -

如果可能，我们希望您在本地计算机上跟随练习 — 从GitHub仓库下载一个0_basic-flow.html (源代码) 然后用它作为我们的起步点。

- -

介绍定位

- -

定位的整个想法是允许我们覆盖上面描述的基本文档流行为，以产生有趣的效果。如果你想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是你的工具。或者，如果您想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。

- -

有许多不同类型的定位，您可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用{{cssxref("position")}}属性。

- -

静态定位

- -

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。

- -

为了演示这一点，并为以后的部分设置示例，首先在HTML中添加一个positioned 的 class 到第二个{{htmlelement("p")}}：

- -
<p class="positioned"> ... </p>
- -

现在，将以下规则添加到CSS的底部：

- -
.positioned {
-  position: static;
-  background: yellow;
-}
- -

如果现在保存和刷新，除了第2段的更新的背景颜色，根本没有差别。这很好——正如我们之前所说，静态定位是默认行为！

- -
-

注意：你可以在 1_static-positioning.html 查看这个例子 (see source code)。

-
- -

相对定位

- -

相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 让我们继续并更新代码中的 position 属性：

- -
position: relative;
- -

如果您在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？ 您需要使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}属性 ，我们将在下一节中解释。

- -

介绍 top, bottom, left,  right

- -

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, 和 {{cssxref("right")}} 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 .positioned 规则中添加以下声明：

- -
top: 30px;
-left: 30px;
- -
-

注意：这些属性的值可以采用逻辑上期望的任何单位 ——px，mm，rems，％等。

-
- -

如果你现在保存和刷新，你会得到一个这样的结果：

- - - -

{{ EmbedLiveSample('介绍_top_bottom_left_right', '100%', 500) }}

- -

酷，是吗？ 好吧，所以这个结果这可能不是你期待的——为什么它移动到底部和右边，但我们指定顶部和左边？ 听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 top: 30px;一个力推动框的顶部，使它向下移动30px。

- -
-

注意： 你可以在 2_relative-positioning.html 查看这个例子 (see source code)。

-
- -

绝对定位

- -

绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：

- -
position: absolute;
- -

如果你现在保存和刷新，你应该看到这样：

- - - -

{{ EmbedLiveSample('绝对定位', '100%', 420) }}

- -

首先，请注意，定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经靠在一起，就像第二个元素不再存在！好吧，在某种程度上，这是真的。绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……

- -

第二，注意元素的位置已经改变——这是因为{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。 所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部30px，从左边30px。

- -
-

注意：如果需要，您可以使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}} 调整元素大小。 尝试设置 top: 0; bottom: 0; left: 0; right: 0; 和 margin: 0; 对你定位的元素，看看会发生什么！ 之后再回来

-
- -
-

注意：是的，margins 仍会影响定位的元素。 然而margin collapsing不会。

-
- -
-

注意：你可以在3_absolute-positioning.html 查看这个例子(see source code)。

-
- -

定位上下文

- -

哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性。(参见 Identifying the containing block).

- -

如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。

- -

绝对定位元素在HTML源代码中，是被放在<body>中的，但是在最终的布局里面，它离页面(而不是<body>)的左边界、上边界有30px的距离。我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。 为了演示这一点，将以下声明添加到您的body规则中：

- -
position: relative;
- -

应该得到以下结果：

- - - -

{{ EmbedLiveSample('定位上下文', '100%', 420) }}

- -

定位的元素现在相对于{{htmlelement("body")}}元素。

- -
-

注意：你可以在这里看到这个例子 4_positioning-context.html (see source code).

-
- -

介绍 z-index

- -

所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？ 在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢？

- -

尝试添加以下到您的CSS，使第一段也是绝对定位：

- -
p:nth-of-type(1) {
-  position: absolute;
-  background: lime;
-  top: 10px;
-  right: 30px;
-}
- -

此时，您将看到第一段的颜色为绿色，移出文档流程，并位于原始位置上方一点。它也堆叠在原始的 .positioned 段落下，其中两个重叠。这是因为 .positioned 段落是源顺序(HTML标记)中的第二个段落，并且源顺序中后定位的元素将赢得先定位的元素。

- -

您可以更改堆叠顺序吗？是的，您可以使用{{cssxref("z-index")}}属性。 “z-index”是对z轴的参考。你可以从源代码中的上一点回想一下，我们使用水平（x轴）和垂直（y轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。 （0,0）位于页面（或元素）的左上角，x和y轴跨页面向右和向下（适合从左到右的语言，无论如何）。

- -

网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。{{cssxref("z-index")}} 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。

- -

要更改堆叠顺序，请尝试将以下声明添加到 p:nth-of-type(1) 规则中：

- -
z-index: 1;
- -

你现在应该可以看到完成的例子：

- - - -

{{ EmbedLiveSample('介绍_z-index', '100%', 400) }}

- -

请注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值，这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。

- -
-

注意：你可以在这里看到这个例子 5_z-index.html (see source code).

-
- -

固定定位

- -

还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 {{htmlelement("html")}} 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

- -

让我们举一个简单的例子来说明我们的意思。首先，从CSS中删除现有的 p:nth-of-type(1) 和.positioned 规则。

- -

现在，更新 body 规则以删除position: relative; 声明并添加固定高度，如此：

- -
body {
-  width: 500px;
-  height: 1400px;
-  margin: 0 auto;
-}
- -

现在我们要给{{htmlelement("h1")}}元素 position: fixed;，并让它坐在视口的顶部中心。将以下规则添加到CSS：

- -
h1 {
-  position: fixed;
-  top: 0;
-  width: 500px;
-  margin: 0 auto;
-  background: white;
-  padding: 10px;
-}
- -

 top: 0;是要使它贴在屏幕的顶部；我们然后给出标题与内容列相同的宽度，并使用可靠的老技巧 margin: 0 auto; 使它居中。 然后我们给它一个白色背景和一些内边距，所以内容将不会在它下面可见。

- -

如果您现在保存并刷新，您会看到一个有趣的小效果，标题保持固定，内容显示向上滚动并消失在其下。 但是我们可以改进这一点——目前标题下面挡住一些内容的开头。这是因为定位的标题不再出现在文档流中，所以其他内容向上移动到顶部。 我们要把它向下移动一点；我们可以通过在第一段设置一些顶部边距来做到这一点。添加：

- -
p:nth-of-type(1) {
-  margin-top: 60px;
-}
- -

你现在应该看到完成的例子：

- - - -

{{ EmbedLiveSample('固定定位', '100%', 400) }}

- -
-

注意：你可以在这里看到这个例子6_fixed-positioning.html (see source code).

-
- -

position: sticky

- -

还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起1​​0像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

- - - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
- -

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

- -

position: sticky 的另一种有趣且常用的用法，是创建一个滚动索引页面。在此页面上，不同的标题会停留在页面顶部。这样的示例的标记可能如下所示：

- -
<h1>Sticky positioning</h1>
-
-<dl>
-    <dt>A</dt>
-    <dd>Apple</dd>
-    <dd>Ant</dd>
-    <dd>Altimeter</dd>
-    <dd>Airplane</dd>
-    <dt>B</dt>
-    <dd>Bird</dd>
-    <dd>Buzzard</dd>
-    <dd>Bee</dd>
-    <dd>Banana</dd>
-    <dd>Beanstalk</dd>
-    <dt>C</dt>
-    <dd>Calculator</dd>
-    <dd>Cane</dd>
-    <dd>Camera</dd>
-    <dd>Camel</dd>
-    <dt>D</dt>
-    <dd>Duck</dd>
-    <dd>Dime</dd>
-    <dd>Dipstick</dd>
-    <dd>Drone</dd>
-    <dt>E</dt>
-    <dd>Egg</dd>
-    <dd>Elephant</dd>
-    <dd>Egret</dd>
-</dl>
- -

CSS可能如下所示。在正常布局流中，{{htmlelement("dt")}}元素将随内容滚动。当我们在{{htmlelement("dt")}}元素上添加position: sticky，并将{{cssxref("top")}}的值设置为0，当标题滚动到视口的顶部时，支持此属性的浏览器会将标题粘贴到那个位置。随后，每个后续标题将替换前一个标题，直到它向上滚动到该位置。

- -
dt {
-  background-color: black;
-  color: white;
-  padding: 10px;
-  position: sticky;
-  top: 0;
-  left: 0;
-  margin: 1em 0;
-}
-
- - - -

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

- -
-

注意：你可以在 7_sticky-positioning.html 查看这个例子(see source code)。

-
- -

试试你的技术!

- -

这篇文章到此为止了，但你们能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证是否完全掌握了这个知识：试试你的技术。

- -

总结

- -

我相信你用基本定位愉快地玩耍；它是创建复杂的CSS布局和UI功能背后的基本工具之一。 考虑到这一点，在下一篇文章中，我们将更有趣的定位——我们将进一步，开始建立一些真实世界有用的东西。

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

- -

在本单元中

- - diff --git "a/files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" "b/files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" deleted file mode 100644 index 7aafcf481f..0000000000 --- "a/files/zh-cn/learn/css/first_steps/css\345\246\202\344\275\225\350\277\220\350\241\214/index.html" +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: CSS如何运行 -slug: Learn/CSS/First_steps/CSS如何运行 -tags: - - CSS - - DOM - - 入门 - - 无效的CSS代码 - - 解析 -translation_of: Learn/CSS/First_steps/How_CSS_works ---- -

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

- -

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

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

CSS究竟是怎么工作的？

- -

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

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

结合下面的图示更形象：

- -

- -

关于DOM

- -

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

- -

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

- -

一个真实的DOM案例

- -

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

- -

以下列HTML代码为例：

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

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

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

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

- -

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

- - - -

应用CSS到DOM

- -

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

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

以下为CSS代码：

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

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

- -

现在的显示如下：

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

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

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

- -

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

- -

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

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

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

- -

最后

- -

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

- -

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

- -

模块目标

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

{{LearnSidebar}}

+ +

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

+
+ +

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

+ +

前置知识

+ +

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

+ + + +

目标

+ + + +

先从HTML开始吧

+ +

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

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

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

+
+ +

添加CSS试试看？

+ +

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

+ +

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

+ +

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

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

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

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

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

+ +

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

+ +

样式化 HTML 元素

+ +

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

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

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

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

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

+ +

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

+ +

改变元素的默认行为

+ +

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

+ +

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

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

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

+ +

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

+ +

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

+ +

使用类名

+ +

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

+ +

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

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

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

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

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

+ +

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

+ +

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

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

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

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

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

+ +

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

+ +

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

+ +

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

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

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

+ +

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

+ +

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

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

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

+ +

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

+ +
+

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

+
+ +

根据状态确定样式

+ +

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

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

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

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

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

+ +

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

+ +

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

+ +
+

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

+ +

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

+ +

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

+
+ +

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

+ +

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

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

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

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

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

+ +

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

+ +

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

+ +

总结

+ +

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

+ +

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

+ +

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

+ +

在此模块

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

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

+ +

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

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

CSS究竟是怎么工作的？

+ +

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

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

结合下面的图示更形象：

+ +

+ +

关于DOM

+ +

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

+ +

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

+ +

一个真实的DOM案例

+ +

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

+ +

以下列HTML代码为例：

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

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

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

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

+ +

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

+ + + +

应用CSS到DOM

+ +

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

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

以下为CSS代码：

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

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

+ +

现在的显示如下：

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

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

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

+ +

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

+ +

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

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

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

+ +

最后

+ +

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

+ +

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

+ +

模块目标

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

{{LearnSidebar}}

- -

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

-
- -

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

- -

前置知识

- -

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

- - - -

目标

- - - -

先从HTML开始吧

- -

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

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

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

-
- -

添加CSS试试看？

- -

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

- -

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

- -

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

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

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

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

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

- -

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

- -

样式化 HTML 元素

- -

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

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

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

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

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

- -

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

- -

改变元素的默认行为

- -

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

- -

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

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

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

- -

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

- -

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

- -

使用类名

- -

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

- -

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

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

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

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

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

- -

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

- -

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

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

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

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

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

- -

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

- -

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

- -

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

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

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

- -

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

- -

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

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

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

- -

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

- -
-

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

-
- -

根据状态确定样式

- -

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

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

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

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

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

- -

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

- -

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

- -
-

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

- -

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

- -

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

-
- -

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

- -

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

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

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

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

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

- -

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

- -

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

- -

总结

- -

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

- -

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

- -

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

- -

在此模块

- -
    -
  1. 什么是CSS?
    2. -
  2. 开始学习CSS
    3. -
  3. CSS代码是如何组织的
    4. -
  4. CSS是如何工作的
    5. -
  5. 开始使用你的新知识
    6. -
diff --git a/files/zh-cn/learn/css/howto/css_faq/index.html b/files/zh-cn/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..0e0593054b --- /dev/null +++ b/files/zh-cn/learn/css/howto/css_faq/index.html @@ -0,0 +1,183 @@ +--- +title: CSS 常见问题 +slug: Web/CSS/Common_CSS_Questions +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

为什么我有效的CSS没有正确的渲染？

+ +

浏览器使用DOCTYPE声明来选择是否使用更符合Web标准或兼容旧浏览器的bug的模式。在你的HTML的开始使用一个正确的和现代的DOCTYPE声明将改善浏览器标准执行。

+ +

现代浏览器主要有两种渲染模式：

+ + + +

基于Gecko的浏览器， 有三分之一 Almost Standards Mode， 只有一些小怪癖。

+ +

这是最常用的触发标准模式或准标准模式的DOCTYPE声明列表：

+ +
<!DOCTYPE html> /* 这一行是 HTML5 的 doctype 声明。，使用该声明会使现代浏览器使用
+                   HTML5 解析器处理页面，这是推荐的 doctype 声明。*/
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

为什么我有效的css完全没有被渲染？ 

+ +

为了使浏览器渲染样式文件，CSS样式表必须用text/css的MIME。如果Web服务器不服务于这种类型，则CSS也不会被应用。

+ +

id和class有什么不同？

+ +

HTML元素可以拥有一个id/或class属性。 id属性为元素指定应用一个有效名称，只能有一个具有该名称的元素。class属性指定一个类名的元素，而这个名称可以被页面内的许多元素被使用。 CSS允许你可以对特定的id和/或类名的元素应用样式。
+
+ 当你想给一个特定元素或块应用样式规则时就使用ID选择符。此样式将只用于与该特定id匹配的元素。

+ +


+ 当你想要将样式规则应用于多个块和元素时，你应该使用class选择符。

+ +

较少样式的样式表通常性能更高。因此建议尽可能多地使用类， 保留id作为特定用途 (比如链接label标签和form元素或者为语义上唯一的元素应用样式)。

+ +

查看 CSS selectors

+ +

我如何还原属性的默认值？

+ +

最初CSS没有提供“defaule”关键字和还原默认属性的值，唯一途径是显式地重新声明该属性。

+ +

与CSS2相比，已经发生了改变。 关键字 initial 现在是一个有效的CSS属性。它将给定的CSS属性值重置为默认值。

+ +

我如何才可以从一个样式中衍生出另一种样式?

+ +

CSS 不允许这样做。(See Eric Meyer's note about the Working Group's stance). 但是，将多个类分配给单个元素，可以提供相同的效果。

+ +

我该如何给一个元素分配多个类？

+ +

HTML元素可以通过列出的类属性，用空格分开它们。

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

如果相同的属性中声明的规则，解决冲突首先通过特异性，然后根据CSS声明的顺序。在class属性类的顺序是不相关的。

+ +

为什么我的样式规则不能正确地工作？

+ +

在语法上正确的样式规则可能在某些情况下不适用。你可以使用 DOM Inspector's CSS Style Rules 调试这类问题。 下面列出了最常见的忽略样式规则的实例：

+ +

HTML元素层次结构

+ +

The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.

+ +
.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+<!-- news item text is black, but corporate name is red and in bold -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.

+ +

显式重定义样式规则

+ +

In CSS stylesheets, order is important. If you define a rule and then you re-define the same rule, the last definition is used.

+ +
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+<!-- most text is in bold, except "GE", which is red and not bold -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.

+ +

使用便捷属性

+ +

Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.

+ +
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important.

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now normal */
+}
+
+ +

使用 * 选择器

+ +

The * wildcard selector refers to any element, and it has to be used with particular care.

+ +
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

In this example the body * selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So font-weight: bold; applied to the .corpName class is overridden by font-weight: normal; applied to all elements in the body.

+ +

The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.

+ +

CSS 中的优先级

+ +

When multiples rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.

+ +
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+ +

The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the CSS 2.1 Specification chapter 6.4.3

+ +

 -moz-*， -ms-*， -webkit-*， -o-* 以及 -khtml-* 属性有什么用？

+ +

These  properties, called prefixed properties, are extension to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.

+ +

The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolve.

+ +

Please see the Mozilla CSS Extensions page for more information on the Mozilla-prefixed CSS properties.

+ +

z-index 属性与定位有什么关系？

+ +

z-index属性指定了元素的栈序。

+ +

有较高z-index/栈序的元素总是在有着较低z-index/栈序的元素之前。

+ +

z-index只会在有着指定position (position:absolute, position:relative, or position:fixed)的元素上工作。

diff --git a/files/zh-cn/learn/css/howto/generated_content/index.html b/files/zh-cn/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..f3f9a0797b --- /dev/null +++ b/files/zh-cn/learn/css/howto/generated_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/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html deleted file mode 100644 index b246af87fe..0000000000 --- a/files/zh-cn/learn/css/introduction_to_css/fundamental_css_comprehension/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: 基本的CSS理解 -slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension -tags: - - 初学者 - - 盒模型 - - 评估 - - 选择器 -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
- -

你已经在这个模块中了解到了很多内容, 所以当你达到这个模块的最后一篇文章的时候，感觉一定非常不错吧！在你继续之前的最后一步，就是完成对于这个模块的测验。本次测验涉及到几个相关的练习，你必须按顺序完成，这样你才能设计出最终的成品：一张名片/游戏玩家卡片/社交媒体的简介。

- - - - - - - - - - - - -
学习本章的前提条件:在尝试这个测验之前，你应该已经完成了这个模块中所有文章的学习。
目标：来测试对 CSS 理论、语法、功能性的基本理解。
- -

起点

- -

在开始测验之前，你应该:

- - - -
-

注意: 另外, 你可以使用一个网站比如 JSBin 或 Thimble 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 this URL 来让 <img> 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入<style> 元素中。

-
- -

项目概要

- -

我们已经为你提供了一些原始的 HTML 和一张图片，然后需要编写必要的 CSS 来让其成为一个漂亮的网上小名片，可能大小是游戏玩家卡片或社交媒体简介的两倍。下面的段落描述了你需要做的事情。

- -

基本设置:

- - - -

关注我们为你提供的选择器和规则集：

- - - -

你需要写的新规则：

- - - -
-

注意: 记住第二条规则集会将 font-size: 10px; 设置在 <html> 元素上 — 这意味着 <html> 的任何后代中，一个em将会等于10px而不是默认的 16px 。(这是当然的，如果在层次结构中，有不同的 font-size 设置于其上，问题中的后代没有任何的祖先位于 em元素和 <html> 之间。这可能会影响您所需要的值，尽管在这个简单的示例中，这不是问题。)

-
- -

其他事情要考虑：

- - - -

注意和提示

- - - -

示例

- -

完成的设计应如下图所示：

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

评估

- -

如果您将此评估作为有组织的课程的一部分，您应该能够将您的工作交给您的老师/导师进行打分。 如果您是自学的，那么您可以通过询问  Learning Area Discourse thread, 或在 #mdn的IRC频道 Mozilla IRC 中轻松获得打分指南. 首先尝试练习 - 作弊学不到什么！

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

- -

在本单元中

- - diff --git a/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html b/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html deleted file mode 100644 index 6ddd1d114b..0000000000 --- a/files/zh-cn/learn/css/styling_boxes/a_cool_looking_box/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 一个漂亮的盒子 -slug: Learn/CSS/Styling_boxes/A_cool_looking_box -translation_of: Learn/CSS/Building_blocks/A_cool_looking_box ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
- -

在这个评估里，通过尝试创造一个引人瞩目的盒子，你将得到更多关于如何创造酷炫盒子的练习。

- - - - - - - - - - - - -
前提条件：在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。
目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如背景和边框。
- -

起点

- -

在开始评估之前，你需要：

- - - -
-

提醒：或者你也可以用JSBin或Thimble这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。

-
- -

项目简介

- -

你的任务是创建一个酷炫的盒子，并探索CSS的乐趣。

- -

一般任务

- - - -

样式化盒子

- -

给{{htmlelement("p")}}添加样式：

- - - -

范例

- -

完成之后的盒子可能会像下面的截图这样：

- -

- -

评估

- -

如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在Learning Area Discourse thread或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！

- -

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

- -

在这个模块里

- - - -

​​​ 

diff --git a/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html b/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html deleted file mode 100644 index 692071dfde..0000000000 --- a/files/zh-cn/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: 创建精美的信纸 -slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper -translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
- -

如果你想给人留下好印象，把信写在一张精美的信纸上会是个不错的开始，在这个评估里我们希望你能创建一个在线模版来达到这样的效果。

- - - - - - - - - - - - -
前提条件：在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。
目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如实现背景等。
- -

起点

- -

在开始评估之前，你需要：

- - - -
-

提醒：或者你也可以用JSBin或Thimble这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。

-
- -

项目简介

- -

你已经有了创建一个信纸模版所需的所有文件，只需把它们放到一起就好。为了达到目标，你需要：

- -

信纸主体

- - - -

标志

- - - -

提示和技巧

- - - -

范例

- -

完成之后的信纸可能会像下面的截图这样：

- -

- -

 

- -

评估

- -

如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 discussion thread for this exercise 或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

- -

 

- -

在这个模块里

- - - -

 

diff --git a/files/zh-cn/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..45660a9532 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,727 @@ +--- +title: 基本文本和字体样式 +slug: Learn/CSS/为文本添加样式/Fundamentals +tags: + - 初学者 + - 对齐 + - 文本 + - 样式 + - 间距 +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

在这篇文章中，我们将带你开始掌握 {{glossary("CSS")}} 的文字样式的旅程。这里我们将详细介绍文本/字体样式的所有基本原理，包括设置文字的粗细，字体和样式，文字的属性简写，文字的对齐，和其他效果，以及行和字母间距。

+ + + + + + + + + + + + +
先决条件：基本的电脑操作，HTML 基础 (学习 Introduction to HTML)，CSS 基础 (学习 Introduction to CSS).
目的:了解在网页上设计文本所需的基本属性和技术。
+ +

CSS中的文字样式涉及什么？

+ +

正如你已经在你使用 HTML 和 CSS 完成工作时所经历的一样，元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，你可以使用 {{htmlelement("br")}} 元素。

+ +
+

注意: 如果上面的段落让你感到困惑，没关系，在继续之前，可以重新看看我们的 Box model 文件，复习框模型的理论。

+
+ +

用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。

+ + + +
+

注意: 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( {{htmlelement("span")}} 或者 {{htmlelement("strong")}}), 或者使用伪元素，像::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

+
+ +

字体

+ +

我们直接来看看样式字体的属性。在这个例子中，我们会在一个相同的 HTML 示例中应用一些不同的 CSS 属性，就像这样：

+ +
<h1>Tommy the cat</h1>
+
+<p>I remember as if it were a meal ago...</p>
+
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.</p>
+ +

你可以在这找到完成版本 finished example on Github (也可以看源码 the source code.)

+ +

颜色

+ +

{{cssxref("color")}} 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 {{cssxref("text-decoration")}} 属性放置在文本下方或上方的线 (underline overline)。

+ +

color 也可以接受任何合法的 CSS 颜色单位, 比如:

+ +
p {
+  color: red;
+}
+ +

这将导致段落变为红色，而不是标准的浏览器默认的黑色，如下所示：

+ + + +

{{ EmbedLiveSample('颜色', '100%', 220) }}

+ +

字体种类

+ +

要在你的文本上设置一个不同的字体，你可以使用 {{cssxref("font-family")}}  属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 {{anch("Default fonts", "default font")}}. 下面是一个简单的例子:

+ +
p {
+  font-family: arial;
+}
+ +

这段语句使所有在页面上的段落都采用 arial 字体，这个字体可在任何电脑上找到。

+ +

网页安全字体

+ +

说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体。

+ +

大多数时候，作为网页开发者，我们希望对用于显示我们的文本内容的字体有更具体的控制。问题在于，需要一个方法来知道当前正在浏览我们的网站网页的电脑，它有哪些可用字体。我们并不是总能在每种情况下都知道这一点，但是网络安全字体在几乎所有最常用的操作系统（Windows，Mac，最常见的Linux发行版，Android和iOS版本）中都可用。

+ +

实际的Web安全字体列表将随着操作系统的发展而改变，但是可以认为下面的字体是网页安全的，至少对于现在来说 (它们中的许多都非常流行，这要感谢微软在90年代末和21世纪初期的倡议Core fonts for the Web )：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
字体名称泛型注意
Arialsans-serif通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。
Courier Newmonospace某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。
Georgiaserif
Times New Romanserif某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。
Trebuchet MSsans-serif您应该小心使用这种字体——它在移动操作系统上并不广泛。
Verdanasans-serif
+ +
+

注意: 在各种资源中，cssfontstack.com 网站维护了一个可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表，这可以帮助决策网站的安全性。

+
+ +
+

注意: 有一个可以下载来自一个网页的自定义字体的方法，允许你通过任何你想要的方法来定制你使用的字体：网页字体。这个有一点复杂，我们将在这个模块中的另一篇文章中讨论这一点。

+
+ +

默认字体

+ +

CSS 定义了 5 个常用的字体名称:  serif, sans-serif, monospace, cursive,和 fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况，浏览器会尽力提供一个看上去合适的字体。 serif, sans-serif 和 monospace 是比较好预测的，默认的情况应该比较合理，另一方面，cursive 和 fantasy 是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。

+ +

五个名称定义如下：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名称定义示例
serif有衬线的字体 （衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）My big red elephant
sans-serif没有衬线的字体。My big red elephant
monospace每个字符具有相同宽度的字体，通常用于代码列表。My big red elephant
cursive用于模拟笔迹的字体，具有流动的连接笔画。My big red elephant
fantasy用来装饰的字体My big red elephant
+ +

字体栈

+ +

由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个字体栈 (font stack)，这样的话，浏览器就有多种字体可以选择了。只需包含一个font-family属性，其值由几个用逗号分离的字体名称组成。比如

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。

+ +

在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是Time New Roman - 这对于 sans-serif 字体是不利的！

+ +
+

注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。

+
+ +

一个使用 font-family 的例子

+ +

让我们把它添加到之前的例子上，给段落一个 sans-serif 的字体。

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

这给我们以下结果：

+ + + +

{{ EmbedLiveSample('一个使用_font-family_的例子', '100%', 220) }}

+ +

字体大小

+ +

在我们之前的模块中的CSS values and units 文章，我们回顾了length and size units. 字体大小 (通过 {{cssxref("font-size")}} 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 percentages)，然而你在调整字体大小时，最常用的单位是：

+ + + +

元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——{{htmlelement("html")}}开始，浏览器的 font-size 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值：16px。其他元素也许有默认的大小，比如 {{htmlelement("h1")}} 元素有一个 2em 的默认值，所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时，事情会变得棘手。比如，如果你有一个 {{htmlelement("article")}} 元素在你的页面上，然后设置它的 font-size 为 1.5em (通过计算，可以得到大小为 24px)，然后想让 <article> 元素中的段落获得一个计算值为 20px 的大小，那么你应该使用多少 em。

+ +
<!-- document base font-size is 16px -->
+<article> <!-- If my font-size is 1.5em -->
+  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
+</article>
+ +

你需要将 em 的值设置为 20/24, 或者 0.83333333em. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rem 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。

+ +

一个简单的 size 示例

+ +

当调整你的文本大小时，将文档(document)的基础  font-size 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意，这样它们就可以很容易被找到。

+ +

我们的新结果是这样的:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('字体大小', '100%', 220) }}

+ +

字体样式，字体粗细，文本转换和文本装饰

+ +

CSS 提供了 4 种常用的属性来改变文本的样子：

+ + + +

我们来看一下这几个属性添加到我们的例子中：

+ +

我们的新结果是这样的：

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('字体样式，字体粗细，文本转换和文本装饰', '100%', 220) }}

+ +

文字阴影

+ +

你可以为你的文本应用阴影，使用 {{cssxref("text-shadow")}} 属性。这最多需要 4 个值，如下例所示：

+ +
text-shadow: 4px 4px 5px red;
+ +

4 个属性如下:

+ +
    +
  1. 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的。这个值必须指定。
    2. +
  2. 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。
    3. +
  3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位 length and size units.
    4. +
  4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为 black.
    5. +
+ +
+

注意: 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 -1px -1px.

+
+ +

多种阴影

+ +

您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：

+ +
text-shadow: -1px -1px 1px #aaa,
+             0px 4px 1px rgba(0,0,0,0.5),
+             4px 4px 5px rgba(0,0,0,0.7),
+             0px 0px 7px rgba(0,0,0,0.4);
+ +

如果我们把这个样式应用到我们 "Tommy the cat" 示例中的 {{htmlelement("h1")}} 元素，就像这样：

+ + + +

{{ EmbedLiveSample('多种阴影', '100%', 220) }}

+ +
+

注意: 你可以看到更多有趣的关于 text-shadow 使用的示例在 Moonlighting with CSS text-shadow.

+
+ +

文本布局

+ +

有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。

+ +

文本对齐

+ +

 {{cssxref("text-align")}} 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：

+ + + +

如果我们应用 text-align: center; 到我们例子中的 {{htmlelement("h1")}} 元素中，结果如下：

+ + + +

{{ EmbedLiveSample('文本对齐', '100%', 220) }}

+ +

行高

+ +

 {{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:

+ +
line-height: 1.5;
+ +

把这个样式应用到我们示例中的 {{htmlelement("p")}} 元素，结果如下：

+ + + +

{{ EmbedLiveSample('行高', '100%', 250) }}

+ +

字母和单词间距

+ +

{{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.

+ +

所以作为例子，如果我们把这个样式应用到我们的示例中的 {{htmlelement("p")}} 段落的第一行：

+ +
p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+ +

我们会得到下面的结果：

+ + + +

{{ EmbedLiveSample('字母和字间距', '100%', 250) }}

+ +

其他一些值得看一下的属性

+ +

以上属性让你了解如何开始在网页上设置文本， 但是你可以使用更多的属性。我们只是想介绍最重要的。一旦你习惯使用上面的内容，你还应该探索以下几点：

+ +

Font 样式:

+ + + +

文本布局样式：

+ + + +

Font 简写

+ +

许多字体的属性也可以通过 {{cssxref("font")}} 的简写方式来设置 . 这些是按照以下顺序来写的：  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.

+ +

如果你想要使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的。

+ +

{{cssxref("font-size")}} 和 {{cssxref("line-height")}} 属性之间必须放一个正斜杠。

+ +

一个完整的例子如下所示：

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

动手练习: 使用样式文本

+ +

在这个动手练习中，我们没有任何具体的练习来做：我们只是希望你和一些字体/文本布局属性相处地愉快，看看你可以制作什么！你可以使用离线HTML / CSS文件进行此操作，也可以将代码输入到下面的实时可编辑示例中。

+ +

如果你犯了错误，你可以使用 Reset 按钮来复原。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

小结

+ +

我们希望你在本篇文章中享受与文本在一起的时光！下篇文章会介绍所有你需要知道的关于 HTML 列表的样式。

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

diff --git a/files/zh-cn/learn/css/styling_text/index.html b/files/zh-cn/learn/css/styling_text/index.html new file mode 100644 index 0000000000..ec4822b9ad --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/index.html @@ -0,0 +1,54 @@ +--- +title: 为文本添加样式（样式化文本） +slug: Learn/CSS/为文本添加样式 +tags: + - CSS + - 代码脚步 + - 列表lists + - 初学者 + - 字体Fonts + - 字母letter + - 文字font + - 文本Text + - 模块化Module + - 网络字体 web fonts + - 行line + - 链接Links + - 阴影shadow +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

掌握了 CSS 语言的基础之后，对于您来说，下一个需要关心的 CSS 主题就是为文本添加样式——一个您将会最经常使用 CSS 做的事情。在这里，我们专注于为文本样式的基础，包括设置字体、粗细、斜体、行还有字符间距、阴影以及文本的其他特征。我们将会通过在您的网页中应用自定义字体、样式化列表以及链接来圆满地结束本模块。

+ +

前提

+ +

在开始这一模块之前，您应当像 HTML 介绍 模块中所探讨的，已经熟悉了基本的HTML，以及像 CSS 介绍 中所详述的，对自己的 CSS 基础感觉还满意。

+ +
+

注意: 如果您所使用的是不能创建自己的文件的电脑、平板电脑或其他设备的话，您可以在一个在线编码程序 JSBin 或 Thimble 中尝试（大部分的）代码例子。

+
+ +

导引

+ +

这个模块包括了以下文章，这些文章将教会您所有的基本功以支持您为 HTML 文本内容添加样式。

+ +
+
基本的文本以及字体样式
+
在本文章中，我们将通篇了解文本、字体样式的所有基础，包括设置字体粗细（ font weight ）、字体系列及样式（ family and style ）、字体缩写（ font shorthand ）、文本排列（ text alignment ）和其他的效果，还有行（ line ）以及字符间距（ letter spacing ）。
+
样式化列表
+
对于大部分内容来说，列表的行为表现跟其他任何文本其实差不多，但您也需要了解还有一些专门用于列表的 CSS 样式以及考虑一些最好的实践方式。本文章将阐释这一切。
+
样式化链接
+
当您为链接添加样式时，很重要的一点是要去理解怎样有效地使用伪类去修饰链接的状态，以及怎么去修饰不同的接口功能例如导航菜单和面板中所使用的链接。我们将会在这篇文章中讨论这些话题。
+
网络字体
+
在这里我们将会详细地探索网络字体——这会允许您与您的网页一同下载自定义字体，来实现更为不同的个性化字体样式。
+
+ +

评估

+ +

以下的评估将会评测您对以上导引所涵盖的为文本添加样式的技术的理解。

+ +
+
对一个社区学校的主页进行排版
+
在这个评估中，我们通过让您为一个社区学校的主页添加文本样式来测试您对文本样式的理解程度。
+
diff --git a/files/zh-cn/learn/css/styling_text/styling_links/index.html b/files/zh-cn/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..df2e7c6093 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,431 @@ +--- +title: 样式化链接 +slug: Learn/CSS/为文本添加样式/Styling_links +tags: + - 伪类 + - 悬浮 + - 标签 + - 聚焦 + - 菜单 + - 超链接 + - 链接 +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+
+ +

当为 links 添加样式时, 理解利用伪类有效地建立链接状态是很重要的，以及如何为链接添加样式来实现常用的功能，比如说导航栏、选项卡。我们将在本文中关注所有这些主题。

+ + + + + + + + + + + + +
学习本章节的前提:基本的计算机使用能力，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习 Introduction to CSS), CSS text and font fundamentals.
目的:学习如何将样式应用到链接状态，以及如何使用链接实现常见的 UI 功能，比如导航菜单。
+ +

让我们来看一些链接

+ +

根据最佳实践  创建超链接 中的练习，我们看到了如何在你的 HTML 中实现链接。在本篇文章中，我们会以这个知识为基础，向你展示将样式应用到链接的最佳实践。

+ +

链接状态

+ +

第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式:

+ + + +

默认的样式

+ +

下面的例子说明了一个链接的默认行为表现 (这里的 CSS 仅仅是为了放大和居中文本，使内容更加突出)

+ +
<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('默认的样式', '100%', 120) }}

+ +

当你观察默认样式的时候，你也许会注意到一些东西:

+ + + +

有趣的是，这些默认的样式与20世纪90年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：

+ + + +
+

注意: 你不仅仅只限于上述属性来把样式应用到你的链接上，你可以用任何你喜欢的属性，就是不要搞得太疯狂！

+
+ +

将样式应用到一些链接

+ +

现在我们已经详细地看了默认的状态，让我们看一下典型的链接样式的设置。

+ +

开始之前，我们先写出我们的空规则集：

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

这几个规则的顺序是有意义的，因为链接的样式是建立在另一个样式之上的，比如，第一个规则的样式也会在后面的规则中生效，一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。要记住这个顺序，你可以尝试这样帮助记忆：LoVe Fears HAte.

+ +

现在让我们再添加一些信息，得到正确的样式：

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

这里还提供了一些示例HTML，供你应用CSS：

+ +
<p>There are several browsers available, such as <a href="https://www.mozilla.org/zh-CN/firefox/">Mozilla
+Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
+<a href="https://www.microsoft.com/zh-CN/windows/microsoft-edge">Microsoft Edge</a>.</p>
+ +

把这两个放在一起，我们得到这样的结果：

+ +

{{ EmbedLiveSample('将样式应用到一些链接', '100%', 150) }}

+ +

那么我们在这里做了什么? 这个看起来肯定和默认的样式不同，但仍然提供了一个熟悉的体验，好让用户知道发生了什么：

+ + + +

动手练习: 为你的链接添加样式

+ +

在这个动手练习部分，我们希望你使用我们的空规则集，然后添加你自定义的规则，从而使链接看上去比较酷。发挥你的想象力，大胆地做吧。我们相信你可以想出一些更酷的东西，就像我们上面的例子一样。

+ +

如果你犯了错误，你都可以使用 Reset 按钮来重置。 如果你遇到了困难，可以按 Show solution 按钮来显示我们上文中的例子。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

在链接中包含图标

+ +

常见的做法是在链接中包含图标，使链接提供更多关于链接指向的内容的信息。让我们来看一个简单的例子，例子中为一个外部链接 (链接指向的不是本站，而是外部站点)。这样的图标通常看起来像一个指向盒子的小箭头，比如, 我们会使用icons8.com上的这个优秀的范例。

+ +

让我们来看一些能给我们这个效果的 HTML 和 CSS。先是一些简单的等待你样式化的 HTML ：

+ +
<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
+look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
+out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
+ +

接着是 CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('在链接中包含图标', '100%', 150) }}

+ +

那么这里发生了什么? 我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里，我们在外部链接上插入了一个自定义背景图片，这和上篇自定义列表项目符号文章的做法很像。这次，我们使用了 {{cssxref("background")}} 简写，而不是分别使用多个属性。我们设置了我们想要插入的图片的路径，指定了 no-repeat ，这样我们只插入了一次图片，然后指定位置为100%，使其出现在内容的右边，距离上方是0px。

+ +

我们也使用 {{cssxref("background-size")}} 来指定要显示的背景图像的大小，为了满足响应式网站设计的需要，在图标更大，需要再重新调整它的大小的时候，这样做是很有帮助的。但是，这仅适用于IE 9及更高版本。所以你如果需要支持那些老的浏览器，只能调整图像的原始大小，然后插入。

+ +

最后，我们在链接上设置 {{cssxref("padding-right")}} ，为背景图片留出空间，这样就不会让它和文本重叠了。

+ +

最后的问题，我们是如何只选中了外部链接的？如果你正确编写你的HTML链接 ，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个属性选择器——a[href*="http"] ——选中 {{htmlelement("a")}} 元素，但是这样只会选中那些拥有 {{htmlattrxref("href","a")}} 属性，且属性的值包含 "http" 的 {{htmlelement("a")}}的元素。

+ +

就这样啦，尝试重新审视上面的动手练习部分，尝试这种新技术！

+ +
+

注意: 不要担心，如果你目前不熟悉 backgrounds 和 responsive web design ; 这些会在其他地方解释。

+
+ +

样式化链接为按钮

+ +

目前在本文中探索的用法也可以用在其他方面。比如，悬停 (hover) 的状态可以为不同的元素应用样式，不只是链接，你也许会想添加悬停状态的样式到段落、列表项、或者是其他东西。

+ +

此外，在某些情况下，链接通常会应用样式，使它看上去的效果和按钮差不多，一个网站导航菜单通常是标记为一个列表，列表中包含链接，这可以很容易地被设计为看起来像一组控制按钮或是选项卡，主要是用于让用户可以访问站点的其他部分，现在让我们来看一看。

+ +

首先，一些 HTML:

+ +
<ul>
+  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+</ul>
+ +

接着，是我们的 CSS:

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

这给我们以下结果：

+ +

{{ EmbedLiveSample('样式化链接为按钮', '100%', 100) }}

+ +

让我们来解释一下这里发生了什么，主要是几个有趣的部分:

+ + + +
+

注意: 你也许会注意到 HTML 中的列表的每项内容都在同一行上，这是因为 inline-block 元素在页面上创建的空格换行符，就像几个字之间的空格，这样的空隙也许会破坏我们的水平导航菜单布局。所以我们删除了空格。你可以在  Fighting the space between inline block elements 找到有关此问题的更多信息（和解决方案）。

+
+ +

测试你的技巧！

+ +

你已经到了本文结尾，并且在我们的交互学习部分已经做了一些技巧测试。但是你在继续之前记住了最重要的信息了吗？你可以在模块末尾找到一个用于验证你已掌握知识的评估——见给一个社区大学的主页排版。

+ +

这个评估测试了这个模块讨论到的所有知识，这样你可能在读下一篇文章之前想看一下它。

+ +

小结

+ +

我们希望本文为你提供有关链接的所有知识——目前！我们的样式文本模块中的最后一篇文章详细介绍了如何在你的网站上使用自定义字体，或者更熟悉网络字体。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git a/files/zh-cn/learn/css/styling_text/styling_lists/index.html b/files/zh-cn/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..075b457836 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,374 @@ +--- +title: 样式列表 +slug: Learn/CSS/为文本添加样式/Styling_lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

List列表 大体上和其他文本一样，但是仍有一些你需要知道的特殊CSS属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。

+ + + + + + + + + + + + +
前置知识:Basic computer literacy, HTML basics (study Introduction to HTML), CSS basics (study Introduction to CSS), 基本文本和字体样式.
目标:熟悉与列表相关的样式和最佳实践
+ +

一个简单的例子

+ +

首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的样式特性，而某些特性却又各不相同。Github上有未加载样式的例子（也可以查看源码。）

+ +

例子中列表的HTML代码如下：

+ +
<h2>Shopping (unordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ul>
+  <li>Humous</li>
+  <li>Pitta</li>
+  <li>Green salad</li>
+  <li>Halloumi</li>
+</ul>
+
+<h2>Recipe (ordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ol>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+
+<h2>Ingredient description list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<dl>
+  <dt>Humous</dt>
+  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dt>Pitta</dt>
+  <dd>A soft, slightly leavened flatbread.</dd>
+  <dt>Halloumi</dt>
+  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dt>Green salad</dt>
+  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
+</dl>
+ +

现在，如果你去到例子的展示页面，并使用浏览器开发者工具查看那些列表元素，你会注意到若干个默认的样式预设值：

+ + + +

处理列表间距

+ +

当您创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距（例如段落和图片，有时称为垂直节奏））和相互间的水平间距（您可以在 Github 上参考完成的样式示例 ，也可以找到源代码。）

+ +

用于文本样式和间距的CSS如下所示：

+ +
/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}
+
+ + + +

列表特定样式

+ +

现在我们来看一下列表的一般间距，我们来研究一些列表具有的特定属性。 我们从三个属性开始了解，这三个属性可以在 {{htmlelement("ul")}} 或  {{htmlelement("ol")}} 元素上设置：

+ + + +

符号样式

+ +

像上面所提及的， {{cssxref("list-style-type")}}  属性允许你设置项目符号点的类型，在我们的例子中，我们在有序列表上设置了大写罗马数字：

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

效果显示如下：

+ +

an ordered list with the bullet points set to appear outside the list item text.

+ +

您可以通过  {{cssxref("list-style-type")}}  参考页面查找到更多选项。

+ +

项目符号位置

+ +

{{cssxref("list-style-position")}} 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。 如上所示，默认值为 outside，这使项目符号位于列表项之外。

+ +

如果值设置为 inside，项目条目则位于行内。

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

an ordered list with the bullet points set to appear inside the list item text.

+ +

使用自定义的项目符号图片

+ +

{{cssxref("list-style-image")}} 属性允许对于项目符号使用自定义图片。其语法相当简单：

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

然而，这个属性在控制项目符号的位置，大小等方面是有限的。 您最好使用{{cssxref("background")}} 系列属性，您将在 Styling boxes 模块中了解更多信息。在这里我们仅做一点尝试！

+ +

结束我们的例子，我们样式化无序列表像这样（放到您之前所见的顶部）：

+ +
ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

我们的所做如下：

+ + + +

效果显示如下：

+ +

an unordered list with the bullet points set as little star images

+ +

list-style 速记

+ +

上述提到的三种属性可以用一个单独的速记属性 {{cssxref("list-style")}} 来设置。例如：

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

可以被如下方式代替：

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

属性值可以任意顺序排列，你可以设置一个，两个或者三个值（该属性的默认值为 disc, none, outside），如果指定了 type 和 image，如果由于某种原因导致图像无法加载，则 type 将用作回退。

+ +

管理列表计数

+ +

有时，您可能想在有序列表上进行不同的计数方式。例如： 从1以外的数字开始，或向后倒数，或者按步或多于1计数。HTML和CSS有一些工具可以帮助您

+ +

start

+ +

{{htmlattrxref("start","ol")}} 属性允许你从1 以外的数字开始计数。示例如下：

+ +
<ol start="4">
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

输出的结果如下：

+ +

{{ EmbedLiveSample('start', '100%', 150) }}

+ +

reversed

+ +

{{htmlattrxref("reversed","ol")}} 属性将启动列表倒计数。示例如下：

+ +
<ol start="4" reversed>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

输出的结果如下：

+ +

{{ EmbedLiveSample('reversed', '100%', 150) }}

+ +

value

+ +

{{htmlattrxref("value","ol")}} 属性允许设置列表项指定数值，示例如下:

+ +
<ol>
+  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
+  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="6">Wash and chop the salad.</li>
+  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

输出的结果如下：

+ +

{{ EmbedLiveSample('value', '100%', 150) }}

+ +
+

注意: 纵然你使用非数字的 {{cssxref("list-style-type")}}, 你仍需要使用与数值同等意义的值作为 value 的属性。

+
+ +

主动学习: 为嵌套式列表添加样式

+ +

在该学习环节，我们希望你使用如上所学尝试为一个嵌套式列表添加样式。我们已经提供了 HTML , 在此之上请完成如下：

+ +
    +
  1. 为该无序列表提供方形项目符号。
    2. +
  2. 为该无序列表项和有序列表项提供基于其字体大小 1.5 的行高。
    3. +
  3. 为有序列表提供小写字母的项目符号。
    4. +
  4. 对列表进行自由发挥，尝试不同的项目符号类型，间距，以及其他的各种属性。
    5. +
+ +

如果犯了错误，可以随时点击 Reset（重置） 按钮进行重新设置。如果你真的遇到困难无法继续下去，点击 Show solution（显示解决方案）按钮查看可行的解决方案。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

另请参阅

+ +

CSS计数器提供用于自定义列表计数和样式的高级工具，但它们相当复杂。 如果你想更深入了解，请查看如下资源：

+ + + +

总结

+ +

一旦你掌握一些相关的基础原则和特定属性，列表的样式还是相对容易理解的。在下篇文章中我们将转到另一话题——为链接提供样式的各种技巧。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

diff --git a/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html new file mode 100644 index 0000000000..98f86f125f --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/typesetting_a_homepage/index.html @@ -0,0 +1,119 @@ +--- +title: 作业：排版社区大学首页 +slug: Learn/CSS/为文本添加样式/Typesetting_a_homepage +tags: + - CSS + - 初学者 + - 字体 + - 样式化文本 + - 网络字体 + - 链接 +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

在本测评中，通过对社区学校主页的文本样式化，我们会测试你对所有本模块涉及到的文本样式化技术的理解。你或许也会从中获得乐趣。

+ + + + + + + + + + + + +
预备条件:在本次测评前，你应该完成了本模块所有章节。
目标:测试对CSS文本样式化技术的理解。
+ +

开始

+ +

在本测评开始前，你应该:

+ + + +
+

注意: 或者，你可以使用像 JSBin 或 Thimble 的网站完成你的测评。你可以把HTML和CSS粘贴到在线编辑器中，并使用this URL指定背景图像。如果你使用的在线编辑器没有单独的CSS面板，你可以将其放在HTML文件的<style>元素中。

+
+ +

项目简介

+ +

你有一个虚构的社区大学主页的未处理HTML文件和一些CSS文件。这些CSS文件把网页分成两栏布局，提供了一些简单的样式化。你将在CSS文件底部的comment下写你的CSS，这样可以方便地标出你的工作。不要担心选择器一直重复；我们会帮你跳过这个问题。

+ +

字体：

+ + + +

文本样式化基础：

+ + + +

链接：

+ + + +

列表：

+ + + +

导航栏菜单:

+ + + +

提示与技巧

+ + + +

实例

+ +

下图展示了其中一种设计完成后的例子。

+ +

+ +

测评

+ +

如果你将本测评作为课程的一部分，你应该能够将你的作品交给你的老师/指导员打分。如果你是自学的，你可以很轻松地在discussion thread for this exercise，或者Mozilla IRC的#mdn IRC 频道上获得打分。先尝试完成本次练习——作弊是学不到任何东西的！

+ +

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

在本单元中

+ + diff --git a/files/zh-cn/learn/css/styling_text/web_fonts/index.html b/files/zh-cn/learn/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..ad9691cb00 --- /dev/null +++ b/files/zh-cn/learn/css/styling_text/web_fonts/index.html @@ -0,0 +1,186 @@ +--- +title: Web 字体 +slug: Learn/CSS/为文本添加样式/Web_字体 +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

在模块的第一篇文章中，我们探讨了用于样式化字体和文本的基本CSS特性。在这篇文章中，我们将更进一步，详细地探索web字体——它们允许您下载自定义字体和您的web页面，以允许更多不同的、自定义的文本样式。

+ + + + + + + + + + + + +
预备知识:基本计算机素养，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习Introduction to CSS), CSS文本和字体基础 。
目标:学习如何将web字体应用到web页面，使用第三方服务，或者编写自己的代码。
+ +

字体种类回顾

+ +

正如我们在基本文本和字体样式中所看到的那样，应用到您的HTML的字体可以使用 {{cssxref("font-family")}}属性来控制。您需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

这个系统运行良好，但是对于传统的web开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 Web-safe 字体。您可以使用字体堆栈来指定可选择的字体，后面是Web-safe的替代选项，然后是默认的系统字体，但是为了确保您的设计在每种字体中都显示正常，这样增加了测试的开销。

+ +

Web 字体

+ +

但是还有一种选择，它非常有效，回到IE版本6。Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。太酷啦！所需的语法如下所示：

+ +

首先，在CSS的开始处有一个{{cssxref("@font-face")}}块，它指定要下载的字体文件：

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.ttf");
+}
+
+ +

在这个下面，你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：

+ +
html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+ +

语法确实比这更复杂，下面我们将详细介绍。

+ +

关于网页字体有两件重要的事情要记住：

+ +
    +
  1. 浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如,大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。
    2. +
  2. 字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。
    3. +
+ +
+

注意： Web字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！

+
+ +

自主学习:web字体示例

+ +

记住这一点，让我们从最初的原则构建一个基本的web字体示例。使用嵌入的live示例很难演示这一点，因此，我们希望您按照下面几节中详细介绍的步骤来了解这个过程。

+ +

你应该使用 web-font-start.html 和 web-font-start.css 文件作为开始添加到你的代码中（又见预览版。）现在，在你的电脑上的一个新目录中复制这些文件。在 web-font-start.css文件中，您将找到一些最小的CSS来处理这个示例的基本布局和排版。

+ +

查找字体

+ +

对于本例，我们将使用两种web字体，一种用于标题，另一种用于正文文本。首先，我们需要找到包含字体的字体文件。字体是由字体铸造厂创建的，并且存储在不同的文件格式中。
+ 通常有三种类型的网站可以获得字体：

+ + + +

让我们找到一些字体！前往Font Squirrel 并选择两种字体——一种用于标题的有趣的字体(可能是一种不错的显示字体或无衬线字体)，和一种用于段落，稍微不那么华丽，更易于阅读的字体。当您找到每种字体时，按下下载按钮，并将该文件保存在与您先前保存的HTML和CSS文件相同的目录中。无论它们是TTF(True Type Fonts))还是OTF(Open Type字体)都不重要。

+ +

在每种情况下，都要解压字体包(Web字体通常分布在包含字体文件和许可信息的ZIP文件中。)您可能会在包中发现多个字体文件，一些字体是作为一个具有不同变体的家庭分布的，例如，瘦、中、粗体、斜体、斜体等等。对于这个例子，我们只是想让您自己考虑一个单一的字体文件。

+ +
+

注意： 在右边栏的“查找字体”部分中，您可以单击不同的标记和分类来筛选显示的选项。

+
+ +

生成所需代码

+ +

现在您需要生成所需的代码(以及字体格式)。对于每种字体，遵循以下步骤：

+ +
    +
  1. 确保您已经满足了任何许可证的要求，如果您打算在一个商业和/或Web项目中使用它。
    2. +
  2. 前往 Fontsquirrel Webfont Generator.
    3. +
  3. 使用上传字体按钮上传你的两个字体文件。
    4. +
  4. 勾选复选框，“是的，我上传的字体符合网络嵌入的合法条件。
    5. +
  5. 点击下载你的套件（kit）。
    6. +
+ +

在生成器完成处理之后，您应该得到一个ZIP文件，将它保存在与HTML和CSS相同的目录中。

+ +

在演示中实现代码

+ +

在这一点上解压您刚刚生成的webfont套件。在解压的目录中，您将看到三个有用的条目：

+ + + +

要在演示中实现这些字体，请遵循以下步骤：

+ +
    +
  1. 将解压缩的目录重命名为简易的目录，比如fonts
    2. +
  2. 打开 stylesheet.css 文件，把包含在你的网页中的 @font-face块复制到你的 web-font-start.css 文件—— 你需要把它们放在最上面，在你的CSS之前，因为字体需要导入才能在你的网站上使用。
    3. +
  3. 每个url()函数指向一个我们想要导入到我们的CSS中的字体文件——我们需要确保文件的路径是正确的，因此，在每个路径的开头添加fonts/ （必要时进行调整）。
    4. +
  4. 现在，您可以在字体栈中使用这些字体，就像任何web安全或默认的系统字体一样。
    + 例如： + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

你应该得到一个演示页面，上面有一些漂亮的字体。因为不同字体的字体大小不同，你可能需要调整大小、间距等，以区分外观和感觉。

+ +

+ +
+

注意：如果对于要让它正常工作您有任何问题，可以自由地将您的版本与我们完成的文件进行比较——见 web-font-finished.html 和 web-font-finished.css (运行完成的示例)。

+
+ +

使用在线字体服务

+ +

在线字体服务通常会为你存储和服务字体，这样你就不用担心写@font-face代码了，通常只需要在你的网站上插入一两行代码就可以让一切都运行。例子包括Typekit 和Cloud.typography。大多数这些服务都是基于订阅的，除了Google Fonts，这是一个有用的免费服务，特别是对于快速的测试工作和编写演示。

+ +

大多数这些服务都很容易使用，所以我们不会详细地介绍它们。让我们快速浏览一下Google Fonts，这样你就能明白它的意思了。再次的，使用web-font-start.html 和 web-font-start.css a的副本作为你的开始。

+ +
    +
  1. 前往 Google Fonts.
    2. +
  2. 使用左边的过滤器来显示你想要选择的字体类型，并选择一些你喜欢的字体。
    3. +
  3. 要选择字体种类，按下按钮旁边的 ⊕ 按钮。
    4. +
  4. 当您选择好字体种类时，按下页面底部的[Number] 种类选择。
    5. +
  5. 在生成的屏幕中，首先需要复制所显示的HTML代码行，并将其粘贴到HTML文件的头部。将其置于现有的{{htmlelement("link")}}元素之上，使得字体是导入的，然后在你的CSS中使用它。
    6. +
  6. 然后，您需要将CSS声明复制到您的CSS中，以便将自定义字体应用到您的HTML。
    7. +
+ +
+

注意：如果你需要对比我们的，你可以在 google-font.html和google-font.css找到完整版本的。（见预览版）

+
+ +

关于@font-face的更多细节

+ +

让我们来探索由fontsquirrel为您生成的@font-face语法。这是其中一个块的样子：

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）", 这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax。让我们来看看它是怎么做的：

+ + + +
+

注意：您还可以为您的web字体指定特定的{{cssxref("font-variant")}} 和 {{cssxref("font-stretch")}} )值。在较新的浏览器中，您还可以指定一个{{cssxref("unicode-range")}}值，这是一个您需要使用什么web字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan写的Creating Custom Font Stacks with Unicode-Range在如何利用这个问题上提供了一些有用的建议。

+
+ +

总结

+ +

既然您已经完成了我们关于文本样式基础的文章，现在是时候用我们对模块的评估来测试您的理解了，为社区学校的主页进行排版。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/fundamentals/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/fundamentals/index.html" deleted file mode 100644 index 45660a9532..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/fundamentals/index.html" +++ /dev/null @@ -1,727 +0,0 @@ ---- -title: 基本文本和字体样式 -slug: Learn/CSS/为文本添加样式/Fundamentals -tags: - - 初学者 - - 对齐 - - 文本 - - 样式 - - 间距 -translation_of: Learn/CSS/Styling_text/Fundamentals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
- -

在这篇文章中，我们将带你开始掌握 {{glossary("CSS")}} 的文字样式的旅程。这里我们将详细介绍文本/字体样式的所有基本原理，包括设置文字的粗细，字体和样式，文字的属性简写，文字的对齐，和其他效果，以及行和字母间距。

- - - - - - - - - - - - -
先决条件：基本的电脑操作，HTML 基础 (学习 Introduction to HTML)，CSS 基础 (学习 Introduction to CSS).
目的:了解在网页上设计文本所需的基本属性和技术。
- -

CSS中的文字样式涉及什么？

- -

正如你已经在你使用 HTML 和 CSS 完成工作时所经历的一样，元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，你可以使用 {{htmlelement("br")}} 元素。

- -
-

注意: 如果上面的段落让你感到困惑，没关系，在继续之前，可以重新看看我们的 Box model 文件，复习框模型的理论。

-
- -

用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。

- - - -
-

注意: 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( {{htmlelement("span")}} 或者 {{htmlelement("strong")}}), 或者使用伪元素，像::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

-
- -

字体

- -

我们直接来看看样式字体的属性。在这个例子中，我们会在一个相同的 HTML 示例中应用一些不同的 CSS 属性，就像这样：

- -
<h1>Tommy the cat</h1>
-
-<p>I remember as if it were a meal ago...</p>
-
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
- -

你可以在这找到完成版本 finished example on Github (也可以看源码 the source code.)

- -

颜色

- -

{{cssxref("color")}} 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 {{cssxref("text-decoration")}} 属性放置在文本下方或上方的线 (underline overline)。

- -

color 也可以接受任何合法的 CSS 颜色单位, 比如:

- -
p {
-  color: red;
-}
- -

这将导致段落变为红色，而不是标准的浏览器默认的黑色，如下所示：

- - - -

{{ EmbedLiveSample('颜色', '100%', 220) }}

- -

字体种类

- -

要在你的文本上设置一个不同的字体，你可以使用 {{cssxref("font-family")}}  属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 {{anch("Default fonts", "default font")}}. 下面是一个简单的例子:

- -
p {
-  font-family: arial;
-}
- -

这段语句使所有在页面上的段落都采用 arial 字体，这个字体可在任何电脑上找到。

- -

网页安全字体

- -

说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体。

- -

大多数时候，作为网页开发者，我们希望对用于显示我们的文本内容的字体有更具体的控制。问题在于，需要一个方法来知道当前正在浏览我们的网站网页的电脑，它有哪些可用字体。我们并不是总能在每种情况下都知道这一点，但是网络安全字体在几乎所有最常用的操作系统（Windows，Mac，最常见的Linux发行版，Android和iOS版本）中都可用。

- -

实际的Web安全字体列表将随着操作系统的发展而改变，但是可以认为下面的字体是网页安全的，至少对于现在来说 (它们中的许多都非常流行，这要感谢微软在90年代末和21世纪初期的倡议Core fonts for the Web )：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
字体名称泛型注意
Arialsans-serif通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。
Courier Newmonospace某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。
Georgiaserif
Times New Romanserif某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。
Trebuchet MSsans-serif您应该小心使用这种字体——它在移动操作系统上并不广泛。
Verdanasans-serif
- -
-

注意: 在各种资源中，cssfontstack.com 网站维护了一个可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表，这可以帮助决策网站的安全性。

-
- -
-

注意: 有一个可以下载来自一个网页的自定义字体的方法，允许你通过任何你想要的方法来定制你使用的字体：网页字体。这个有一点复杂，我们将在这个模块中的另一篇文章中讨论这一点。

-
- -

默认字体

- -

CSS 定义了 5 个常用的字体名称:  serif, sans-serif, monospace, cursive,和 fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况，浏览器会尽力提供一个看上去合适的字体。 serif, sans-serif 和 monospace 是比较好预测的，默认的情况应该比较合理，另一方面，cursive 和 fantasy 是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。

- -

五个名称定义如下：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
名称定义示例
serif有衬线的字体 （衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）My big red elephant
sans-serif没有衬线的字体。My big red elephant
monospace每个字符具有相同宽度的字体，通常用于代码列表。My big red elephant
cursive用于模拟笔迹的字体，具有流动的连接笔画。My big red elephant
fantasy用来装饰的字体My big red elephant
- -

字体栈

- -

由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个字体栈 (font stack)，这样的话，浏览器就有多种字体可以选择了。只需包含一个font-family属性，其值由几个用逗号分离的字体名称组成。比如

- -
p {
-  font-family: "Trebuchet MS", Verdana, sans-serif;
-}
- -

在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。

- -

在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是Time New Roman - 这对于 sans-serif 字体是不利的！

- -
-

注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。

-
- -

一个使用 font-family 的例子

- -

让我们把它添加到之前的例子上，给段落一个 sans-serif 的字体。

- -
p {
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

这给我们以下结果：

- - - -

{{ EmbedLiveSample('一个使用_font-family_的例子', '100%', 220) }}

- -

字体大小

- -

在我们之前的模块中的CSS values and units 文章，我们回顾了length and size units. 字体大小 (通过 {{cssxref("font-size")}} 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 percentages)，然而你在调整字体大小时，最常用的单位是：

- - - -

元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——{{htmlelement("html")}}开始，浏览器的 font-size 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值：16px。其他元素也许有默认的大小，比如 {{htmlelement("h1")}} 元素有一个 2em 的默认值，所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时，事情会变得棘手。比如，如果你有一个 {{htmlelement("article")}} 元素在你的页面上，然后设置它的 font-size 为 1.5em (通过计算，可以得到大小为 24px)，然后想让 <article> 元素中的段落获得一个计算值为 20px 的大小，那么你应该使用多少 em。

- -
<!-- document base font-size is 16px -->
-<article> <!-- If my font-size is 1.5em -->
-  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
-</article>
- -

你需要将 em 的值设置为 20/24, 或者 0.83333333em. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rem 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。

- -

一个简单的 size 示例

- -

当调整你的文本大小时，将文档(document)的基础  font-size 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意，这样它们就可以很容易被找到。

- -

我们的新结果是这样的:

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('字体大小', '100%', 220) }}

- -

字体样式，字体粗细，文本转换和文本装饰

- -

CSS 提供了 4 种常用的属性来改变文本的样子：

- - - -

我们来看一下这几个属性添加到我们的例子中：

- -

我们的新结果是这样的：

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-  text-transform: capitalize;
-}
-
-h1 + p {
-  font-weight: bold;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('字体样式，字体粗细，文本转换和文本装饰', '100%', 220) }}

- -

文字阴影

- -

你可以为你的文本应用阴影，使用 {{cssxref("text-shadow")}} 属性。这最多需要 4 个值，如下例所示：

- -
text-shadow: 4px 4px 5px red;
- -

4 个属性如下:

- -
    -
  1. 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的。这个值必须指定。
    2. -
  2. 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。
    3. -
  3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位 length and size units.
    4. -
  4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为 black.
    5. -
- -
-

注意: 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 -1px -1px.

-
- -

多种阴影

- -

您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：

- -
text-shadow: -1px -1px 1px #aaa,
-             0px 4px 1px rgba(0,0,0,0.5),
-             4px 4px 5px rgba(0,0,0,0.7),
-             0px 0px 7px rgba(0,0,0,0.4);
- -

如果我们把这个样式应用到我们 "Tommy the cat" 示例中的 {{htmlelement("h1")}} 元素，就像这样：

- - - -

{{ EmbedLiveSample('多种阴影', '100%', 220) }}

- -
-

注意: 你可以看到更多有趣的关于 text-shadow 使用的示例在 Moonlighting with CSS text-shadow.

-
- -

文本布局

- -

有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。

- -

文本对齐

- -

 {{cssxref("text-align")}} 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：

- - - -

如果我们应用 text-align: center; 到我们例子中的 {{htmlelement("h1")}} 元素中，结果如下：

- - - -

{{ EmbedLiveSample('文本对齐', '100%', 220) }}

- -

行高

- -

 {{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:

- -
line-height: 1.5;
- -

把这个样式应用到我们示例中的 {{htmlelement("p")}} 元素，结果如下：

- - - -

{{ EmbedLiveSample('行高', '100%', 250) }}

- -

字母和单词间距

- -

{{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.

- -

所以作为例子，如果我们把这个样式应用到我们的示例中的 {{htmlelement("p")}} 段落的第一行：

- -
p::first-line {
-  letter-spacing: 2px;
-  word-spacing: 4px;
-}
- -

我们会得到下面的结果：

- - - -

{{ EmbedLiveSample('字母和字间距', '100%', 250) }}

- -

其他一些值得看一下的属性

- -

以上属性让你了解如何开始在网页上设置文本， 但是你可以使用更多的属性。我们只是想介绍最重要的。一旦你习惯使用上面的内容，你还应该探索以下几点：

- -

Font 样式:

- - - -

文本布局样式：

- - - -

Font 简写

- -

许多字体的属性也可以通过 {{cssxref("font")}} 的简写方式来设置 . 这些是按照以下顺序来写的：  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.

- -

如果你想要使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的。

- -

{{cssxref("font-size")}} 和 {{cssxref("line-height")}} 属性之间必须放一个正斜杠。

- -

一个完整的例子如下所示：

- -
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
- -

动手练习: 使用样式文本

- -

在这个动手练习中，我们没有任何具体的练习来做：我们只是希望你和一些字体/文本布局属性相处地愉快，看看你可以制作什么！你可以使用离线HTML / CSS文件进行此操作，也可以将代码输入到下面的实时可编辑示例中。

- -

如果你犯了错误，你可以使用 Reset 按钮来复原。

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

小结

- -

我们希望你在本篇文章中享受与文本在一起的时光！下篇文章会介绍所有你需要知道的关于 HTML 列表的样式。

- -

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/index.html" deleted file mode 100644 index ec4822b9ad..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 为文本添加样式（样式化文本） -slug: Learn/CSS/为文本添加样式 -tags: - - CSS - - 代码脚步 - - 列表lists - - 初学者 - - 字体Fonts - - 字母letter - - 文字font - - 文本Text - - 模块化Module - - 网络字体 web fonts - - 行line - - 链接Links - - 阴影shadow -translation_of: Learn/CSS/Styling_text ---- -
{{LearnSidebar}}
- -

掌握了 CSS 语言的基础之后，对于您来说，下一个需要关心的 CSS 主题就是为文本添加样式——一个您将会最经常使用 CSS 做的事情。在这里，我们专注于为文本样式的基础，包括设置字体、粗细、斜体、行还有字符间距、阴影以及文本的其他特征。我们将会通过在您的网页中应用自定义字体、样式化列表以及链接来圆满地结束本模块。

- -

前提

- -

在开始这一模块之前，您应当像 HTML 介绍 模块中所探讨的，已经熟悉了基本的HTML，以及像 CSS 介绍 中所详述的，对自己的 CSS 基础感觉还满意。

- -
-

注意: 如果您所使用的是不能创建自己的文件的电脑、平板电脑或其他设备的话，您可以在一个在线编码程序 JSBin 或 Thimble 中尝试（大部分的）代码例子。

-
- -

导引

- -

这个模块包括了以下文章，这些文章将教会您所有的基本功以支持您为 HTML 文本内容添加样式。

- -
-
基本的文本以及字体样式
-
在本文章中，我们将通篇了解文本、字体样式的所有基础，包括设置字体粗细（ font weight ）、字体系列及样式（ family and style ）、字体缩写（ font shorthand ）、文本排列（ text alignment ）和其他的效果，还有行（ line ）以及字符间距（ letter spacing ）。
-
样式化列表
-
对于大部分内容来说，列表的行为表现跟其他任何文本其实差不多，但您也需要了解还有一些专门用于列表的 CSS 样式以及考虑一些最好的实践方式。本文章将阐释这一切。
-
样式化链接
-
当您为链接添加样式时，很重要的一点是要去理解怎样有效地使用伪类去修饰链接的状态，以及怎么去修饰不同的接口功能例如导航菜单和面板中所使用的链接。我们将会在这篇文章中讨论这些话题。
-
网络字体
-
在这里我们将会详细地探索网络字体——这会允许您与您的网页一同下载自定义字体，来实现更为不同的个性化字体样式。
-
- -

评估

- -

以下的评估将会评测您对以上导引所涵盖的为文本添加样式的技术的理解。

- -
-
对一个社区学校的主页进行排版
-
在这个评估中，我们通过让您为一个社区学校的主页添加文本样式来测试您对文本样式的理解程度。
-
diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_links/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_links/index.html" deleted file mode 100644 index df2e7c6093..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_links/index.html" +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: 样式化链接 -slug: Learn/CSS/为文本添加样式/Styling_links -tags: - - 伪类 - - 悬浮 - - 标签 - - 聚焦 - - 菜单 - - 超链接 - - 链接 -translation_of: Learn/CSS/Styling_text/Styling_links ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

-
- -

当为 links 添加样式时, 理解利用伪类有效地建立链接状态是很重要的，以及如何为链接添加样式来实现常用的功能，比如说导航栏、选项卡。我们将在本文中关注所有这些主题。

- - - - - - - - - - - - -
学习本章节的前提:基本的计算机使用能力，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习 Introduction to CSS), CSS text and font fundamentals.
目的:学习如何将样式应用到链接状态，以及如何使用链接实现常见的 UI 功能，比如导航菜单。
- -

让我们来看一些链接

- -

根据最佳实践  创建超链接 中的练习，我们看到了如何在你的 HTML 中实现链接。在本篇文章中，我们会以这个知识为基础，向你展示将样式应用到链接的最佳实践。

- -

链接状态

- -

第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式:

- - - -

默认的样式

- -

下面的例子说明了一个链接的默认行为表现 (这里的 CSS 仅仅是为了放大和居中文本，使内容更加突出)

- -
<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('默认的样式', '100%', 120) }}

- -

当你观察默认样式的时候，你也许会注意到一些东西:

- - - -

有趣的是，这些默认的样式与20世纪90年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：

- - - -
-

注意: 你不仅仅只限于上述属性来把样式应用到你的链接上，你可以用任何你喜欢的属性，就是不要搞得太疯狂！

-
- -

将样式应用到一些链接

- -

现在我们已经详细地看了默认的状态，让我们看一下典型的链接样式的设置。

- -

开始之前，我们先写出我们的空规则集：

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

这几个规则的顺序是有意义的，因为链接的样式是建立在另一个样式之上的，比如，第一个规则的样式也会在后面的规则中生效，一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。要记住这个顺序，你可以尝试这样帮助记忆：LoVe Fears HAte.

- -

现在让我们再添加一些信息，得到正确的样式：

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: #265301;
-}
-
-a:visited {
-  color: #437A16;
-}
-
-a:focus {
-  border-bottom: 1px solid;
-  background: #BAE498;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-  background: #CDFEAA;
-}
-
-a:active {
-  background: #265301;
-  color: #CDFEAA;
-}
- -

这里还提供了一些示例HTML，供你应用CSS：

- -
<p>There are several browsers available, such as <a href="https://www.mozilla.org/zh-CN/firefox/">Mozilla
-Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
-<a href="https://www.microsoft.com/zh-CN/windows/microsoft-edge">Microsoft Edge</a>.</p>
- -

把这两个放在一起，我们得到这样的结果：

- -

{{ EmbedLiveSample('将样式应用到一些链接', '100%', 150) }}

- -

那么我们在这里做了什么? 这个看起来肯定和默认的样式不同，但仍然提供了一个熟悉的体验，好让用户知道发生了什么：

- - - -

动手练习: 为你的链接添加样式

- -

在这个动手练习部分，我们希望你使用我们的空规则集，然后添加你自定义的规则，从而使链接看上去比较酷。发挥你的想象力，大胆地做吧。我们相信你可以想出一些更酷的东西，就像我们上面的例子一样。

- -

如果你犯了错误，你都可以使用 Reset 按钮来重置。 如果你遇到了困难，可以按 Show solution 按钮来显示我们上文中的例子。

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

在链接中包含图标

- -

常见的做法是在链接中包含图标，使链接提供更多关于链接指向的内容的信息。让我们来看一个简单的例子，例子中为一个外部链接 (链接指向的不是本站，而是外部站点)。这样的图标通常看起来像一个指向盒子的小箭头，比如, 我们会使用icons8.com上的这个优秀的范例。

- -

让我们来看一些能给我们这个效果的 HTML 和 CSS。先是一些简单的等待你样式化的 HTML ：

- -
<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
-look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
-out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
- -

接着是 CSS:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus, a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
-
-a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
-  background-size: 16px 16px;
-  padding-right: 19px;
-}
- -

{{ EmbedLiveSample('在链接中包含图标', '100%', 150) }}

- -

那么这里发生了什么? 我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里，我们在外部链接上插入了一个自定义背景图片，这和上篇自定义列表项目符号文章的做法很像。这次，我们使用了 {{cssxref("background")}} 简写，而不是分别使用多个属性。我们设置了我们想要插入的图片的路径，指定了 no-repeat ，这样我们只插入了一次图片，然后指定位置为100%，使其出现在内容的右边，距离上方是0px。

- -

我们也使用 {{cssxref("background-size")}} 来指定要显示的背景图像的大小，为了满足响应式网站设计的需要，在图标更大，需要再重新调整它的大小的时候，这样做是很有帮助的。但是，这仅适用于IE 9及更高版本。所以你如果需要支持那些老的浏览器，只能调整图像的原始大小，然后插入。

- -

最后，我们在链接上设置 {{cssxref("padding-right")}} ，为背景图片留出空间，这样就不会让它和文本重叠了。

- -

最后的问题，我们是如何只选中了外部链接的？如果你正确编写你的HTML链接 ，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个属性选择器——a[href*="http"] ——选中 {{htmlelement("a")}} 元素，但是这样只会选中那些拥有 {{htmlattrxref("href","a")}} 属性，且属性的值包含 "http" 的 {{htmlelement("a")}}的元素。

- -

就这样啦，尝试重新审视上面的动手练习部分，尝试这种新技术！

- -
-

注意: 不要担心，如果你目前不熟悉 backgrounds 和 responsive web design ; 这些会在其他地方解释。

-
- -

样式化链接为按钮

- -

目前在本文中探索的用法也可以用在其他方面。比如，悬停 (hover) 的状态可以为不同的元素应用样式，不只是链接，你也许会想添加悬停状态的样式到段落、列表项、或者是其他东西。

- -

此外，在某些情况下，链接通常会应用样式，使它看上去的效果和按钮差不多，一个网站导航菜单通常是标记为一个列表，列表中包含链接，这可以很容易地被设计为看起来像一组控制按钮或是选项卡，主要是用于让用户可以访问站点的其他部分，现在让我们来看一看。

- -

首先，一些 HTML:

- -
<ul>
-  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
-</ul>
- -

接着，是我们的 CSS:

- -
body,html {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
-  text-align: center;
-  line-height: 3;
-  color: black;
-}
-
-li:last-child a {
-  margin-right: 0;
-}
-
-a:link, a:visited, a:focus {
-  background: yellow;
-}
-
-a:hover {
-  background: orange;
-}
-
-a:active {
-  background: red;
-  color: white;
-}
- -

这给我们以下结果：

- -

{{ EmbedLiveSample('样式化链接为按钮', '100%', 100) }}

- -

让我们来解释一下这里发生了什么，主要是几个有趣的部分:

- - - -
-

注意: 你也许会注意到 HTML 中的列表的每项内容都在同一行上，这是因为 inline-block 元素在页面上创建的空格换行符，就像几个字之间的空格，这样的空隙也许会破坏我们的水平导航菜单布局。所以我们删除了空格。你可以在  Fighting the space between inline block elements 找到有关此问题的更多信息（和解决方案）。

-
- -

测试你的技巧！

- -

你已经到了本文结尾，并且在我们的交互学习部分已经做了一些技巧测试。但是你在继续之前记住了最重要的信息了吗？你可以在模块末尾找到一个用于验证你已掌握知识的评估——见给一个社区大学的主页排版。

- -

这个评估测试了这个模块讨论到的所有知识，这样你可能在读下一篇文章之前想看一下它。

- -

小结

- -

我们希望本文为你提供有关链接的所有知识——目前！我们的样式文本模块中的最后一篇文章详细介绍了如何在你的网站上使用自定义字体，或者更熟悉网络字体。

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_lists/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_lists/index.html" deleted file mode 100644 index 075b457836..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/styling_lists/index.html" +++ /dev/null @@ -1,374 +0,0 @@ ---- -title: 样式列表 -slug: Learn/CSS/为文本添加样式/Styling_lists -translation_of: Learn/CSS/Styling_text/Styling_lists ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
- -

List列表 大体上和其他文本一样，但是仍有一些你需要知道的特殊CSS属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。

- - - - - - - - - - - - -
前置知识:Basic computer literacy, HTML basics (study Introduction to HTML), CSS basics (study Introduction to CSS), 基本文本和字体样式.
目标:熟悉与列表相关的样式和最佳实践
- -

一个简单的例子

- -

首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的样式特性，而某些特性却又各不相同。Github上有未加载样式的例子（也可以查看源码。）

- -

例子中列表的HTML代码如下：

- -
<h2>Shopping (unordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ul>
-  <li>Humous</li>
-  <li>Pitta</li>
-  <li>Green salad</li>
-  <li>Halloumi</li>
-</ul>
-
-<h2>Recipe (ordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ol>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
-
-<h2>Ingredient description list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<dl>
-  <dt>Humous</dt>
-  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
-  <dt>Pitta</dt>
-  <dd>A soft, slightly leavened flatbread.</dd>
-  <dt>Halloumi</dt>
-  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
-  <dt>Green salad</dt>
-  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
-</dl>
- -

现在，如果你去到例子的展示页面，并使用浏览器开发者工具查看那些列表元素，你会注意到若干个默认的样式预设值：

- - - -

处理列表间距

- -

当您创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距（例如段落和图片，有时称为垂直节奏））和相互间的水平间距（您可以在 Github 上参考完成的样式示例 ，也可以找到源代码。）

- -

用于文本样式和间距的CSS如下所示：

- -
/* General styles */
-
-html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10px;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-ul,ol,dl,p {
-  font-size: 1.5rem;
-}
-
-li, p {
-  line-height: 1.5;
-}
-
-/* Description list styles */
-
-
-dd, dt {
-  line-height: 1.5;
-}
-
-dt {
-  font-weight: bold;
-}
-
-dd {
-  margin-bottom: 1.5rem;
-}
-
- - - -

列表特定样式

- -

现在我们来看一下列表的一般间距，我们来研究一些列表具有的特定属性。 我们从三个属性开始了解，这三个属性可以在 {{htmlelement("ul")}} 或  {{htmlelement("ol")}} 元素上设置：

- - - -

符号样式

- -

像上面所提及的， {{cssxref("list-style-type")}}  属性允许你设置项目符号点的类型，在我们的例子中，我们在有序列表上设置了大写罗马数字：

- -
ol {
-  list-style-type: upper-roman;
-}
- -

效果显示如下：

- -

an ordered list with the bullet points set to appear outside the list item text.

- -

您可以通过  {{cssxref("list-style-type")}}  参考页面查找到更多选项。

- -

项目符号位置

- -

{{cssxref("list-style-position")}} 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。 如上所示，默认值为 outside，这使项目符号位于列表项之外。

- -

如果值设置为 inside，项目条目则位于行内。

- -
ol {
-  list-style-type: upper-roman;
-  list-style-position: inside;
-}
- -

an ordered list with the bullet points set to appear inside the list item text.

- -

使用自定义的项目符号图片

- -

{{cssxref("list-style-image")}} 属性允许对于项目符号使用自定义图片。其语法相当简单：

- -
ul {
-  list-style-image: url(star.svg);
-}
- -

然而，这个属性在控制项目符号的位置，大小等方面是有限的。 您最好使用{{cssxref("background")}} 系列属性，您将在 Styling boxes 模块中了解更多信息。在这里我们仅做一点尝试！

- -

结束我们的例子，我们样式化无序列表像这样（放到您之前所见的顶部）：

- -
ul {
-  padding-left: 2rem;
-  list-style-type: none;
-}
-
-ul li {
-  padding-left: 2rem;
-  background-image: url(star.svg);
-  background-position: 0 0;
-  background-size: 1.6rem 1.6rem;
-  background-repeat: no-repeat;
-}
- -

我们的所做如下：

- - - -

效果显示如下：

- -

an unordered list with the bullet points set as little star images

- -

list-style 速记

- -

上述提到的三种属性可以用一个单独的速记属性 {{cssxref("list-style")}} 来设置。例如：

- -
ul {
-  list-style-type: square;
-  list-style-image: url(example.png);
-  list-style-position: inside;
-}
- -

可以被如下方式代替：

- -
ul {
-  list-style: square url(example.png) inside;
-}
- -

属性值可以任意顺序排列，你可以设置一个，两个或者三个值（该属性的默认值为 disc, none, outside），如果指定了 type 和 image，如果由于某种原因导致图像无法加载，则 type 将用作回退。

- -

管理列表计数

- -

有时，您可能想在有序列表上进行不同的计数方式。例如： 从1以外的数字开始，或向后倒数，或者按步或多于1计数。HTML和CSS有一些工具可以帮助您

- -

start

- -

{{htmlattrxref("start","ol")}} 属性允许你从1 以外的数字开始计数。示例如下：

- -
<ol start="4">
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

输出的结果如下：

- -

{{ EmbedLiveSample('start', '100%', 150) }}

- -

reversed

- -

{{htmlattrxref("reversed","ol")}} 属性将启动列表倒计数。示例如下：

- -
<ol start="4" reversed>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

输出的结果如下：

- -

{{ EmbedLiveSample('reversed', '100%', 150) }}

- -

value

- -

{{htmlattrxref("value","ol")}} 属性允许设置列表项指定数值，示例如下:

- -
<ol>
-  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
-  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li value="6">Wash and chop the salad.</li>
-  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

输出的结果如下：

- -

{{ EmbedLiveSample('value', '100%', 150) }}

- -
-

注意: 纵然你使用非数字的 {{cssxref("list-style-type")}}, 你仍需要使用与数值同等意义的值作为 value 的属性。

-
- -

主动学习: 为嵌套式列表添加样式

- -

在该学习环节，我们希望你使用如上所学尝试为一个嵌套式列表添加样式。我们已经提供了 HTML , 在此之上请完成如下：

- -
    -
  1. 为该无序列表提供方形项目符号。
    2. -
  2. 为该无序列表项和有序列表项提供基于其字体大小 1.5 的行高。
    3. -
  3. 为有序列表提供小写字母的项目符号。
    4. -
  4. 对列表进行自由发挥，尝试不同的项目符号类型，间距，以及其他的各种属性。
    5. -
- -

如果犯了错误，可以随时点击 Reset（重置） 按钮进行重新设置。如果你真的遇到困难无法继续下去，点击 Show solution（显示解决方案）按钮查看可行的解决方案。

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

另请参阅

- -

CSS计数器提供用于自定义列表计数和样式的高级工具，但它们相当复杂。 如果你想更深入了解，请查看如下资源：

- - - -

总结

- -

一旦你掌握一些相关的基础原则和特定属性，列表的样式还是相对容易理解的。在下篇文章中我们将转到另一话题——为链接提供样式的各种技巧。

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/typesetting_a_homepage/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/typesetting_a_homepage/index.html" deleted file mode 100644 index 98f86f125f..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/typesetting_a_homepage/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: 作业：排版社区大学首页 -slug: Learn/CSS/为文本添加样式/Typesetting_a_homepage -tags: - - CSS - - 初学者 - - 字体 - - 样式化文本 - - 网络字体 - - 链接 -translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

在本测评中，通过对社区学校主页的文本样式化，我们会测试你对所有本模块涉及到的文本样式化技术的理解。你或许也会从中获得乐趣。

- - - - - - - - - - - - -
预备条件:在本次测评前，你应该完成了本模块所有章节。
目标:测试对CSS文本样式化技术的理解。
- -

开始

- -

在本测评开始前，你应该:

- - - -
-

注意: 或者，你可以使用像 JSBin 或 Thimble 的网站完成你的测评。你可以把HTML和CSS粘贴到在线编辑器中，并使用this URL指定背景图像。如果你使用的在线编辑器没有单独的CSS面板，你可以将其放在HTML文件的<style>元素中。

-
- -

项目简介

- -

你有一个虚构的社区大学主页的未处理HTML文件和一些CSS文件。这些CSS文件把网页分成两栏布局，提供了一些简单的样式化。你将在CSS文件底部的comment下写你的CSS，这样可以方便地标出你的工作。不要担心选择器一直重复；我们会帮你跳过这个问题。

- -

字体：

- - - -

文本样式化基础：

- - - -

链接：

- - - -

列表：

- - - -

导航栏菜单:

- - - -

提示与技巧

- - - -

实例

- -

下图展示了其中一种设计完成后的例子。

- -

- -

测评

- -

如果你将本测评作为课程的一部分，你应该能够将你的作品交给你的老师/指导员打分。如果你是自学的，你可以很轻松地在discussion thread for this exercise，或者Mozilla IRC的#mdn IRC 频道上获得打分。先尝试完成本次练习——作弊是学不到任何东西的！

- -

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

在本单元中

- - diff --git "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/web_\345\255\227\344\275\223/index.html" "b/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/web_\345\255\227\344\275\223/index.html" deleted file mode 100644 index ad9691cb00..0000000000 --- "a/files/zh-cn/learn/css/\344\270\272\346\226\207\346\234\254\346\267\273\345\212\240\346\240\267\345\274\217/web_\345\255\227\344\275\223/index.html" +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Web 字体 -slug: Learn/CSS/为文本添加样式/Web_字体 -translation_of: Learn/CSS/Styling_text/Web_fonts ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
- -

在模块的第一篇文章中，我们探讨了用于样式化字体和文本的基本CSS特性。在这篇文章中，我们将更进一步，详细地探索web字体——它们允许您下载自定义字体和您的web页面，以允许更多不同的、自定义的文本样式。

- - - - - - - - - - - - -
预备知识:基本计算机素养，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习Introduction to CSS), CSS文本和字体基础 。
目标:学习如何将web字体应用到web页面，使用第三方服务，或者编写自己的代码。
- -

字体种类回顾

- -

正如我们在基本文本和字体样式中所看到的那样，应用到您的HTML的字体可以使用 {{cssxref("font-family")}}属性来控制。您需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。

- -
p {
-  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
-}
- -

这个系统运行良好，但是对于传统的web开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 Web-safe 字体。您可以使用字体堆栈来指定可选择的字体，后面是Web-safe的替代选项，然后是默认的系统字体，但是为了确保您的设计在每种字体中都显示正常，这样增加了测试的开销。

- -

Web 字体

- -

但是还有一种选择，它非常有效，回到IE版本6。Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。太酷啦！所需的语法如下所示：

- -

首先，在CSS的开始处有一个{{cssxref("@font-face")}}块，它指定要下载的字体文件：

- -
@font-face {
-  font-family: "myFont";
-  src: url("myFont.ttf");
-}
-
- -

在这个下面，你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：

- -
html {
-  font-family: "myFont", "Bitstream Vera Serif", serif;
-}
- -

语法确实比这更复杂，下面我们将详细介绍。

- -

关于网页字体有两件重要的事情要记住：

- -
    -
  1. 浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如,大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。
    2. -
  2. 字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。
    3. -
- -
-

注意： Web字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！

-
- -

自主学习:web字体示例

- -

记住这一点，让我们从最初的原则构建一个基本的web字体示例。使用嵌入的live示例很难演示这一点，因此，我们希望您按照下面几节中详细介绍的步骤来了解这个过程。

- -

你应该使用 web-font-start.html 和 web-font-start.css 文件作为开始添加到你的代码中（又见预览版。）现在，在你的电脑上的一个新目录中复制这些文件。在 web-font-start.css文件中，您将找到一些最小的CSS来处理这个示例的基本布局和排版。

- -

查找字体

- -

对于本例，我们将使用两种web字体，一种用于标题，另一种用于正文文本。首先，我们需要找到包含字体的字体文件。字体是由字体铸造厂创建的，并且存储在不同的文件格式中。
- 通常有三种类型的网站可以获得字体：

- - - -

让我们找到一些字体！前往Font Squirrel 并选择两种字体——一种用于标题的有趣的字体(可能是一种不错的显示字体或无衬线字体)，和一种用于段落，稍微不那么华丽，更易于阅读的字体。当您找到每种字体时，按下下载按钮，并将该文件保存在与您先前保存的HTML和CSS文件相同的目录中。无论它们是TTF(True Type Fonts))还是OTF(Open Type字体)都不重要。

- -

在每种情况下，都要解压字体包(Web字体通常分布在包含字体文件和许可信息的ZIP文件中。)您可能会在包中发现多个字体文件，一些字体是作为一个具有不同变体的家庭分布的，例如，瘦、中、粗体、斜体、斜体等等。对于这个例子，我们只是想让您自己考虑一个单一的字体文件。

- -
-

注意： 在右边栏的“查找字体”部分中，您可以单击不同的标记和分类来筛选显示的选项。

-
- -

生成所需代码

- -

现在您需要生成所需的代码(以及字体格式)。对于每种字体，遵循以下步骤：

- -
    -
  1. 确保您已经满足了任何许可证的要求，如果您打算在一个商业和/或Web项目中使用它。
    2. -
  2. 前往 Fontsquirrel Webfont Generator.
    3. -
  3. 使用上传字体按钮上传你的两个字体文件。
    4. -
  4. 勾选复选框，“是的，我上传的字体符合网络嵌入的合法条件。
    5. -
  5. 点击下载你的套件（kit）。
    6. -
- -

在生成器完成处理之后，您应该得到一个ZIP文件，将它保存在与HTML和CSS相同的目录中。

- -

在演示中实现代码

- -

在这一点上解压您刚刚生成的webfont套件。在解压的目录中，您将看到三个有用的条目：

- - - -

要在演示中实现这些字体，请遵循以下步骤：

- -
    -
  1. 将解压缩的目录重命名为简易的目录，比如fonts
    2. -
  2. 打开 stylesheet.css 文件，把包含在你的网页中的 @font-face块复制到你的 web-font-start.css 文件—— 你需要把它们放在最上面，在你的CSS之前，因为字体需要导入才能在你的网站上使用。
    3. -
  3. 每个url()函数指向一个我们想要导入到我们的CSS中的字体文件——我们需要确保文件的路径是正确的，因此，在每个路径的开头添加fonts/ （必要时进行调整）。
    4. -
  4. 现在，您可以在字体栈中使用这些字体，就像任何web安全或默认的系统字体一样。
    - 例如： - 
    font-family: 'zantrokeregular', serif;
    -
    5. -
- -

你应该得到一个演示页面，上面有一些漂亮的字体。因为不同字体的字体大小不同，你可能需要调整大小、间距等，以区分外观和感觉。

- -

- -
-

注意：如果对于要让它正常工作您有任何问题，可以自由地将您的版本与我们完成的文件进行比较——见 web-font-finished.html 和 web-font-finished.css (运行完成的示例)。

-
- -

使用在线字体服务

- -

在线字体服务通常会为你存储和服务字体，这样你就不用担心写@font-face代码了，通常只需要在你的网站上插入一两行代码就可以让一切都运行。例子包括Typekit 和Cloud.typography。大多数这些服务都是基于订阅的，除了Google Fonts，这是一个有用的免费服务，特别是对于快速的测试工作和编写演示。

- -

大多数这些服务都很容易使用，所以我们不会详细地介绍它们。让我们快速浏览一下Google Fonts，这样你就能明白它的意思了。再次的，使用web-font-start.html 和 web-font-start.css a的副本作为你的开始。

- -
    -
  1. 前往 Google Fonts.
    2. -
  2. 使用左边的过滤器来显示你想要选择的字体类型，并选择一些你喜欢的字体。
    3. -
  3. 要选择字体种类，按下按钮旁边的 ⊕ 按钮。
    4. -
  4. 当您选择好字体种类时，按下页面底部的[Number] 种类选择。
    5. -
  5. 在生成的屏幕中，首先需要复制所显示的HTML代码行，并将其粘贴到HTML文件的头部。将其置于现有的{{htmlelement("link")}}元素之上，使得字体是导入的，然后在你的CSS中使用它。
    6. -
  6. 然后，您需要将CSS声明复制到您的CSS中，以便将自定义字体应用到您的HTML。
    7. -
- -
-

注意：如果你需要对比我们的，你可以在 google-font.html和google-font.css找到完整版本的。（见预览版）

-
- -

关于@font-face的更多细节

- -

让我们来探索由fontsquirrel为您生成的@font-face语法。这是其中一个块的样子：

- -
@font-face {
-  font-family: 'ciclefina';
-  src: url('fonts/cicle_fina-webfont.eot');
-  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
-         url('fonts/cicle_fina-webfont.woff') format('woff'),
-         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
-         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
- -

这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）", 这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax。让我们来看看它是怎么做的：

- - - -
-

注意：您还可以为您的web字体指定特定的{{cssxref("font-variant")}} 和 {{cssxref("font-stretch")}} )值。在较新的浏览器中，您还可以指定一个{{cssxref("unicode-range")}}值，这是一个您需要使用什么web字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan写的Creating Custom Font Stacks with Unicode-Range在如何利用这个问题上提供了一些有用的建议。

-
- -

总结

- -

既然您已经完成了我们关于文本样式基础的文章，现在是时候用我们对模块的评估来测试您的理解了，为社区学校的主页进行排版。

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

-- cgit v1.2.3-54-g00ecf