文字樣式

託了 CSS 語言基礎的福，下一個讓你專攻的 CSS 主題是文字樣式——最常會在 CSS 使用的部分。讓我們來看看文字樣式的基礎知識，包含設定字形、粗細、斜體、行距與字距、陰影以及更多文字功能。我們會套用客製化字形、設定清單樣式和連結樣式到你的網頁來完成這個單元。

先備知識

在開始這個單元之前，你應該先熟悉基礎的 HTML，如 HTML 介紹這個單元所討論的，並且要對 CSS 的基礎感到輕鬆，如 CSS 介紹討論的。

备注： 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, CodePen or Glitch.

指南

這個單元包含以下的文章會教導你?設定 HTML 文字內容樣式的全部要領。

基本的字形及文字樣式: In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
清單樣式: Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.
連結樣式: When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.
網頁字形: Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.

Assessments

The following assessments will test your understanding of the text styling techniques covered in the guides above.

Typesetting a community school homepage: In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.