目录
1. 学习内容概述
- 学习了CSS3中有关文本属性的四大知识点,包括:
- 水平对齐方式 text-align
- 修饰 text-decoration (如下划线等)
- 大小写 text-transform
- 首行缩进 text-indent
2. 文本属性知识点
2.1. 水平对齐方式 text-align
类似word中的水平对齐方式,CSS中的text-align属性参数主要有三种:
属性参数 | 对应效果 |
---|---|
left | 左对齐 |
center | 居中 |
right | 右对齐 |
- 示例代码:
<style>
p{text-align: left;} <!-- 左对齐 -->
p{text-align: center;} <!-- 居中 -->
p{text-align: right;} <!-- 右对齐 -->
</style>
- 水平对齐效果演示:
2.2. 修饰 text-decoration
类似word中的文本修饰,CSS中的text-decoration属性参数主要有四种:
属性参数 | 对应效果 |
---|---|
none | 默认,无装饰 |
underline | 下划线 |
line-through | 删除线 |
overline | 上划线 |
- 示例代码:
<style>
p{text-decoration: none;} <!-- 无修饰 -->
p{text-decoration: underline;} <!-- 下划线 -->
p{text-decoration: line-through;} <!-- 删除线 -->
p{text-decoration: overline;} <!-- 上划线 -->
</style>
- 修饰效果演示:
2.3. 大小写 text-transform
CSS中的text-transform属性参数主要有四种:
- 示例代码:
<style>
p{text-transform: none;} <!-- 默认,原文显示 -->
p{text-transform: capitalize;} <!-- 首字母大写 -->
p{text-transform: uppercase;} <!-- 全部字母大写 -->
p{text-transform: lowercase;} <!-- 全部字母小写 -->
</style>
- 修饰效果演示:
显示原文为:learning cSS
2.4. 首行缩进 text-indent
- 示例代码
<style>
p{text-indent: none;} <!-- 默认,不缩进 -->
p{text-indent: 50px;} <!-- 首行缩进50像素 -->
</style>
- 修饰效果演示: