recursal/MDN huggingface dataset:
运用你的新知识
=======

* 上一页
* Overview: First steps

通过在前几节课程中学到的知识，你应该学会了用 CSS 组织一个简单的文本文件，并且在其中添加自己的 CSS 样式。本节中你将实现这一功能。

|  |  |
| --- | --- |
| 前提： | 基本熟悉使用计算机，基本工作环境的设置，基本的文件处理知识，基本的 HTML 知识（在 HTML 概述中学习）和 CSS 基础（查看本模块其他内容） |
| 目标： | 尝试使用一些 CSS 的新玩法并检验新的知识 |

前提
--

你可以使用下面的实时编辑器，或者下载这个download the starting point在自己的编辑器中进行编辑。这是一个独立的 HTML 文件，在 head 中包含了初始 CSS 样式。你可以将这些 CSS 样式从 HTML 文件中移出，保存为另一个独立文件。你可以选择 CodePen、jsFiddle 或 Glitch 中的任意一个完成这些工作。

**备注：** 如果遇到困难，你可以向我求助——参见本页下面的测评或请求帮助部分。

### 让我们来学一些 CSS 样式

接下来的实例是一个个人主页，我们用 CSS 设定它的样式。以下是我用到的一些 CSS 属性，通过这些链接，你可以打开相应的 MDN 页面了解更多。

* `font-family`
* `color`
* `border-bottom`
* `font-weight`
* `font-size`
* `text-decoration`

我使用了许多不同的选择器（样式元素），如 h1 和 h2，也为工作职务建立了一个类别。

尝试使用 CSS 更改这一页面的显示，试着修改已有属性的取值，删除一些规则，或添加新的样式。然后通过CSS 参考找到本文未提及的一些属性，尽管大胆尝试！

举例来说，你可以：

* 使用 CSS 的颜色关键词 hotpink，将一级标题设定为粉红色。
* 使用 CSS 颜色关键词 purple，为标题添加 10 像素宽的点线边距。
* 将二级标题设为斜体。
* 用#eeeeee 为联系人列表中的超链接添加背景颜色和一个 5 像素宽的紫色加粗边框。使用一些内边距属性，拉开正文与外边距的距离。
* 当鼠标在某些 HTML 元素上悬停时增加动画 (推荐改变颜色和字体)。
* 设置链接在鼠标悬停时变为绿色。

最终，你得到的页面将如下图所示：

![Screenshot of how the example should look after completing the assessment.](/zh-CN/docs/Learn/CSS/First_steps/Styling_a_biography_page/learn-css-basics-assessment.png)

记住这里没有错误的答案——在这个阶段你可以在学习中娱乐一下。

测评或请求帮助
-------

如果你希望测试你的页面，或者你遇到困难想要求助，你可以：

1. 将你的文件提交到可网络共享的编辑器，如 CodePen、jsFiddle 或 Glitch。
2. 在 MDN 论坛（MDN Discourse forum）发帖请求测评或帮助。发帖时添加“学习”的标签，这样我们能够更容易找到它。你的帖子应包括以下内容：

* 一个描述性标题，例如“CSS 的初步尝试需要测试”。
* 详细描述你希望我们做些什么——比如，你已经尝试过了，但是卡住了，需要帮助。
* 你希望测试的例子的在网络编辑器上的链接。这是很好的做法，因为如果不让帮助你的看到你的程序，他们就很难帮助你解决程序的问题。
* 你的网页的测评页面链接，这样我们就可以找到你所求助的问题。
接下来是什么？
-------

恭喜你完成了第一个模块的学习。现在你应该对 CSS 有了一个大致的了解 并且能够了解在样式表中发生的大多数事情。在下一个模块CSS 构建中，我们将对一些关键区域进行深入的学习。

* 上一页
* Overview: First steps
作业：排版社区大学首页
===========

* 上一页
* Overview: Styling text

在本测评中，通过对社区学校主页的文本样式化，我们会测试你对所有本模块涉及到的文本样式化技术的理解。你或许也会从中获得乐趣。

|  |  |
| --- | --- |
| 预备条件： | 在本次测评前，你应该完成了本模块所有章节。 |
| 目标： | 测试对 CSS 文本样式化技术的理解。 |

开始
--

在本测评开始前，你应该：

* 获取本次练习的 HTML 和 CSS 文件以及提供的 external link icon。
* 在本地计算机中拷贝一份上述文件。

**备注：** 或者，你可以使用像 JSBin 或 Glitch 的网站完成你的测评。你可以把 HTML 和 CSS 粘贴到在线编辑器中，并使用this URL指定背景图像。如果你使用的在线编辑器没有单独的 CSS 面板，你可以将其放在 HTML 文件的<style>元素中。

项目简介
----

你有一个虚构的社区大学主页的未处理 HTML 文件和一些 CSS 文件。这些 CSS 文件把网页分成两栏布局，提供了一些简单的样式化。你将在 CSS 文件底部的 comment 下写你的 CSS，这样可以方便地标出你的工作。不要担心选择器一直重复；我们会帮你跳过这个问题。

