Menu
CoddyTech

复习挑战 #1

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 23 课,共 76 课。

challenge icon

挑战

简单

在第一个复习挑战中,你将运用对 CSS 文本样式属性的了解,重现指定的设计。这个挑战将测试你组合各种文本属性的能力,例如 color、font-family、font-size、font-weight、text-align 和 text-decoration。

你会得到一个包含各种元素的 HTML 文档。你的任务是运用本单元学到的不同属性为这些元素设置样式。按照以下步骤操作:

  1. 编写一条 CSS 规则,选择所有 <h1> 元素。
    • 将颜色设为深蓝色。
    • 将字号设为 32px。
    • 将字重设为粗体。
    • 将文本对齐方式设为居中。
  2. 编写一条 CSS 规则,选择所有带有 intro-text 类的元素。
    • 将颜色设为灰色。
    • 将字体系列设为 Arial, Helvetica, sans-serif;
    • 将字号设为 18px。
  3. 编写一条 CSS 规则,选择所有 <li> 元素。
    • 将字重设为 600。
  4. 编写一条 CSS 规则,选择所有 <a> 元素。
    • 将文本装饰设为 none。
    • 将字体设置为你偏好的字体系列,即  "Times New Roman", Times, serif。

亲手试试

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Discovering the Ocean</h1>
    <p class="intro-text">The ocean covers 70% of the Earth's surface and is full of life. It also helps regulate the planet's climate.</p>
    <h2>Marine Life</h2>
    <ul>
        <li>Whales</li>
        <li>Octopuses</li>
        <li>Coral Reefs</li>
    </ul>
    <p>Learn more at <a href="https://www.oceans.org" target="_blank">The Ocean Conservation Society</a>.</p>
</body>
</html>

使用 CSS 添加样式中的所有课

自己练习: Web 在线编辑器