测试你的技能：值和单位

此技能测试的目的是评估您是否理解不同类型的CSS 属性中使用的值和单位。

注意：您可以在此页面上的交互式编辑器或在线编辑器（例如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。

如果您遇到困难，可以通过我们的 沟通渠道之一联系我们。

任务 1

在此任务中，第一个列表项已使用十六进制颜色代码设置了背景颜色。您的任务是使用相同颜色在不同的格式中完成 CSS，并在最后一个列表项中使背景半透明。

  • 第二个列表项应使用 RGB 颜色。
  • 第三个应使用 HSL 颜色。
  • 第四个应使用 RGB 颜色，但将 alpha 通道设置为 0.6。

您可以在 此链接 中找到十六进制颜色的转换。您需要弄清楚如何在 CSS 中使用这些值。最终结果应如下面的图片所示

Four list items. The first three with the same background color and the last with a lighter background.

尝试更新下面的实时代码以重新创建完成的示例

下载此任务的起始点，以便在您自己的编辑器或在线编辑器中进行操作。

任务 2

在此任务中，我们希望您设置各种文本项目的尺寸，如下所述

  • <h1> 元素应为 50 像素。
  • <h2> 元素应为 2em。
  • 所有 <p> 元素应为 16 像素。
  • 紧跟在 <h1> 之后的 <p> 元素应为 120%。

最终结果应如下面的图片所示

Some text at varying sizes.

尝试更新下面的实时代码以重新创建完成的示例

下载此任务的起始点，以便在您自己的编辑器或在线编辑器中进行操作。

任务 3

在此任务中，我们希望您移动背景图像，使其水平居中，并距离盒子顶部 20%。

最终结果应如下面的图片所示

A stat centered horizontally in a box and a short distance from the top of the box.

尝试更新下面的实时代码以重新创建完成的示例

下载此任务的起始点，以便在您自己的编辑器或在线编辑器中进行操作。