文本样式的介绍--text-indent、text-align、text-decoration

最新推荐文章于 2023-10-25 21:55:23 发布

Q _Q

最新推荐文章于 2023-10-25 21:55:23 发布

阅读量1.4k

点赞数 1

分类专栏： CSS3 文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_54021642/article/details/124481775

版权

CSS3 专栏收录该内容

42 篇文章 5 订阅

订阅专栏

文本样式的介绍-text

1 文本缩进

属性名：text-indent

取值：

1 数字+px

2 数字+em (推荐：1em=当前标签的font-size大小)

例题：

<!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>
        p {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>掘金资讯新的运营活动已经上线一周了，活动上线之后得到了资讯创作者们的积极参与，但是在运营过程中，我们也发现大家对于这个活动的一些细节还存有疑问。因此，特地撰写了这篇指南，希望能够解决大家的疑惑。</p>
</body>

</html>

效果图：

2 文本水平对齐方式

属性名：text-align

取值：

left 左对齐

center 居中对齐

right 右对齐

水平居中方法总结text-align

text-align能让以下元素水平居中

1 文本

2 span标签 a标签

3 input标签 img标签

注意：

让以上元素水平居中时，text-align在其父标签设置

拓展

margin:0 auto 能让 (大盒子标签) div p h 标签水平居中

注意：

1 让 div p h 标签水平居中，margin:0 auto 直接在当前标签设置即可

2 margin:0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，会默认占满父标签的宽度

注意：

如果需要让文本水平居中，text-align 属性给文本的父标签（即所在标签）设置

例题：

<!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>
        .left {
            text-align: left;
        }
        
        .center {
            text-align: center;
        }
        
        .right {
            text-align: right;
        }
    </style>
</head>

<body>
    <div class="left"><img src="咒术回战.jpg" alt="咒术回战" width="300"></div>
    <div class="center"><img src="咒术回战.jpg" alt="咒术回战" width="300"></div>
    <div class="right"><img src="咒术回战.jpg" alt="咒术回战" width="300"></div>
</body>

</html>

效果图：

3 文本修饰

属性名：text-decoration

取值：

underline 下划线(常用)

line-through 删除线(不常用)

overline 上划线(几乎不用)

none 无修饰(常用)

注意：

开发中会使用text-decoration,清除a标签默认的下划线

例题：

<!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>
        .underline {
            text-decoration: underline;
        }
        
        .line-through {
            text-decoration: line-through;
        }
        
        .overline {
            text-decoration: overline;
        }
        
        .none {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <p class="underline">下划线</p>
    <p class="line-through">删除线</p>
    <p class="overline">上划线</p>
    <a href="https://www.baidu.com/" class="none">百度一下，你就知道</a>
</body>

</html>

效果图：