【Web前端学习笔记】-CSS3-文本属性(text)

目录

1. 学习内容概述

2.  文本属性知识点

2.1. 水平对齐方式   text-align

2.2. 修饰   text-decoration

2.3. 大小写   text-transform

2.4. 首行缩进   text-indent

---

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>

•  修饰效果演示：