企业官网建设流程全解析

目录

一、行高（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);