复习挑战 #2

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

挑战

简单

在这个第二次复习挑战中，你将运用所学的 CSS 文本样式属性，重现指定的设计。这个挑战将检验你组合各种文本属性的能力，例如 color、font-family、font-size、font-weight、text-align 和 text-decoration，以匹配给定的设计。

给你一个 HTML 文档，其中包含一个标题（<h1>）、一个段落（<p>）、一个链接（<a>）和一个无序列表（<ul>），列表中有列表项（<li>）。你的任务是运用学过的文本样式属性，为这些元素设置样式，使其与下方图片中显示的设计相匹配：

按照以下步骤操作：

编写一条 CSS 规则，选中 <h1> 元素。将 color 设置为 black，将 font-family 设置为 "Times New Roman", Times, serif，将 font-size 设置为 48px，将 font-weight 设置为 bold，并将 text-align 设置为 center。
编写一条 CSS 规则，选中 <p> 元素。将 color 设置为 gray，将 font-family 设置为 Arial, Helvetica, sans-serif，将 font-size 设置为 18px，并将 text-align 设置为 center。
编写一条 CSS 规则，选中 <a> 元素。将 color 设置为 red，将 text-decoration 设置为 none。
编写一条 CSS 规则，选中所有 <li> 元素。将 color 设置为 green，将 font-family 设置为 "Courier New", Courier, monospace，将 font-size 设置为 25px，并将 font-weight 设置为 600。

亲手试试

<html>
<head>
    <title>Recap Challenge #2</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>