复习挑战 #1
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 23 课,共 76 课。
挑战
简单在第一个复习挑战中,你将运用对 CSS 文本样式属性的了解,重现指定的设计。这个挑战将测试你组合各种文本属性的能力,例如 color、font-family、font-size、font-weight、text-align 和 text-decoration。
你会得到一个包含各种元素的 HTML 文档。你的任务是运用本单元学到的不同属性为这些元素设置样式。按照以下步骤操作:
- 编写一条 CSS 规则,选择所有
<h1>元素。- 将颜色设为深蓝色。
- 将字号设为 32px。
- 将字重设为粗体。
- 将文本对齐方式设为居中。
- 编写一条 CSS 规则,选择所有带有
intro-text类的元素。- 将颜色设为灰色。
- 将字体系列设为
Arial, Helvetica, sans-serif; - 将字号设为 18px。
- 编写一条 CSS 规则,选择所有
<li>元素。- 将字重设为 600。
- 编写一条 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 在线编辑器