字体：

* 首先，下载一些免费的字体。因为这是一所大学，字体应该严肃，正式，给人信任的感觉——主体使用 serif 字体，对标题结合使用 sans-serif 或者 slab serif 会是不错的选择。
* 使用合适的服务对着两种字体生成无死角的`@font-face`代码。
* 将你的 body 字体应用到 body，heading 字体应用到 heading。

文本样式化基础：

* 设置全站网页 `font-size` 为 `10px`。
* 使用相对单位（relative unit）为标题和其他元素的 font-sizes 设置合适的值。
* 为 body 文本设置合适的`line-height`。
* 居中页面顶级标题。
* 为标题设置 `letter-spacing` 避免字间太过拥挤。
* 为 body 文本设置合适的 `letter-spacing` 和 `word-spacing`。
* 在`<section>`元素中，每个标题后的第一段文字设置 20px 的文本缩进。

链接：

* 设置 link, visited, focus, 和 hover 状态设置颜色，与页面顶部和底部的水平线颜色相匹配。
* 设置链接默认带下划线，但 hover 和 focus 时下划线消失。
* 取消页面中所有链接 focus 时默认的外边线。
* 设置 active 时有显著不同的样式，使其又突出又与整体页面设计和谐。
* 在外部链接右侧插入外部链接图标。

列表：

* 确保列表和列表项与页面整体样式和谐。每个列表项应该有同样的与段落行相同的`line-height` 。每个列表上下间距应该与段落间距相同。
* 使用与页面设计匹配的 bullet 列表项符号。你可以选择自定义的 bullet 图像或者其他的喜欢的 bullet 符号。

导航栏菜单：

* 样式化你的导航栏菜单，使它拥有与页面整体相匹配的外观。
提示与技巧
-----

* 本练习中你不需要编辑 HTML 文件。
* 你不需要使导航栏菜单看起来像按钮，但它需要有一定的高度才不至于在页面侧边看起来很别扭；同时记得，你需要的是一个垂直导航栏菜单。
实例
--

下图展示了其中一种设计完成后的例子。

![](/zh-CN/docs/Learn/CSS/Styling_text/Typesetting_a_homepage/example2.png)

测评
--

如果你将本测评作为课程的一部分，你应该能够将你的作品交给你的老师/指导员打分。如果你是自学的，你可以很轻松地在discussion thread for this exercise，或者Mozilla IRC的#mdn IRC 频道上获得打分。先尝试完成本次练习——作弊是学不到任何东西的！

* 上一页
* Overview: Styling text
使用 CSS 添加文档内容
=============

本文介绍了一些通过 CSS 改变文档内容的方法。这样，仅修改样式表你就能把文本内容及图片添加到文档。

CSS 的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。当内容与文档结构紧密相关的时候，你可以在样式表中定义文本和图片内容。

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

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

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

示例
--

### 文本内容

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

#### HTML


```html
A text where I need to <span class="ref">something</span>
```


#### CSS


