py系统学习笔记：第七阶段：网页编程基础：第二章：CSS3：23.文本、表格属性

m0_73365527

已于 2022-09-19 13:14:40 修改

阅读量196

点赞数

分类专栏： py系统学习笔记：第七阶段：网页编程基础文章标签： css3 前端 css html html5

于 2022-09-17 21:59:15 首次发布

本文链接：https://blog.csdn.net/m0_73365527/article/details/126906344

版权

文本属性

设置文本对齐方式

案例搭建：调整p标签中内容为“你好，前端人！”的文本对齐方式

代码：左、右、中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            text-align: left;
        }
        .p2 {
            text-align: right;
        }
        .p3 {
            text-align: center;
        }
        </style>
</head>
<body>
    <p class="p1">你好，前端人！</p>
    <p class="p2">你好，前端人！</p>
    <p class="p3">你好，前端人！</p>
</body>

</html>

效果：

设置文本的修饰方式

案例搭建：调整p标签中内容为“你好，前端人！”的文本修饰方式

代码：下划线、上划线、删除线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            text-decoration: underline;
        }
        .p2 {
            text-decoration: overline;
        }
        .p3 {
            text-decoration: line-through;
        }
        </style>
</head>
<body>
    <p class="p1">你好，前端人！</p>
    <p class="p2">你好，前端人！</p>
    <p class="p3">你好，前端人！</p>
</body>

</html>

效果：

设置文本大小写

案例搭建：调整p标签中内容为“hello wEB”的文本大小写

代码：每个单词开头大写，全部大写，全部小写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            text-transform: capitalize;
        }
        .p2 {
            text-transform: uppercase;
        }
        .p3 {
            text-transform: lowercase;
        }
        </style>
</head>
<body>
    <p class="p1">hello wEB</p>
    <p class="p2">hello wEB</p>
    <p class="p3">hello wEB</p>
</body>

</html>

效果：

设置文本的首行缩进
- 案例搭建：调整p标签中内容为““1. 人生最痛苦的是梦醒了无路可以走。做梦的人是幸福的；倘没有看出可走的路，最要紧的是不要去惊醒他。《娜拉走后怎样》一九二三年2. 我们目下的当务之急，是：一要生存，二要温饱，三要发展。苟有阻碍这前途者，无论是古是今，是人是鬼，是《三填五典》，百宋千元，天球河图，金人玉佛，祖传丸散，秘制膏丹，全都踏倒他。《忽然想到》一九二五年””的首行缩进。
  - 代码：30px表示对首行缩进两个字符的设定
    - ```
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8
```