HTML+CSS基础：CSS2常用文本属性详解

一、文本修饰属性（text-decoration）

1.1 基本语法与取值

text-decoration属性用于设置文本的装饰效果，是CSS中最常用的文本样式属性之一。其基本语法如下：

selector {
    text-decoration: value;
}

常用取值：

• none：无装饰（默认值）
• underline：下划线
• overline：上划线
• line-through：删除线
• blink：闪烁效果（已废弃，不建议使用）

1.2 实际应用示例

去除链接下划线：

a {
    text-decoration: none;
}

添加删除线：

.del {
    text-decoration: line-through;
    color: #999;
}

组合使用：

.special {
    text-decoration: underline overline;
    color: #ff6600;
}

1.3 注意事项

1. 继承性：text-decoration属性具有继承性，子元素会继承父元素的文本装饰效果
2. 复合写法：可以同时设置多个值，用空格分隔
3. 兼容性：blink值在大多数现代浏览器中已不再支持，应避免使用

二、文本缩进属性（text-indent）

2.1 基本语法与取值

text-indent属性用于设置文本块中首行文本的缩进。其基本语法如下：

selector {
    text-indent: length | percentage;
}

取值说明：

• length：固定长度值，如px、em、rem等
• percentage：相对于父元素宽度的百分比

2.2 实际应用示例

使用固定值缩进：

p {
    text-indent: 2em;
    /* 首行缩进2个字符 */
}

使用百分比缩进：

.article {
    text-indent: 10%;
    /* 首行缩进父元素宽度的10% */
}

负值缩进：

.hanging-indent {
    text-indent: -2em;
    padding-left: 2em;
    /* 悬挂缩进效果 */
}

2.3 注意事项

1. 继承性：text-indent属性具有继承性
2. 块级元素：只对块级元素有效，对行内元素无效
3. 负值使用：负值缩进时，需配合padding-left使用，避免文本超出容器
4. 首行规则：只影响首行文本，后续行不受影响

三、文本水平对齐属性（text-align）

3.1 基本语法与取值

text-align属性用于设置文本在水平方向上的对齐方式。其基本语法如下：

selector {
    text-align: left | right | center | justify;
}

取值说明：

• left：左对齐（默认值）
• right：右对齐
• center：居中对齐
• justify：两端对齐

3.2 实际应用示例

居中对齐：

.title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

右对齐：

.date {
    text-align: right;
    color: #666;
}

两端对齐：

.content {
    text-align: justify;
    line-height: 1.6;
}

3.3 注意事项

1. 继承性：text-align属性具有继承性
2. 块级元素：只对块级元素有效，对行内元素无效
3. justify效果：两端对齐在英文文本中效果较好，中文文本中可能产生不均匀的字间距
4. 最后一行：justify对齐时，最后一行通常不会两端对齐

四、细说font-size属性

4.1 基本语法与取值

font-size属性用于设置文本的字体大小。其基本语法如下：

selector {
    font-size: length | percentage | keyword;
}

常用取值类型：

绝对长度单位：

• px：像素（最常用）
• pt：点（1pt = 1/72英寸）
• cm、mm、in：物理单位

相对长度单位：

• em：相对于当前元素的字体大小
• rem：相对于根元素（html）的字体大小
• %：相对于父元素的字体大小

关键字：

• small、medium、large、x-large等
• smaller、larger：相对于父元素

4.2 实际应用示例

使用像素单位：

body {
    font-size: 16px;
}

h1 {
    font-size: 32px;
}

p {
    font-size: 14px;
}

使用相对单位：

html {
    font-size: 16px;
}

.container {
    font-size: 1.2rem; /* 19.2px */
}

.text {
    font-size: 0.875em; /* 相对于父元素 */
}

使用关键字：

.small-text {
    font-size: small;
}

.large-text {
    font-size: large;
}

4.3 注意事项

1. 继承性：font-size属性具有继承性
2. 相对单位：使用em和rem可以实现响应式布局
3. 浏览器默认值：大多数浏览器默认字体大小为16px
4. 可访问性：避免使用过小的字体（建议不小于12px）
5. 移动端适配：在移动端使用相对单位更佳

五、行高属性（line-height）及注意事项

5.1 基本语法与取值

line-height属性用于设置行与行之间的高度（行高）。其基本语法如下：

selector {
    line-height: normal | number | length | percentage;
}

取值说明：

• normal：默认值，由浏览器决定（通常为1.2）
• number：数字，表示当前字体大小的倍数（推荐）
• length：固定长度值，如px、em等
• percentage：相对于当前字体大小的百分比

5.2 实际应用示例

使用数字值：

p {
    font-size: 16px;
    line-height: 1.5; /* 24px */
}

使用固定长度：

.content {
    font-size: 14px;
    line-height: 21px;
}

使用百分比：

.text {
    font-size: 16px;
    line-height: 150%; /* 24px */
}

5.3 行高的计算方式

行高的构成：

行高 = 内容区域高度 + 上间距 + 下间距

内容区域高度：由字体大小和字体本身决定

