CSS 入门教程(4)：文本和字体

css 评论

文本

在 CSS 中，我们可以更改许多与文本相关的属性。默认情况下，文本属性是从正文继承的。

以下是最常用的文本属性的示例：

1
2
3
4
5
6
7
8
9
10
h1 {
    color: red;
    background-color: lightsgray;
    font-size: 24px;
    font-weight: bold; /* normal, bold, 100-900 */
    font-style: italic; /* normal, italic */
    line-height: 30px;
    letter-spacing: 6px;
    text-align: center; /* center, left, right, justify */
}

color 属性用于设置文本的颜色。颜色通过以下方式指定：

1
2
3
4
5
h1 {
    color: red;
    color: #ff0000;
    color: rgb(255, 0, 0);
}

字体大小可以用不同的测量单位来表示：

1
2
3
4
5
6
h1 {
    font-size: 24px;
    font-size: 2em; /* 1em is equal to the current element font size */
    font-size: 2rem; /* 1rem is equal to the page font size */
    font-size: 110%; /* relative to container font-size */
}

如果我们想删除 href 的默认文本下划线：

1
2
3
a {
    text-decoration: none;
}

我们还可以转换文本：

1
2
3
4
5
h1 {
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: capitalize;
}

字体

CSS 中有五种通用字体系列：

  • 衬线字体在每个字母的边缘都有一条小笔划。它们营造出一种正式和优雅的感觉。
  • 无衬线字体线条干净（没有小笔划）。它们营造出现代简约的外观。
  • 等宽字体 - 这里所有字母都具有相同的固定宽度。它们营造出一种机械外观。
  • 草书字体模仿人类的笔迹。
  • 幻想字体是装饰性/俏皮的字体。

在 CSS 中，我们使用 font-family 属性来指定文本的字体。

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。从你想要的字体开始，以通用系列结束（如果没有其他字体可用，让浏览器在通用系列中选择类似的字体）。字体名称应以逗号分隔。

1
2
3
4
5
h1 {
    font-family: "Times New Roman", Times, serif;
    font-family: Arial, Helvetica, sans-serif;
    font-family: "Lucida Console", "Courier New", monospace;
}

相关文章：

WilliamWeb Full Stack developer

致力于网站建设与Web开发。喜欢新事物，关注前后端动态，对新的技术有追求， 做一个优秀的web全栈工程师。