CSS 文本样式与阴影整理笔记
目录
一、行高（line-height）
二、文本样式属性
1.text-transform - 大小写转换
2.text-decoration - 文本修饰线
3.letter-spacing - 字符间距
4.word-spacing - 单词间距
5.text-align - 文本对齐
6.text-indent - 首行缩进
7.white-space - 空白处理
8.text-overflow - 文本溢出
9.vertical-align - 垂直对齐
10.text-shadow - 文字阴影
11.box-shadow - 盒子阴影
一、行高（line-height）
定义：文字实际占据的高度由上间距、文字大小和下间距组成。
作用：
- 当元素高度（height）与行高（line-height）相同时，可实现单行文本垂直居中
- 控制多行文本的行间距
取值方式：
- 固定值（如：
line-height: 30px;） - 数值倍数（如：
line-height: 1.5;，表示字体大小的1.5倍） - 通过
font简写属性设置（如：font: italic bold 20px/1.5 serif;）
二、文本样式属性
1.text-transform - 大小写转换
控制英文字母大小写显示：
none：默认显示capitalize：单词首字母大写uppercase：全大写lowercase：全小写
2.text-decoration - 文本修饰线
添加文本装饰效果：
none：无修饰（默认）underline：下划线overline：上划线line-through：删除线
常用于去除链接下划线：
a { text-decoration: none; }3.letter-spacing - 字符间距
控制字符间距：
letter-spacing: 3px;4.word-spacing - 单词间距
以空格为单位设置单词间距：
word-spacing: 20px;5.text-align - 文本对齐
控制水平对齐方式：
left：左对齐（默认）right：右对齐center：居中对齐
注意：仅对块级元素或设置了宽度的元素有效
6.text-indent - 首行缩进
设置段落首行缩进：
text-indent: 2em; /* 缩进两个字符宽度 */技巧：设置较大负值可隐藏文本
7.white-space - 空白处理
控制空白和换行处理：
normal：自动换行（默认）nowrap：禁止换行pre：保留空格和换行（类似<pre>标签效果）
8.text-overflow - 文本溢出
控制文本溢出显示方式：
/* 单行文本省略号效果 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px;9.vertical-align - 垂直对齐
设置行内/行内块元素的垂直对齐：
baseline：基线对齐（默认）top：顶端对齐middle：居中对齐bottom：底端对齐
常见问题：解决图片下方3px空白
- 原因：图片默认行内块元素，与文字基线对齐
- 解决方法：
/* 方法1 */ img { vertical-align: middle; } /* 方法2 */ img { display: block; } /* 方法3 */ .parent { font-size: 0; } /* 方法4 */ img { float: left; }
10.text-shadow - 文字阴影
语法：
text-shadow: h-shadow v-shadow [blur] [color];参数：
h-shadow：水平偏移（必需）v-shadow：垂直偏移（必需）blur：模糊半径（可选）color：阴影颜色（可选）
示例：
text-shadow: 5px 5px 10px gray;11.box-shadow - 盒子阴影
语法：
box-shadow: h-shadow v-shadow [blur] [color];示例：
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);