CSS Text(文本)学习笔记

CSS的Text属性是用来设置文本格式的，包括字体、大小、颜色、对齐方式、行高等等。让我们来看一些常用的文本属性。

字体属性

font-size

font-size属性用来设置文本的字号大小。它可以使用绝对单位（如px、pt）或相对单位（如em、rem）。例如：

cssCopy Code
h1 {
  font-size: 36px;
}
p {
  font-size: 1.2em;
}

font-family

font-family属性用来设置文本的字体。它接受多个字体名，如果第一个字体不可用，则使用下一个，直到找到可用的字体。例如：

cssCopy Code
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

font-weight

font-weight属性用来设置文本的粗细程度。它可以取值为normal、bold、bolder、lighter或数字。例如：

cssCopy Code
h1 {
  font-weight: bold;
}
p {
  font-weight: 300;
}

颜色属性

color

color属性用来设置文本的颜色。它可以使用关键字、十六进制、RGB值等方式表示。例如：

cssCopy Code
h1 {
  color: red;
}
p {
  color: #333;
}

对齐属性

text-align

text-align属性用来设置文本的对齐方式。它可以取值为left、center、right或justify。例如：

cssCopy Code
h1 {
  text-align: center;
}
p {
  text-align: justify;
}

行高属性

line-height

line-height属性用来设置行高。它可以使用绝对单位或相对单位表示。例如：

cssCopy Code
p {
  line-height: 1.5;
}

这里的1.5指的是当前字体大小的1.5倍。

示例

下面是一个例子，展示如何使用上述属性来设置文本格式：

cssCopy Code
h1 {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  color: #333;
}

p {
  font-size: 1.2em;
  line-height: 1.5;
  text-align: justify;
  color: #666;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

在这个例子中，h1标签的文本会以36px的粗细显示，并且居中对齐。p标签的文本会以当前字号的1.2倍显示，并且每行之间有1.5倍行高的空间。链接的文本颜色为蓝色，鼠标悬停时会有下划线。