```css
.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。

### 图片内容

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

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

#### HTML


```html
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
```


#### CSS


```css
a.glossary::after {
  content: " " url("glossary-icon.gif");
}
```


#### 结果
技能测试：表格
=======

此任务的目的是为了帮助你检测在样式化表格课程中学到的技巧的理解。

**备注：** You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.

If you get stuck, then ask us for help — see the Assessment or further help section at the bottom of this page.

任务
--

在之前的课程中，我们以一种杀马特的方式样式化了一个表格。在这个任务中，我们打算样式化同样的表格，但是使用一些在外部文章Web 排版：设计可读而不是可看的表格概述的表格设计良好实践。

我们要完成的表格如下图所示。完成这个任务有许多方法，但是我建议你使用和向导中所用的相似的模式来完成以下的事情。

* 把标题和包含数字的列数据右对齐
* 把标题和包含文本的列数据左对齐
* 添加顶部和底部边框，以及页脚上方的边框
* 将主表的所有奇数行条纹化

![A table with striped rows.](/zh-CN/docs/Learn/CSS/Building_blocks/Tables_tasks/mdn-table-bands.png)

**备注：** For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Assessment or further help
--------------------------

You can practice these examples in the Interactive Editors mentioned above.

If you would like your work assessed, or are stuck and want to ask for help:

1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include:
    * A descriptive title such as "Assessment wanted for tables skill test".
    * Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
    * A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
    * A link to the actual task or assessment page, so we can find the question you want help with.
基本的 CSS 理解
==========

* 上一页
* Overview: Building blocks
* 下一页

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

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

起点
--

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

* 将 HTML file for the exercise, 和 associated image file,拷贝到你的本地环境中。如果你想使用自己的图片文件以及把你的名字写进资料里面的话，也没有问题，不过需要保证你提供的图像是正方形的。
* 下载 CSS resources text file 到你的本地环境，这个文件包含了一组原始选择器和规则集。你需要学习并将他们组合，这是测验的一部分。

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

项目概要
----

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

基本设置：

* 首先，在你放 HTML 文件和图像文件的目录下，创建一个新的文件，把它命名为类似`style.css`。
* 通过 `<link>` 元素来将你的 CSS 链接到 HTML 文件中。
* 我们为你提供的 CSS 资源文本文件中，前两项规则集是我们设置好的，你可以直接使用，所以将他们复制粘贴到你的新 CSS 文件的顶部。同时也可以将这个作为测验，用来确认你是否正确链接了你的 CSS 文件到 HTML 中。
* 在以上的两条规则中添加一条 CSS 注释，注释中要包含一些文本来表明这是整体页面的一般样式。你可以在 CSS 文件底部添加 3 个或以上的注释，来明确地表明该样式是应用到卡片的容器，应用到标题和页脚的样式，和名片主要内容的样式。从现在开始，随后在样式表添加的样式都应该有组织地放置在合适的地方。

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

* 接下来，我们希望你观察四个选择器，并计算每一个的专用性。将它们写在稍后可以找到的地方，例如在 CSS 顶部的注释中。
* 现在是时候把正确的选择器放在正确的规则集上了！你的 CSS 资源中有四对选择器和规则集需要匹配，现在就开始匹配，并将它们添加到你的 CSS 文件。你需要：
    + 为整体卡片的容器提供一个固定的宽/高，背景颜色，边框，以及边框圆角等等。
    + 为 header 提供一个渐变的背景颜色，从更暗到更亮，加上圆角，配合在卡片容器上设置的圆角。
    + 为 footer 提供一个渐变的背景颜色，从更亮到更暗，加上圆角，配合在卡片容器上设置的圆角。
    + 将图像向右浮动，使其粘贴在名片主要内容的右边，然后把它的 max-height 设置为 100% (一个聪明的技巧，来确保它将放大/缩小，与父容器保持同样的高度，不管它变成什么高度。)
* 注意！提供的规则集中有两个错误。使用你知道的任何技术找到这些错误并修复，然后再继续。

你需要写的新规则：

* 编写一个同时面向 card head 和 card footer 的规则集，使它们计算的总高度为 50px（包括 30px 的内容高度和 10px 的 padding）但用 `em` 来表示。
* 浏览器会为`<h2>` 和 `<p>`元素应用默认的 margin，这会影响我们的设计，所以编写一个规则集：margin 设置为 0。
* 为了阻止图像溢出名片的主要内容 ( `<article>` 元素)，我们需要给它设置一个明确的高度。设置 `<article>`的高度为 120px，但是使用 `em`来表示。还要给它一个半透明黑色的背景颜色，产生一个稍暗一点的阴影，能让红色的背景稍微透过。
* 编写一个规则集，使 `<h2>` 有效的字体大小为 20px (使用 `em`表达) 以及一个适当的行高将其放置在标题的内容框的中央。回想起来，内容框高度应该是 30px，你所有需要的数字都已经给你了，所以可以计算出行高。
* 为页脚中的 `<p>` 编写一个规则集，使它的有效字体大小为 15px (使用 `em`表达) 以及一个适当的行高将其放置在页面的内容框的中央。回想起来，内容框高度应该是 30px，你所有需要的数字都已经给你了，所以可以计算出行高。
* 最为最后一步，为 `<article>` 中的段落设置一个合适的 padding 值，让它和 `<h2>` 以及页脚的段落左边缘对齐，并将其颜色设置得便于阅读。

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

其他事情要考虑：

* 如果你编写的 CSS 有比较好的可读性，并在每行上单独声明，你将得到奖励。
* 你应该在所有规则的选择器中都用 `.card` 作为开头，这样的好处是：如果将名片放在带有其他内容的页面的情况下，这些规则不会干扰其他元素的样式。
注意和提示
-----

* 你不需要以任何方式编辑 HTML，除了将 CSS 应用于你的 HTML。
* 当使用 `em` 值代表一些你需要的像素长度的时候，想想 (`<html>`) 元素的基本字体大小，以及需要乘以什么才能获得所需的值。这将给你 em 的值，至少在这样一个简单的情况下。
示例
--

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

![A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.](/zh-CN/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension/business-card.png)

评估
--

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

* 上一页
* Overview: Building blocks
* 下一页
一个漂亮的盒子
=======

* 上一页
* Overview: Building blocks

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

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

起点
--

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

* 复制一份HTML和CSS代码，并在一个新的目录下把它们保存为`index.html` 和 `style.css`。

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

项目简介
----

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

### 一般任务

* 把 CSS 链接到 HTML 里。
### 样式化盒子

给 `<div>` 添加样式：

* 一个对于大按钮来说合理的宽度，200 像素左右。
* 一个对于大按钮来说合理的高度，并使文本纵向居中。
* 居中文本。
* 用 `rem` 使字体稍大一点，大约 17-18 像素，在注释里说说你的值是怎么算出来的。
* 给你的设计定一个基础颜色，把它作为盒子的背景颜色。
* 把字体颜色设为同一个颜色，使用黑色的文字阴影增加可读性。
* 一个精巧的圆角边框。
* 一个跟基础颜色相近、1 像素宽的实线边框，颜色要稍深一点。
* 一个指向右下角的黑色半透明线性渐变，让它在开始的时候完全透明，在 30% 的处渐变到 0.2 的不透明度，然后保持相同颜色到最后。
* 多个盒阴影：一个标准的盒阴影，使它看起来稍微从页面上浮起来；另外两个是内嵌（inset）的盒阴影，一个是左上角附近的白色半透明阴影和另一个是右下角附近的黑色半透明阴影，让盒子有一个漂亮的 3D 外观。
范例
--

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

![](/zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box/fancy-box2.png)

评估
--

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

* 上一页
* Overview: Building blocks
技能测试：背景与边框
==========

本技能测试的目的是评估你是否完全理解了 CSS 中的背景和边框教程的内容。

**备注：** 你可以在下面的互动编辑器中尝试解决方案。然而，下载代码并使用在线工具，如 CodePen、jsFiddle 或 Glitch 来完成任务可能会有所帮助。

如果你遇到了困难，那就向我们寻求帮助吧——见本页面底部的评估或进一步帮助部分。

任务 1
----

在这个任务中，我们希望你能为一个页面的标题添加背景、边框和一些简单的样式：

1. 令这个盒子的边框宽度为 5px，且为黑色实心（solid）的，圆角半径为 10px。
2. 添加背景图片（使用 `balloons.jpg` URL），调整它的大小，令其覆盖整个盒子。
3. 给予 `<h2>` 一个半透明的黑色背景颜色，并使文本为白色。

你的最终结果看起来应该如下图所示：

![图片显示了一个有照片背景的盒子，圆形的边框和半透明的黑色背景上的白色文字](/zh-CN/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders/backgrounds-task1.png)

尝试更新下面的实时代码，重现完成的示例：

下载这项任务的初始代码，在你自己的编辑器或在线编辑器中完成测试。

任务 2
----

在这个任务中，我们希望你为一个装饰性的盒子添加背景图片、边框和其他一些样式：

* 给这个盒子加一个 5px 的淡蓝色（lightblue）边框，设定左上角圆角半径为 20px，右下角圆角半径为 40px。
* 标题使用 `star.png` 图像作为背景图像，左边是一颗居中的星星，右边是重复的星星图案。
* 确保标题文本不覆盖图像，并且居中——你将需要使用在以前的课程中学到的技术来实现这一点。

你的最终结果看起来应该如下图所示：

![图片显示了一个在左上角和右下角有圆角蓝色边框的盒子。文字的左边有一颗星星，右边有 3 颗星星](/zh-CN/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders/backgrounds-task2.png)

尝试更新下面的实时代码，重现完成的示例：

下载这项任务的初始代码，在你自己的编辑器或在线编辑器中完成测试。

评估或进一步帮助
--------

可以在互动编辑器中完成上面的练习。

如果你期望对练习结果进行评估，或者遇到困难需要帮助，可以：

1. 可借助 CodePen、jsFiddle、Glitch 等在线编程实用工具完成任务。在那里你可以自行编写代码，也可以使用上文中所给的初始代码。
2. 在 MDN 论坛学习区发帖寻求他人的评估和帮助。你发表的文章应包括：
    * 一个描述性的标题，比如“Assessment wanted for backgrounds and borders skill test 1”。
    * 讲清你已经做出的努力，以及需要我们做什么，比如你遇到了困难并需要帮助，或者期望得到评估。
    * 一个链接指向你需要得到评估或帮助的实例，步骤 1 中三个在线编程工具之一均可。我们对希望得到帮助但由不提供代码的求助也很无奈。
    * 一个链接指向 MDN 测试的原始页面，在那里我们可以找到你需要获得帮助的原始信息。
技能测试：图片和表格元素
============

该任务的目的是帮助你检查对我们在本课程Images, Media and Form elements(图像，媒体及表格元素）中了解的一些值和单位的理解。

**备注：** 你可以在下面的交互式编辑器中尝试解决方案，但是下载代码并使用诸如CodePen, jsFiddle, Glitch 之类的在线工具来完成任务可能会更加有所帮助。

如果你遇到困难，联系我们获得帮助 — 参见页面底部的评价以及更多帮助

任务一
---

在此任务中，你有一张溢出盒子的图像。我们希望图像缩小到适合盒子的大小，而没有多余的空白，并不介意某些图像是否被裁剪。

![An image in a box](/zh-CN/docs/Learn/CSS/Building_blocks/Images_tasks/mdn-images-object-fit.png)

在下面的例子中看看你能否能符合上面的图片

**备注：** 为了为了评估或进一步完成任务，请下载此任务的起点，以便在你自己的编辑器或在线编辑器中工作。

任务二
---

在此任务中，你会获得一个简单的表格。你的任务是对该表单的外观进行以下更改：

* 使用属性选择器定位.myform 中的\*\*搜索 (search)\*\*字段和按钮。
* 使表单字段和按钮使用与表单其余部分相同的文本大小。
* 给表单字段和按钮设置 10 像素的内边距。
* 为按钮提供紫色背景，白色前景，无边框和 5px 的圆角。

![A single line form](/zh-CN/docs/Learn/CSS/Building_blocks/Images_tasks/mdn-images-form.png)

尝试更改下面的实时代码以重新创建图像中显示的示例：

**备注：** 为了为了评估或进一步完成任务，请下载此任务的起点，以便在你自己的编辑器或在线编辑器中工作。

评价以及更多帮助
--------

你可以在上面提到的交互式编辑器中练习这些示例。

如果你希望对自己的工作进行评估，或者遇到困难并希望寻求帮助，请执行以下操作：

1. 将你的工作上传到在线共享编辑器中，例如 CodePen, jsFiddle, Glitch.。你可以自己编写代码，也可以使用以上部分中链接到的起点文件。
2. 在MDN Discourse forum Learning category. “学习”类别中写一篇帖子，要求评估帮助。你的帖子应包括：

* 描述性标题，例如“**Assessment wanted for Images skill test 1**”。
* 你已经尝试过的内容以及你希望我们做什么的详细信息，例如 **如果你陷入困境并需要帮助**，或者**需要评估**。
* 指向你要评估或需要帮助的示例的链接（如上面的步骤 1 中所述）。这是很好好习惯 - 如果看不到代码，很难帮助存在问题的人。
* 指向实际任务或评估页面的链接，因此我们可以找到你需要帮助的问题。
创建精美的信纸
=======

* 上一页
* Overview: Styling boxes
* 下一页

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

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

起点
--

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

* 复制一份HTML和CSS代码，并在一个新的目录下把它们保存为`index.html` 和 `style.css`。
* 在同一个目录下下载这几张图片：顶部、底部和标志。

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

项目简介
----

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

### 信纸主体

* 把 CSS 链接到 HTML 文档里。
* 给信纸添加这样一个背景：
    + 把之前下载的顶部图片固定到信纸顶部。
    + 把之前下载的底部图片固定到信纸底部。
    + 为了给信纸一点纹理，在前面背景的基础上添加一个半透明的渐变，使其在顶部和底部附近稍微变暗，但中间的大部分完全透明。
* 多添加一个`background`声明，仅添加顶部图片到信纸顶部，以此作为不支持之前那种声明方式的浏览器的后备方案。
* 给信纸添加一个白色的背景颜色。
* 给信纸添加一个 1mm 的上下实线边框，选一个符合信纸的颜色主题的边框颜色。
### 标志

* 把之前下载的标志图片添加为`<h1>` (en-US)的背景图片。
* 给标志添加一个过滤器，使它有一个隐隐约约的阴影。
* 现在把添加的过滤器注释掉，尝试用其他（更跨浏览器兼容）的方式实现一个相同的阴影，阴影需要同样符合圆形图片的形状。
提示和技巧
-----

* 记住，你可以这样为较旧的浏览器创建一个后备方案：先写一个较旧的浏览器支持的后备声明，然后再接着写只有较新的浏览器才支持的声明。这样比较旧的浏览器会应用第一个声明而忽略掉第二个不支持的声明，与此同时比较新的浏览器会先应用第一个声明，然后用第二个声明把它覆盖掉。
* 如果想的话你可以随意地用自己的图片来做这个评估。
范例
--

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

![](/zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper/letterhead.png)

评估
--

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

* 上一页
* Overview: Styling boxes
* 下一页
CSS 选择器
=======

* 上一页
* Overview: Building blocks
* 下一页

CSS中，选择器用来指定网页上我们想要样式化的HTML元素。有 CSS 选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。本文和本文的子篇中，我们将会详细地讲授选择器的不同使用方式，并了解它们的工作原理。

|  |  |
| --- | --- |
| 学习前提： | 
 计算机的基本知识，
 安装了基础软件，处理文件的基本知识，HTML 基础（学习HTML 介绍）以及对 CSS 工作方式的了解（学习CSS 初步）
  |
| 目标： | 详细学习 CSS 选择器的工作方式。 |

选择器是什么？
-------

你也许已经见过选择器了。CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

![Some code with the h1 highlighted.](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/selector.png)

前面的文章中，你也许已经遇到过几种不同的选择器，了解到选择器可以以不同的方式选择元素，比如选择诸如`h1`的元素，或者是根据 class (类) 选择例如`.special`。

CSS 中，选择器由 CSS 选择器规范加以定义。就像是 CSS 的其他部分那样，它们需要浏览器的支持才能工作。你会遇到的大多数选择器都是在CSS 3中定义的，这是一个成熟的规范，因此你会发现浏览器对这些选择器有良好的支持。

选择器列表
-----

如果你有多个使用相同样式的 CSS 选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。例如，如果我的`h1`和`.special`类有相同的 CSS，那么我可以把它们写成两个分开的规则。


```css
h1 {
  color: blue;
}

