测试你的技能：值和单位 - Web 开发

任务 1

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

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

你可以在 convertingcolors.com 上转换十六进制颜色。你需要弄清楚如何在 CSS 中使用这些值。你的最终结果应该如下图所示。

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

html

<ul>
  <li class="hex">hex color</li>
  <li class="rgb">RGB color</li>
  <li class="hsl">HSL color</li>
  <li class="transparency">Alpha value 0.6</li>
</ul>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 1em;
  padding: 0.5em;
}

.hex {
  background-color: #86defa;
}

/* Add styles here */

点击此处显示解决方案

通过使用颜色转换工具，你应该能够掌握如何使用不同的颜色函数以不同的方式定义相同的颜色。

css

.hex {
  background-color: #86defa;
}

.rgb {
  background-color: rgb(134 222 250);
}

.hsl {
  background-color: hsl(194 92% 75%);
}

.transparency {
  background-color: rgb(134 222 250 / 60%);
}

任务 2

在此任务中，我们要你设置各种文本项的字体大小。

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

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

Some text at varying sizes.

html

<h1>Level 1 heading</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<h2>Level 2 heading</h2>
<p>
  Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
  tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
  Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

css

body {
  font: 1.2em / 1.5 sans-serif;
}

h1 {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

p {
  /* Add styles here */
}

h1 + p {
  /* Add styles here */
}

点击此处显示解决方案

你可以使用以下长度值。

css

h1 {
  font-size: 50px;
}

h2 {
  font-size: 2em;
}

p {
  font-size: 16px;
}

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

任务 3

要完成此任务，请更新 CSS，将背景图片移动到距离盒子顶部 20% 的位置，并使其水平居中。

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

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

html

<div class="box"></div>

css

.box {
  border: 5px solid black;
  height: 350px;
}

.box {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/purple-star.png");
  background-repeat: no-repeat;
}

点击此处显示解决方案

使用 background-position 属性，并结合 center 关键字和一个百分比值。

css

.box {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/purple-star.png");
  background-repeat: no-repeat;
  background-position: center 20%;
}

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年8月21日，作者：MDN contributors。

在 GitHub 上查看此页面 • 报告此内容的问题