4. CSS 文本样式

学习成果

• color.

• 字体族、字体堆栈、Web 安全字体。

• font-size、font-weight 和 font-style。

• text-align、text-transform 和 text-decoration。

• text-shadow.

• line-height.

注意:

还有许多其他的字体和文本样式属性，应鼓励学生在持续学习中探索更多。

资源

• 基本文本和字体样式

• 文本和排版，web.dev (2021)

• Web 安全字体，Scrimba 课程合作伙伴

学习成果

• 列表项间距设置，例如使用 margin 或 line-height。

• list-style 属性。

• 理解为什么默认链接样式对于 Web 可用性很重要——它们很熟悉，有助于用户识别链接。

• 链接状态样式设置：:hover、:focus、:visited 和 :active

  • 理解为什么这些对于可用性和可访问性是必需的。

• 使用列表和链接创建导航菜单。

资源

• 列表样式

• 链接样式

学习成果

• 理解 Web 字体允许开发人员超越 Web 安全字体集，并在其 Web 应用程序中使用自定义字体。

• 基本设置 — @font-face 规则以及 font-family 和 src 描述符。

• 使用 font-family 属性使用 Web 字体。

• 其他描述符 — font-weight、font-style 等。

• 使用在线服务查找 Web 字体并生成 Web 字体代码，例如 Font Squirrel 和 Google Fonts。

• Web 字体对可用性的影响 — 使用多个 Web 字体可能会增加页面下载大小。

资源

• Web 字体

• 字体知识，Google Fonts

• 关于 CSS font-family 属性的一切，explainers.dev