目录
一、CSS字体样式
1. 字体类型（font-family）
2. 字体大小（font-size）
3. 字体粗细（font-weight）
4. 字体风格（font-style）
5. 字体颜色（color）
6. 字体简写属性（font）
7. 综合示例
二、CSS文本样式
1. 文本颜色（color）
2. 文本对齐（text-align）
3. 文本装饰（text-decoration）
4. 文本缩进（text-indent）
5. 文本转换（text-transform）
6. 文本阴影（text-shadow）
7. 行间距（line-height）
8. 字符间距（letter-spacing）
9. 单词间距（word-spacing）
10. 综合示例
一、CSS字体样式
CSS中的字体样式用于定义文本的外观，包括字体类型、大小、粗细、风格和颜色等。
1. 字体类型（font-family）
font-family属性用于定义字体类型，可以指定多个字体，浏览器会按顺序查找并使用第一个可用的字体。若所有指定的字体都不可用，则使用浏览器默认字体。
语法：
font-family: "字体1", "字体2", "字体3", ...;示例：
body {
font-family: "微软雅黑", "Arial Black", sans-serif;
}在本例中，如果用户的系统中安装了"微软雅黑"，则使用该字体；如果没有，则尝试使用Arial Black；如果都没有，则使用默认的sans-serif字体。
2. 字体大小（font-size）
font-size属性用于定义字体大小，常用的单位有px（像素）、em（相对于父元素的字体大小）、rem（相对于根元素的字体大小）等，可以使用关键字（如small、medium、large）或具体的数值（如10px、16px、20px）。
语法：
font-size: 数值 | inherit | medium | large | larger | x-large | xx-large | small | smaller | x-small | xx-small;示例：
h1 {
font-size: 2em; /* 使用em单位，相对于父元素的字体大小 */
}
p {
font-size: 16px; /* 使用像素单位 */
}3. 字体粗细（font-weight）
font-weight属性用于定义字体的粗细，取值范围为100~900，也可以使用关键字（如normal、lighter、bold、bolder）。
语法：
font-weight: 100-900 | bold | bolder | lighter | normal;示例：
strong {
font-weight: bold; /* 使用关键字 */
}
span {
font-weight: 700; /* 使用数字 */
}4. 字体风格（font-style）
font-style属性用于定义字体的风格，取值包括normal（正常）、italic（斜体）、oblique（斜体）。
语法：
font-style: normal | italic | oblique;示例：
span {
font-style: italic;
}5. 字体颜色（color）
color属性用于定义字体的颜色，可以使用关键字（如red）、16进制RGB值（如#03FCA1）、RGB值（如rgb(3, 252, 161)）、RGBA值（如rgba(3, 252, 161, 0.8)）、HSL值（如hsl(120, 100%, 50%)）或HSLA值（如hsla(120, 100%, 50%, 0.8)）等。
语法：
color: 数值;示例：
a {
color: #FF0000;
}6. 字体简写属性（font）
font属性是一个简写属性，可以同时设置多个字体相关的属性，其顺序为：font-style font-variant font-weight font-size font-family。注意，font-size和font-family是必需的，其他属性可以省略。
语法：
font: font-style font-variant font-weight font-size font-family;示例：
p {
font: italic small-caps bold 16px/1.5 "Helvetica Neue", Arial, sans-serif;
/* 等同于分别设置这些属性 */
}7. 综合示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS字体样式</title>
<style>
body {
font-family: "微软雅黑", "Arial Black", sans-serif;
font-size: 16px;
color: #333;
}
h1 {
font-size: 25px;
font-weight: bold;
color: blue;
}
p {
font-style: italic;
}
a {
color: #FF0000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>CSS字体样式详解</h1>
<p>这是一个使用了斜体样式的段落。</p>
<p>This is a paragraph that uses an italicized style.</p>
<a href="#">这是一个链接</a>
</body>
</html>
二、CSS文本样式
CSS的文本样式主要关注文本的布局、装饰和视觉效果。
1. 文本颜色（color）
设置文本的颜色，与字体样式中的语法相同。
a {
color: #333; /* 使用十六进制颜色 */
}
p {
color: rgba(0, 0, 0, 0.5); /* 使用RGBA颜色，包含透明度 */
}2. 文本对齐（text-align）
设置文本的对齐方式，常用的有left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）等。
div {
text-align: center; /* 居中对齐 */
}3. 文本装饰（text-decoration）
设置文本的装饰效果，如下划线、上划线、贯穿线等，常用值有none（无装饰）、underline（下划线）、overline（上划线）、line-through（贯穿线）等。
a {
text-decoration: none; /* 取消下划线 */
}
del {
text-decoration: line-through; /* 删除线 */
}4. 文本缩进（text-indent）
设置文本的首行缩进，可以使用长度单位或百分比。
p {
text-indent: 2em; /* 首行缩进2个字符宽度 */
}5. 文本转换（text-transform）
控制文本的大小写转换，常用的值有none（无转换）、capitalize（每个单词的首字母大写）、uppercase（全部大写）、lowercase（全部小写）等。
p {
text-transform: uppercase; /* 全部大写 */
}
span {
text-transform: capitalize; /* 首字母大写 */
}6. 文本阴影（text-shadow）
为文本添加阴影效果，可以指定水平偏移、垂直偏移、模糊半径和颜色。
h1 {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 水平偏移、垂直偏移、模糊半径、颜色 */
}7. 行间距（line-height）
设置文本行之间的间距，会影响文本的可读性，可以使用数字、长度单位或百分比。
p {
line-height: 1.5; /* 使用数字，表示行高是字体大小的1.5倍 */
}8. 字符间距（letter-spacing）
设置字符之间的间距，可以使用正常的长度单位，如px、em等。
.wide-letters {
letter-spacing: 2px;
}9. 单词间距（word-spacing）
设置单词之间的间距，同样可以使用正常的长度单位。
.wide-words {
word-spacing: 1em;
}10. 综合示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本样式</title>
<style>
body {
font-family: 楷体,"Arial Black", sans-serif;
font-size: 16px;
line-height: 1.5;
}
h1 {
color: #333;
text-align: center;
text-transform: uppercase;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
p {
text-indent: 2em;
margin-bottom: 1em;
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.deleted {
text-decoration: line-through;
}
.wide-letters {
letter-spacing: 2px;
}
</style>
</head>
<body>
<h1>css文本样式详解</h1>
<p class="uppercase">This is a paragraph with UPPERCASE text.</p>
<p class="italic">This is a paragraph with <span class="deleted">deleted</span> and <span class="uppercase">uppercase</span> <span class="wide-letters">wide-letter-spaced</span> text.</p>
</body>
</html>
