详解CSS3中常用的样式【基本文本和字体样式】

下面我就来详细讲解 CSS3 中常用的样式基本文本和字体样式，包括字体、文本颜色、文本阴影、文字格式化、文本间距等。

字体

CSS3 中定义字体的方式有多种，其中最常见的为 font-family 属性，它用于指定元素的字体系列。常见的字体系列有 Serif、Sans-Serif、Monospace 等，如果想自定义字体系列，可以使用 @font-face 属性。

/* 指定元素的字体系列 */
font-family: Arial, Helvetica, sans-serif;

/* 定义自定义字体系列 */
@font-face {
  font-family: myFont;
  src: url('font.ttf');
}

文本颜色

在 CSS3 中，我们可以使用 color 属性来定义元素的文本颜色。颜色可以使用十六进制、RGB、RGBA、HSL、HSLA 等格式表示。

/* 定义元素的文本颜色 */
color: #000000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

文本阴影

在 CSS3 中，我们可以使用 text-shadow 属性来为元素的文本添加阴影效果。该属性接受四个值，分别为水平偏移量、垂直偏移量、模糊半径和颜色。

/* 为元素的文本添加阴影效果 */
text-shadow: 2px 2px 2px #000000;

文字格式化

在 CSS3 中，我们可以使用一系列的文本格式化属性来控制元素的文本样式，比如加粗、斜体、下划线、删除线等，这些属性包括：

• font-weight：指定字体的粗细程度，常用值有 bold、normal 等。
• font-style：指定字体的风格，常用值有 italic、oblique 等。
• text-decoration：指定文本的修饰效果，常用值有 underline、overline、line-through 等。
• text-transform：指定文本的大小写转换规则，常用值有 uppercase、lowercase、capitalize 等。

/* 指定文字为加粗和斜体样式 */
font-weight: bold;
font-style: italic;

/* 指定文本有下划线和删除线效果 */
text-decoration: underline line-through;

/* 指定文本为大写转化 */
text-transform: uppercase;

文本间距

在 CSS3 中，我们可以使用 letter-spacing 和 word-spacing 属性来控制字母和单词之间的间隔距离。这些属性的值可以使用负值来将字母和单词之间的间隔缩小。

/* 为元素的文本添加字母和单词之间的间隔 */
letter-spacing: 2px;
word-spacing: 10px;

以上就是 CSS3 中常用的文本和字体样式的完整攻略。需要注意的是，在应用这些样式时，我们应该根据需要谨慎使用，避免过度设计或过度使用效果对用户体验造成不必要的干扰。