CSS 基础理解
您在本模块中学习了很多内容，所以到达最后一定感觉很棒！在继续学习之前，您需要完成本模块的评估 - 这包括一些相关的练习，您需要按顺序完成这些练习才能创建最终设计 - 名片/游戏卡/社交媒体资料。
| 先决条件 | 在尝试此评估之前，您应该已经完成了本模块中的所有文章。 |
|---|---|
| 目标 | 测试对 CSS 基础理论、语法和机制的理解。 |
起点
要开始此评估，您应该
- 获取练习的 HTML 文件和关联的图像文件，并将它们保存在本地计算机上的新目录中。如果您想使用自己的图像文件并填写自己的姓名，欢迎您 - 只要确保图像为正方形即可。
- 获取CSS 资源文本文件 - 该文件包含一组您需要学习和组合以回答部分评估的原始选择器和规则集。
或者，您可以使用在线编辑器，例如CodePen、JSFiddle或Glitch。您可以将 HTML 粘贴到其中一个在线编辑器中并填写 CSS，并使用此 URL将<img>元素指向图像文件。
**注意：**如果您遇到困难，可以在我们的沟通渠道中联系我们。
项目简介
您已获得一些原始 HTML 和图像，需要编写必要的 CSS 将其样式化为一个漂亮的小型在线名片，它也可以作为游戏卡或社交媒体资料。以下部分描述了您需要执行的操作。
基本设置
- 首先，在 HTML 和图像文件所在的同一目录中创建一个新文件。将其命名为一个非常有创意的名称，例如
style.css。 - 通过
<link>元素将您的 CSS 链接到 HTML 文件。 - CSS 资源文件中的前两个规则集是免费赠送的！在您为自己的好运欢欣鼓舞之后，将它们复制并粘贴到新 CSS 文件的顶部。使用它们来测试您的 CSS 是否已正确应用于 HTML。
- 在两个规则上方，添加一个 CSS 注释，其中包含一些文本，以指示这是一组适用于整个页面的通用样式。“通用页面样式”即可。还在 CSS 文件底部再添加三个注释，以指示卡片容器的设置样式、标题和页脚的特定样式以及主要名片内容的特定样式。从现在开始，添加到样式表中的后续样式应组织在适当的位置。
处理 CSS 资源文件中提供的选择器和规则集
- 接下来，我们希望您查看四个选择器，并计算每个选择器的特异性。将它们写下来，以便以后可以找到，例如在 CSS 顶部的注释中。
- 现在是时候将正确的选择器放在正确的规则集上了！您需要在 CSS 资源中匹配四对选择器和规则集。立即执行此操作，并将它们添加到您的 CSS 文件中。您需要
- 为主卡片容器设置固定宽度/高度、纯色背景颜色、边框和边框半径（圆角！），以及其他内容。
- 为标题设置从深到浅的背景渐变，以及与主卡片容器上设置的圆角相匹配的圆角。
- 为页脚设置从浅到深的背景渐变，以及与主卡片容器上设置的圆角相匹配的圆角。
- 将图像浮动到右侧，使其粘贴到主要名片内容的右侧，并将其最大高度设置为 100%（一个巧妙的技巧，可确保它会增长/缩小以保持与其父容器相同的高度，无论其高度变为多少）。
- 注意！提供的规则集中有两个错误。使用任何你了解的技术，找出并修复这些错误，然后再继续。
你需要编写的新的规则集
- 编写一个规则集，同时作用于卡片标题和卡片页脚，使它们都具有 50px 的计算总高度（包括 30px 的内容高度和四边各 10px 的内边距）。但需使用 `em` 单位表示。
- 浏览器默认应用于 `<h2>` 和 `<p>` 元素的边距会干扰我们的设计，因此编写一个规则，作用于所有这些元素，并将它们的边距设置为 0。
- 为了防止图片溢出主名片内容（`<article>` 元素），我们需要为其指定一个特定的高度。将 `<article>` 的高度设置为 120px，但需使用 `em` 单位表示。还要为其设置半透明黑色背景颜色，使其呈现稍微深一点的色调，并让背景红色略微透出来。
- 编写一个规则集，使 `<h2>` 的有效字体大小为 20px（但需使用 `em` 单位表示），并设置合适的行高，使其在标题内容盒的中心位置。回顾前面内容，内容盒的高度应为 30px——这为你计算行高提供了所有必要的数值。
- 编写一个规则集，使页脚内的 `<p>` 的有效字体大小为 15px（但需使用 `em` 单位表示），并设置合适的行高，使其在页脚内容盒的中心位置。回顾前面内容，内容盒的高度应为 30px——这为你计算行高提供了所有必要的数值。
- 作为最后的润色，为 `<article>` 内部的段落设置合适的内边距值，使其左边缘与 `<h2>` 和页脚段落对齐，并将其颜色设置为较浅的色调，以便于阅读。
注意：请记住，第二个规则集在 `<html>` 元素上设置了 `font-size: 10px;`——这意味着对于 `<html>` 的所有后代元素，1em 将等于 10px 而不是默认的 16px。（当然，前提是这些后代元素在它们与 `<html>` 之间的层级结构中没有任何祖先元素设置了不同的 `font-size`。这可能会影响你需要的数值，不过在这个简单的例子中这不是问题。）
其他需要考虑的事项
- 如果你能以最大程度的可读性编写你的 CSS，并在每一行上单独声明，你将获得额外加分。
- 你应该在所有规则的选择器链的开头包含 `.card`，这样这些规则就不会干扰其他元素的样式，即使名片被放置在一个包含大量其他内容的页面上。
提示和技巧
- 除了将 CSS 应用于你的 HTML 之外，不需要以任何方式编辑 HTML。
- 当试图确定表示特定像素长度所需的 `em` 值时，考虑一下根（`<html>`）元素的基本字体大小，以及需要将其乘以多少才能得到所需的值。这将为你提供 `em` 值，至少在像这样简单的案例中是这样。
