CSS 文本样式学习笔记

发布于:2025-04-15 ⋅ 阅读:(38) ⋅ 点赞:(0)

CSS 提供了丰富的文本样式属性,用于控制文本的颜色、对齐方式、修饰、转换、缩进等。以下是关于 CSS 文本样式的详细学习笔记。

一、文本颜色

CSS 的 color 属性用于设置文本的颜色。颜色可以通过以下几种方式指定:

  • 十六进制值:如 #FF0000(红色)。

  • RGB 值:如 rgb(255, 0, 0)(红色)。

  • 颜色名称:如 red

示例

css

复制

body {
    color: red; /* 设置页面文本为红色 */
}

h1 {
    color: #00ff00; /* 设置标题为绿色 */
}

h2 {
    color: rgb(255, 0, 0); /* 设置副标题为红色 */
}

注意:根据 W3C 标准,如果定义了颜色属性,还必须定义背景色属性。

二、文本对齐方式

text-align 属性用于设置文本的水平对齐方式,可选值包括:

  • left:左对齐(默认值)。

  • right:右对齐。

  • center:居中对齐。

  • justify:两端对齐(类似杂志和报纸的排版)。

示例

css

复制

h1 {
    text-align: center; /* 标题居中对齐 */
}

p.date {
    text-align: right; /* 日期右对齐 */
}

p.main {
    text-align: justify; /* 段落两端对齐 */
}

三、文本修饰

text-decoration 属性用于设置或删除文本的装饰,常见的值包括:

  • none:无装饰(常用于去除链接的下划线)。

  • underline:下划线。

  • overline:上划线。

  • line-through:删除线。

示例

css

复制

a {
    text-decoration: none; /* 去除链接的下划线 */
}

h1 {
    text-decoration: overline; /* 添加上划线 */
}

h2 {
    text-decoration: line-through; /* 添加删除线 */
}

h3 {
    text-decoration: underline; /* 添加下划线 */
}

注意:不建议对非链接文本添加下划线,以免混淆用户。

四、文本转换

text-transform 属性用于控制文本的大小写转换,可选值包括:

  • none:默认值,不进行转换。

  • capitalize:每个单词的首字母大写。

  • uppercase:所有字母大写。

  • lowercase:所有字母小写。

示例

css

复制

p.uppercase {
    text-transform: uppercase; /* 将文本转换为大写 */
}

p.lowercase {
    text-transform: lowercase; /* 将文本转换为小写 */
}

p.capitalize {
    text-transform: capitalize; /* 将每个单词的首字母大写 */
}

五、文本缩进

text-indent 属性用于设置文本的第一行缩进。通常用于段落的首行缩进。

示例

css

复制

p {
    text-indent: 2em; /* 段落首行缩进两个字符宽度 */
}

六、其他文本样式属性

1. 字符间距(letter-spacing

用于设置字符之间的间距。

css

复制

p {
    letter-spacing: 2px; /* 字符间距为 2 像素 */
}

2. 行高(line-height

用于设置行与行之间的间距。

css

复制

p {
    line-height: 1.5; /* 行高为字体大小的 1.5 倍 */
}

3. 文本阴影(text-shadow

用于为文本添加阴影效果。

css

复制

h1 {
    text-shadow: 2px 2px 4px #000000; /* 水平偏移、垂直偏移、模糊半径、颜色 */
}

4. 单词间距(word-spacing

用于设置单词之间的间距。

css

复制

p {
    word-spacing: 5px; /* 单词间距为 5 像素 */
}

5. 文本方向(direction

用于设置文本的方向。

css

复制

p {
    direction: rtl; /* 从右到左 */
}

6. 空白处理(white-space

用于设置元素中空白的处理方式。

css

复制

p {
    white-space: nowrap; /* 防止文本换行 */
}

7. 垂直对齐(vertical-align

用于设置元素的垂直对齐方式。

css

复制

img {
    vertical-align: middle; /* 图像垂直居中对齐 */
}

网站公告

今日签到

点亮在社区的每一天
去签到