.special {
  color: blue;
}
```


我也可以将它们组合起来，在它们之间加上一个逗号，变为选择器列表。


```css
h1, .special {
  color: blue;
}
```


空格可以在逗号前或后，你可能还会发现如果每个选择器都另起一行，会更好读些。


```css
h1,
.special {
  color: blue;
}
```


在下面的实时示例中，试着把两个有相同声明的选择器组合起来。外观在组合起来以后应该还是一样的。

当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。

在下面的示例中，无效的 class 选择器会被忽略，而`h1`选择器仍会被样式化。


```css
h1 {
  color: blue;
}

..special {
  color: blue;
}
```


但是在被组合起来以后，整个规则都会失效，无论是`h1`还是这个 class 都不会被样式化。


```css
h1,
..special {
  color: blue;
}
```

选择器的种类
------

有几组不同的选择器，知道了需要哪种选择器，你会更容易正确使用它们。在本文的子篇中，我们将会来更详细地看下不同种类的选择器。

### 类型、类和 ID 选择器

这个选择器组，第一个是指向了所有 HTML 元素 `<h1>`。


```css
h1 {
}
```


它也包含了一个 class 的选择器：


```css
.box {
}
```


亦或，一个 id 选择器：


```css
#unique {
}
```

### 标签属性选择器

这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：


```css
a[title] {
}
```


或者根据一个有特定值的标签属性是否存在来选择：


```css
a[href="https://example.com"]
{
}
```

### 伪类与伪元素

这组选择器包含了伪类，用来样式化一个元素的特定状态。例如`:hover`伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：


```css
a:hover {
}
```


它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，`::first-line`是会选择一个元素（下面的情况中是`<p>`）中的第一行，类似`<span>`包在了第一个被格式化的行外面，然后选择这个`<span>`。


```css
p::first-line {
}
```

### 运算符

最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（`>`）选择了`<article>`元素的初代子元素。


```css
article > p {
}
```

接下来要做的事情
--------

你可以看下下面的选择器参考表，可以获得到这个学习章节——或者总体来说是 MDN 上——的各种选择器的直接链接；你也可以继续下去，开始你的了解类型、类和 ID 选择器的旅程。

* 上一页
* Overview: Building blocks
* 下一页
属性选择器
=====

* 上一页
* Overview: Building blocks
* 下一页

从 HTML 的学习中，你已经知道，元素可以带有属性，它提供了关于如何标记的更详细信息。CSS 中，你能用属性选择器来选中带有特定属性的元素。本节课中，我们将会为你展示如何使用这些很有用的选择器。

|  |  |
| --- | --- |
| 学习前提： | 基础电脑知识，安装了基本的软件，处理文件的基本知识，HTML 基础（学习HTML 介绍），以及对 CSS 工作原理的了解（学习CSS 初步） |
| 目标： | 学习属性选择器是什么，如何使用。 |

存否和值选择器
-------

这些选择器允许基于一个元素自身是否存在（例如`href`）或者基于各式不同的按属性值的匹配，来选取元素。

| 选择器 | 示例 | 描述 |
| --- | --- | --- |
| `[*attr*]` | `a[title]` | 匹配带有一个名为*attr*的属性的元素——方括号里的值。 |
| `[*attr*=*value*]` | `a[href="https://example.com"]` | 匹配带有一个名为*attr*的属性的元素，其值正为*value*——引号中的字符串。 |
| `[*attr*~=*value*]` | `p[class~="special"]` | 匹配带有一个名为*attr*的属性的元素，其值正为*value*，或者匹配带有一个*attr*属性的元素，其值有一个或者更多，至少有一个和*value*匹配。
注意，在一列中的好几个值，是用空格隔开的。 |
| `[*attr*|=*value*]` | `div[lang|="zh"]` | 匹配带有一个名为*attr*的属性的元素，其值可正为*value*，或者开始为*value*，后面紧随着一个连字符。 |

下面的示例中，你可以看到这些选择器是怎样使用的。

* 使用`li[class]`，我们就能匹配任何有 class 属性的选择器。这匹配了除了第一项以外的所有项。
* `li[class="a"]`匹配带有一个`a`类的选择器，不过不会选中一部分值为`a`而另一部分是另一个用空格隔开的值的类，它选中了第二项。
* `li[class~="a"]`会匹配一个`a`类，不过也可以匹配一列用空格分开、包含`a`类的值，它选中了第二和第三项。

子字符串匹配选择器
---------

这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有`box-warning`和`box-error`类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用`[class^="box-"]`来把它们两个都选中。

| 选择器 | 示例 | 描述 |
| --- | --- | --- |
| `[attr^=value]` | `li[class^="box-"]` | 匹配带有一个名为*attr*的属性的元素，其值开头为*value*子字符串。 |
| `[attr$=value]` | `li[class$="-box"]` | 匹配带有一个名为*attr*的属性的元素，其值结尾为*value*子字符串 |
| `[attr*=value]` | `li[class*="box"]` | 匹配带有一个名为*attr*的属性的元素，其值的字符串中的任何地方，至少出现了一次*value*子字符串。 |

下个示例展示了这些选择器的用法：

* `li[class^="a"]`匹配了任何值开头为`a`的属性，于是匹配了前两项。
* `li[class$="a"]`匹配了任何值结尾为`a`的属性，于是匹配了第一和第三项。
* `li[class*="a"]`匹配了任何值的字符串中出现了`a`的属性，于是匹配了所有项。

大小写敏感
-----

如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用`i`值。这个标记告诉浏览器，要以大小写不敏感的方式匹配 ASCII 字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML 中是大小写敏感的。

下面的示例中，第一个选择器将会匹配一个开头为`a`的值，这样它只匹配了第一项，因为另外两项开头是大写的 A。第二个选择器使用了大小写不敏感的标记，于是匹配了所有项。

> 
> \*\*备注：\*\*此外还有一个更加新的`s`值，它会强制在上下文的匹配正常为大小写不敏感的时候，强行要求匹配时大小写敏感。不过，在浏览器中它不太受支持，而且在上下文为 HTML 时也没啥用。
> 
> 
> 

接下来……
-----

现在我们完成了属性选择器的学习，你可以继续读下篇文章——关于伪类和伪元素选择器的事情。

* 上一页
* Overview: Building blocks
* 下一页
技能测试：选择器
========

这个任务的目的是帮助你理解 CSS 里的选择器。

**备注：** 你可以在下面的交互式编辑器中尝试解决问题，然而把代码下载然后使用一个在线工具比如 CodePen、jsFiddle 或 Glitch 去解决这些问题可能对你更有作用。

如果你卡住了，可以向我们寻求帮助——请参阅本页底部的打分评估或进一步帮助部分。

选择器一
----

在没有改变 HTML 的情况下，使用 CSS 去完成下面的要求：:

* 使一级标题的字体颜色为蓝色
* 使二级标题有一个蓝色背景且白色文本。
* 使跨距中换行的文本的字体大小为 200%。

![Text with the CSS applied for the solution to task 1.](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks/selectors1.jpg)

尝试更新下面的实时代码，以重现完整的示例：

如需提交测评或进一步练习，下载本任务的初始文件，然后在本地或在线编辑器中练习。

选择器二
----

在没有改变 HTML 的情况下，对本例中内容的外观进行以下更改：

* 让 id 为 `special` 的元素有一个黄色背景。
* 让使用类 `alert` 的元素有一个 1px 的灰色边框。
* 如果一个元素使用了 `alert` 类还有 `stop`类，让它的背景变为红色。
* 如果一个元素使用 `alert` 类还有 `go`类，让它的背景变为绿色。

![Text with the CSS applied for the solution to task 2.](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks/selectors2.jpg)

尝试更新下面的实时代码，以重现完整的示例：

如需提交测评或进一步练习，下载本任务的初始文件，然后在本地或在线编辑器中练习。

选择器三
----

在本例中，尝试在不添加 HTML 的情况下进行以下更改。

* 链接文本的样式：使链接为橘色，被访问后变为绿色，当被 hover 时，移除链接文本的下划线。
* 让容器里的第一个元素的字体大小为:150%，并且让这个元素的第一行是红色的。
* 让表格中每隔一行条带化，分别给它们一个颜色为#333 的背景和一个白色前景。

![Text with the CSS applied for the solution to task 3.](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks/selectors3.jpg)

尝试更新下面的实时代码，以重现完整的示例：

如需提交测评或进一步练习，下载本任务的初始文件，然后在本地或在线编辑器中练习。

选择器四
----

在这个任务中尝试下面这个任务：

* 让任何直接跟随二级标题的段落颜色为红色。
* 移除使用了 list 类的无序列表的子元素前面的圆点，并给他们添加一个 1px 的灰色下边框。

![Text with the CSS applied for the solution to task 4.](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks/selectors4.jpg)

尝试更新下面的实时代码，以重现完整的示例：

如需提交测评或进一步练习，下载本任务的初始文件，然后在本地或在线编辑器中练习。

选择器五
----

在最后一个任务中，使用属性选择器添加 CSS 以执行以下操作：

* 选择带有 `title` 属性的 `<a>` 元素，将其边框颜色设置为粉色（`border-color: pink`）。
* 选择带有 `href` 属性且属性值中包含 `contact` 的 `<a>` 元素，将其边框颜色设置为橙色（`border-color: orange`）。
* 选择 `href` 属性值以 `https` 开头的 `<a>` 元素，将其边框颜色设置为绿色（`border-color: green`）。

![Four links with different color borders.](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks/selectors-attribute.png)

尝试更新下面的实时代码，以重现完整的示例：

如需提交测评或进一步练习，下载本任务的初始文件，然后在本地或在线编辑器中练习。

打分评估或进一步帮助
----------

你可以在上面的交互式编辑器中练习示例这些示例。

如果你想得到任务评价，或者遇到了问题需要帮助，请按如下操作进行：

1. 将你的作业上传到可共享的在线编辑器上，比如 CodePen、jsFiddle 或 Glitch。你可以自己编写代码，也可以使用上面给出的初始文件。
2. 在 MDN 论坛的学习板块上发帖以寻求打分或帮助。你的帖子中应包含：
    * 一个简述问题的标题。如“Assessment wanted for Selectors skill test 1”（请使用英文发帖）。
    * 详细描述你的尝试和你预期的网页效果。比如你在哪个位置需要帮助，或者你需要打分评估。
    * 你需要打分或帮助的作业链接（通过上述的在线编辑器上传）。只有让别人看到你的代码，你才能得到更好的帮助。
    * 本题的链接。让别人知道你所问的具体题目。
类型、类和 ID 选择器
============

* 上一页
* Overview: Building blocks
* 下一页

本节课中，我们看下可用的最简单的选择器，在你的工作中，它们很有可能会是最常用到的。

|  |  |
| --- | --- |
| 学习前提： | 基本电脑知识，安装了基础的软件，处理文件的基础知识，HTML 基础（学习HTML 介绍），以及对 CSS 工作原理的理解（学习CSS 初步） |
| 目标： | 学习不同的 CSS 选择器，通过它们将 CSS 应用到文档中。 |

类型选择器
-----

**类型选择器**有时也叫做“标签名选择器\*”\*或者是”元素选择器“，因为它在文档中选择了一个 HTML 标签/元素的缘故。在下面的示例中，我们已经用了 span、em 和 strong 选择器，`<span>`、`<em>`和`<strong>`元素的所有实例这样就都被样式化了。

**试着加上一条 CSS 规则，选择`<h1>`元素，把它的颜色变为蓝色。**

全局选择器
-----

全局选择器，是由一个星号（`*`）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。下面的示例中，我们已经用全局选择器，移去了所有元素上的外边距。这就是说，和浏览器以外边距隔开标题和段的方式默认加上的样式不同的是，每个物件都紧紧地挨在一起，我们不能那么容易就看清楚不同的段。

这种行为有时能在“重置样式表”中看到，其中所有浏览器所做的样式化都会被忽略。这些一度很受欢迎，但是把所有的样式化忽略掉的话，通常就是指，你必须做把这些样式带回来的工作！因此我们应小心使用全局选择器，以处理诸如下面所述之类的很特殊的情况。

### 使用全局选择器，让选择器更易读

全局选择器的一种用法是让选择器更易读，更明显地表明它们的作用。例如，如果我想选中任何`<article>`元素的第一子元素，不论它是什么元素，都给它加粗，我可以将`:first-child`选择器（我们将会在伪类和伪元素课中进一步了解）用作`<article>`元素选择器的一个后代选择器：


```css
article :first-child {
}
```


但是这会和`article:first-child`混淆，而后者选择了作为其他元素的第一子元素的`<article>`元素。

为了避免这种混淆，我们可以向`:first-child`选择器加入全局选择器，这样选择器所做的事情很容易就能看懂。选择器正选中`<article>`元素的*任何*第一子元素：


```css
article \*:first-child {
}
```

类选择器
----

类选择器以一个句点（`.`）开头，会选择文档中应用了这个类的所有物件。在下面的实时示例中，我们已经建立了一个名为`.highlight`的类，把它应用到了我的文档中的几个地方。所有包含此类的元素都被高亮了。

### 指向特定元素的类

你能建立一个指向应用一个类的特定元素。在下一个示例里面，我们将会用不同方式高亮一个带有`highlight`类的`<span>`和带有 `highlight`类的`<h1>`标题。我们通过使用附加了类的欲选元素的选择器做到这点，其间没有空格。

这种方式使 CSS 没那么可复用，因为类现在只会应用到那个特定元素，在认为规则也该应用到其他元素的时候，你会需要另外加上一个选择器。

### 多个类被应用的时候指向一个元素

你能对一个元素应用多个类，然后分别指向它们，或者仅仅在选择器中存在所有这些类的时候选择这一元素。在你的站点上，构建可以以不同方式组合起来的组件的时候，这会有用。

在下面的示例中，有一个包含了一条笔记的`<div>`。灰色的边框在盒子带有`notebox`类的时候应用。如果它还有一个`warning`或是`danger`类，我们改变`border-color`。

为了告诉浏览器我们只想匹配带有所有这些类的元素，我们可以将这些类不加空格地连成一串。

ID 选择器
------

ID 选择器开头为`#`而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个 ID 只会用到一次。它能选中设定了`id`的元素，你可以在 ID 前面加上类型选择器，只指向元素和 ID 都匹配的类。在下面的示例里，你可以看看这两种用法。

> 
> \*\*备注：\*\*正如我们在和特定性相关的课里面学到的那样，ID 所指特定，会优先于大多数其他选择器。所以很难处理它们。大多数情况下，给一个元素加个类，而不是使用 ID，会更好。不过要是 ID 是唯一一种指定这个元素的方式的话——也许是因为你没法访问标记标记因此不能编辑——这种方式可行。
> 
> 
> 

下一篇
---

来看属性选择器，继续探索选择器。

* 上一页
* Overview: Building blocks
* 下一页