排版社区学校主页
在此评估中，我们将通过让你为社区学校主页设置文本样式来测试你对本模块中涵盖的所有文本样式技术的理解。一路上你可能会享受到一些乐趣。
¥In this assessment, we'll test your understanding of all the text styling techniques we've covered throughout this module by getting you to style the text for a community school's homepage. You might just have some fun along the way.
| 先决条件： | 在尝试进行此评估之前，你应该已经阅读了本模块中的所有文章。 |
|---|---|
| 目标： | 测试对 CSS 文本样式技术的理解。 |
初始点
¥Starting point
要开始此评估，你应该：
¥To get this assessment started, you should:
或者，你可以使用在线编辑器，例如 CodePen、JSFiddle 或 Glitch。你可以将 HTML 粘贴到其中一个在线编辑器中并填写 CSS，然后使用 这个外部链接图标 作为背景图片。
¥Alternatively, you could use an online editor such as CodePen, JSFiddle, or Glitch. You could paste the HTML and fill in the CSS into one of these online editors, and use this external link icon as a background image.
注意：如果你遇到困难，可以通过我们的 沟通渠道 之一与我们联系。
¥Note: If you get stuck, you can reach out to us in one of our communication channels.
工程概要
¥Project brief
我们为你提供了一些用于假想社区大学主页的原始 HTML，以及一些将页面样式设置为三列布局的 CSS，并提供了一些其他基本样式。你需要将 CSS 添加内容写在 CSS 文件底部的注释下方，以确保可以轻松标记你已完成的部分。如果某些选择器是重复的，请不要担心；在这种情况下我们会让你离开。
¥You've been provided with some raw HTML for the homepage of an imaginary community college, plus some CSS that styles the page into a three column layout and provides some other rudimentary styling. You're to write your CSS additions below the comment at the bottom of the CSS file to make sure it's easy to mark the bits you've done. Don't worry if some of the selectors are repetitious; we'll let you off in this instance.
字体：
¥Fonts:
- 首先，下载一些免费使用的字体。因为这是一所大学，所以字体的选择应该给页面一种相当严肃、正式、值得信赖的感觉：一般正文文本的衬线站点范围字体，加上标题的无衬线或粗衬线字体可能会很好。
- 使用合适的服务为这两种字体生成防弹
@font-face代码。 - 将正文字体应用于整个页面，将标题字体应用于标题。
一般文本样式：
¥General text styling:
- 为页面指定站点范围的
font-size或10px。 - 使用合适的相对单位定义标题和其他元素类型的适当字体大小。
- 为你的正文指定合适的
line-height。 - 将顶层标题置于页面中央。
- 给你的标题加一点
letter-spacing，让它们不会太压扁，并让字母稍微呼吸一下。 - 根据需要为你的正文添加一些
letter-spacing和word-spacing。 - 在
<section>中每个标题后的第一段中添加一点文本缩进，例如 20 像素。
链接：
¥Links:
- 为链接、已访问、焦点和悬停状态提供一些与页面顶部和底部水平条的颜色相匹配的颜色。
- 使链接默认带有下划线，但是当你将鼠标悬停或聚焦它们时，下划线会消失。
- 从页面上的所有链接中删除默认的焦点轮廓。
- 给活动状态一个明显不同的样式，这样它就能很好地脱颖而出，但仍然适合整体页面设计。
- 使外部链接旁边插入外部链接图标。
列表：
¥Lists:
- 确保列表和列表项的间距与整个页面的样式配合良好。每个列表项应具有与段落行相同的
line-height，并且每个列表的顶部和底部应具有与段落之间相同的间距。 - 为你的列表项提供适合页面设计的漂亮项目符号。你可以选择自定义项目符号图片还是其他图片，这取决于你。
导航菜单：
¥Navigation menu:
- 设置导航菜单的样式，使其与页面协调一致。
提示和技巧
示例
¥Example
以下屏幕截图显示了最终设计的示例：
¥The following screenshot shows an example of what the finished design could look like:
