基本的 CSS 理解
你已经在本模块中学习了很多内容，所以到达终点一定感觉很好！继续之前的最后一步是尝试对该模块进行评估 - 这涉及到必须完成的许多相关练习，以便创建最终设计 - 名片/玩家卡/社交媒体资料。
¥You've covered a lot in this module, so it must feel good to have reached the end! The final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the final design — a business card/gamer card/social media profile.
| 先决条件： | 在尝试进行此评估之前，你应该已经阅读了本模块中的所有文章。 |
|---|---|
| 目标： | 测试对基本 CSS 理论、语法和机制的理解。 |
初始点
¥Starting point
要开始此评估，你应该：
¥To get this assessment started, you should:
- 获取 用于练习的 HTML 文件 和 关联图片文件，并将它们保存在本地计算机上的新目录中。如果你想使用自己的图片文件并填写自己的名字，欢迎你 - 只需确保图片是正方形即可。
- 抓住 CSS 资源文本文件 — 它包含一组原始选择器和规则集，你需要研究并结合它们来回答此评估的部分内容。
或者，你可以使用在线编辑器，例如 CodePen、JSFiddle 或 Glitch。你可以将 HTML 粘贴到这些在线编辑器之一中并填写 CSS，然后使用 这个网址 将 <img> 元素指向图片文件。
¥Alternatively, you could use an online editor such as CodePen, JSFiddle, or Glitch.
You could paste the HTML and fill in the CSS into one of these online editors, and use this URL to point the <img> element to the image file.
注意：如果你遇到困难，可以通过我们的 沟通渠道 之一与我们联系。
¥Note: If you get stuck, you can reach out to us in one of our communication channels.
工程概要
¥Project brief
你已经获得了一些原始 HTML 和图片，并且需要编写必要的 CSS 来将其设计为漂亮的小型在线名片，该名片也许可以兼作玩家卡或社交媒体个人资料。以下部分描述了你需要执行的操作。
¥You have been provided with some raw HTML and an image, and need to write the necessary CSS to style this into a nifty little online business card, which can perhaps double as a gamer card or social media profile. The following sections describe what you need to do.
基本设置：
¥Basic setup:
- 首先，在 HTML 和图片文件所在的目录中创建一个新文件。称其为“
style.css”之类的真正富有想象力的东西。 - 通过
<link>元素将 CSS 链接到 HTML 文件。 - CSS 资源文件中的前两个规则集是你的，免费！当你对自己的好运感到庆幸之后，将它们复制并粘贴到新 CSS 文件的顶部。使用它们作为测试，以确保你的 CSS 正确应用于你的 HTML。
- 在这两条规则之上，添加一个 CSS 注释，其中包含一些文本，以表明这是整个页面的一组通用样式。"通用页面样式" 就可以了。还要在 CSS 文件底部添加三个注释，以指示特定于卡片容器设置的样式、特定于页眉和页脚的样式以及特定于主要名片内容的样式。从现在开始，添加到样式表中的后续样式应该组织在适当的位置。
处理 CSS 资源文件中提供的选择器和规则集：
¥Taking care of the selectors and rulesets provided in the CSS resource file:
- 接下来，我们希望你查看四个选择器，并计算每个选择器的特异性。将它们写在以后可以找到的地方，例如在 CSS 顶部的注释中。
- 现在是时候将正确的选择器放在正确的规则集上了！你有四对选择器和规则集来匹配你的 CSS 资源。现在就执行此操作，并将它们添加到你的 CSS 文件中。你需要：
- 给主卡片容器一个固定的宽度/高度、纯色背景色、边框和边框半径（圆角！）等等。
- 为标题提供从深到浅的背景渐变，以及与主卡片容器上设置的圆角相匹配的圆角。
- 为页脚提供从浅到深的背景渐变，以及与主卡片容器上设置的圆角相匹配的圆角。
- 漂浮 将图片放在右侧，以便它粘在主要名片内容的右侧，并将其最大高度设置为 100%（这是一个巧妙的技巧，可确保它会增大/缩小以保持相同的高度 作为其父容器，无论它的高度如何。）
- 谨防！提供的规则集中有两个错误。使用你知道的任何技术，追踪这些问题并修复它们，然后再继续。
你需要编写的新规则集：
¥New rulesets you need to write:
- 编写一个针对卡页眉和卡页脚的规则集，计算出它们的总高度均为 50 像素（包括 30 像素的内容高度和所有边的 10 像素填充）。但以
em表示。 - 浏览器对
<h2>和<p>元素应用的默认边距会干扰我们的设计，因此请编写一条针对所有这些元素的规则，并将它们的边距设置为 0。 - 为了阻止图片溢出主要名片内容（
<article>元素），我们需要给它一个特定的高度。将<article>的高度设置为 120px，但以em表示。还给它一个半透明的黑色背景颜色，导致稍微深一点的阴影，让背景红色也稍微透亮。 - 编写一个规则集，为
<h2>提供 20px 的有效字体大小（但以em表示）和适当的行高，以将其放置在标题内容框的中心。回想一下之前内容框的高度应该是 30px — 这为你提供了计算行高所需的所有数字。 - 编写一个规则集，为页脚内的
<p>提供 15px 的有效字体大小（但以em表示）和适当的行高，以将其放置在页脚内容框的中心。回想一下之前内容框的高度应该是 30px — 这为你提供了计算行高所需的所有数字。 - 最后一点，给
<article>内的段落一个适当的填充值，使其左边缘与<h2>和页脚段落对齐，并将其颜色设置为相当浅，以便于阅读。
注意：请记住，第二个规则集在
<html>元素上设置font-size: 10px;— 这意味着对于<html>的任何后代，em 将等于 10px 而不是默认情况下的 16px。（当然，前提是所讨论的后代在它们和层次结构中的<html>之间没有任何祖级，并且在它们上设置了不同的font-size。这可能会影响你需要的值，尽管在这个简单的示例中这是 没什么大不了。）¥Note: Bear in mind that the second ruleset sets
font-size: 10px;on the<html>element — this means that for any descendants of<html>, an em will be equal to 10px rather than 16px as it is by default. (This is of course, provided the descendants in question don't have any ancestors sitting in between them and<html>in the hierarchy that have a differentfont-sizeset on them. This could affect the values you need, although in this simple example this is not an issue.)
其他需要考虑的事情：
¥Other things to think about:
- 如果你编写的 CSS 具有最大的可读性，并且每行都有单独的声明，你将获得加分。
- 你应该在所有规则中的选择器链的开头包含
.card，这样，如果将名片放在包含大量其他内容的页面上，这些规则就不会干扰任何其他元素的样式。
提示和技巧
示例
¥Example
以下屏幕截图显示了最终设计的示例：
¥The following screenshot shows an example of what the finished design should look like:
