CSS 样式文本
介绍了 CSS 语言的基础知识后,你需要关注的下一个 CSS 主题是样式文本 — 这是你将使用 CSS 执行的最常见操作之一。在这里,我们了解文本样式的基础知识,包括设置字体、粗体、斜体、行距和字母间距、阴影和其他文本功能。我们通过将自定义字体应用到你的页面以及样式列表和链接来完善该模块。
¥With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.
先决条件
¥Prerequisites
在开始本模块之前,你应该已经对 HTML 有基本的了解(如 HTML 简介 模块中所述),并熟悉 CSS 基础知识(如 CSS 简介 中所述)。
¥Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.
注意:如果你正在使用无法创建自己的文件的计算机/平板电脑/其他设备,你可以尝试在线编码程序(例如 JSBin 或 Glitch)中的(大部分)代码示例。
¥Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.
指南
¥Guides
本模块包含以下文章,它们将教你设置 HTML 文本内容样式背后的所有要点。
¥This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.
- 基本文本和字体样式
-
在本文中,我们详细介绍了文本/字体样式的所有基础知识,包括设置字体粗细、系列和样式、字体速记、文本对齐和其他效果以及行距和字母间距。
- 样式列表
-
在大多数情况下,列表的行为与任何其他文本类似,但你需要了解一些特定于列表的 CSS 属性,以及需要考虑的一些最佳实践。这篇文章解释了一切。
- 设置链接样式
-
在设计链接样式时,了解如何利用伪类有效地设计链接状态以及如何设计链接样式以用于常见的各种界面功能(例如导航菜单和选项卡)非常重要。我们将在本文中讨论所有这些主题。
- 网页字体
-
在这里,我们将详细探讨网络字体 - 这些字体允许你随网页一起下载自定义字体,以实现更多样化的自定义文本样式。
评估
¥Assessments
以下评估将测试你对上述指南中涵盖的文本样式技术的理解。
¥The following assessment will test your understanding of the text styling techniques covered in the guides above.
- 排版社区学校主页
-
在此评估中,我们将通过让你为社区学校主页设置文本样式来测试你对文本样式的理解。