上间距和下间距：行高减去内容区域高度后，平均分配到上下

5.4 注意事项

1. 继承性：line-height属性具有继承性
2. 推荐使用数字值：数字值不会继承计算后的像素值，而是继承倍数，更灵活
3. 单行文本垂直居中：设置line-height等于容器高度可实现单行文本垂直居中
4. 多行文本：对于多行文本，行高过小会导致文字重叠，过大则显得松散
5. 最佳实践：正文行高通常设置为1.5-1.8倍字体大小

六、文本垂直对齐属性（vertical-align）

6.1 基本语法与取值

vertical-align属性用于设置行内元素或表格单元格内容的垂直对齐方式。其基本语法如下：

selector {
    vertical-align: baseline | top | middle | bottom | length | percentage;
}

常用取值：

• baseline：默认值，与父元素的基线对齐
• top：与行内最高元素的顶端对齐
• middle：与父元素的中线对齐
• bottom：与行内最低元素的底端对齐
• text-top：与父元素的文本顶端对齐
• text-bottom：与父元素的文本底端对齐
• sub：下标
• super：上标
• length：固定长度值
• percentage：相对于当前行高的百分比

6.2 实际应用示例

图片与文字对齐：

img {
    vertical-align: middle;
}

上标和下标：

.sup {
    vertical-align: super;
    font-size: 0.8em;
}

.sub {
    vertical-align: sub;
    font-size: 0.8em;
}

自定义偏移：

.icon {
    vertical-align: 2px;
}

6.3 注意事项

1. 适用范围：只对行内元素和表格单元格有效，对块级元素无效
2. 继承性：不具有继承性
3. 基线对齐：不同字体的基线位置可能不同，可能导致对齐不一致
4. 表格单元格：在表格中，vertical-align用于控制单元格内容的垂直对齐
5. 常见问题：图片底部留白问题通常可以通过设置vertical-align: middle或bottom解决

七、综合应用实例

7.1 文章排版样式

/* 基础样式 */
body {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* 标题样式 */
h1 {
    font-size: 2em;
    text-align: center;
    margin: 1em 0;
    font-weight: bold;
}

h2 {
    font-size: 1.5em;
    margin: 1.5em 0 0.5em;
    font-weight: bold;
}

/* 段落样式 */
p {
    text-indent: 2em;
    margin: 0.5em 0;
}

/* 引用样式 */
blockquote {
    border-left: 4px solid #ddd;
    padding-left: 1em;
    margin: 1em 0;
    color: #666;
    font-style: italic;
}

/* 代码样式 */
code {
    font-family: Consolas, Monaco, monospace;
    background-color: #f5f5f5;
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

/* 链接样式 */
a {
    color: #06c;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

7.2 响应式文本样式

/* 基础设置 */
html {
    font-size: 16px;
}

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* 响应式字体大小 */
h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* 移动端适配 */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
}

/* 小屏幕适配 */
@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

7.3 表单元素文本样式

/* 表单标签 */
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 0.875rem;
}

/* 输入框 */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.5;
}

/* 按钮 */
button {
    padding: 0.5rem 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* 错误提示 */
.error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

八、常见问题与解决方案

8.1 文本溢出处理

单行文本溢出显示省略号：

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行文本溢出显示省略号：

.multi-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

8.2 中文排版优化

中英文混排：

.text {
    word-break: break-all;
    word-wrap: break-word;
}

首字下沉：

.drop-cap::first-letter {
    float: left;
    font-size: 3em;
    line-height: 1;
    margin-right: 0.1em;
}

8.3 字体抗锯齿优化

.text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

8.4 文本选择样式

::selection {
    background-color: #007bff;
    color: white;
}

::-moz-selection {
    background-color: #007bff;
    color: white;
}

九、性能优化建议

9.1 字体加载优化

使用系统字体：

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

字体文件压缩：使用woff2格式，体积更小，加载更快

字体加载策略：

@font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
    font-display: swap; /* 使用系统字体先显示，字体加载后替换 */
}

9.2 避免使用过多字体

建议一个页面使用不超过3种字体，过多的字体会影响页面加载速度和渲染性能。

9.3 使用CSS变量

:root {
    --font-size-base: 16px;
    --line-height-base: 1.6;
    --font-family-base: "Helvetica Neue", Arial, sans-serif;
}

body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-family: var(--font-family-base);
}

十、总结

CSS2的文本属性是前端开发的基础，掌握这些属性的正确使用方法对于创建美观、易读的网页至关重要。在实际开发中，建议：

1. 使用相对单位：em、rem、%等相对单位更利于响应式布局
2. 合理设置行高：正文行高建议1.5-1.8倍，提升阅读体验
3. 注意继承性：了解各属性的继承特性，避免样式冲突
4. 性能优化：合理使用字体，优化加载速度
5. 可访问性：确保文本大小、颜色对比度符合可访问性标准

通过系统学习和实践，这些文本属性将成为你前端开发工具箱中的强大武器，帮助你创建出更加专业和用户友好的网页界面。