css属性小结之文本

最新推荐文章于 2023-12-05 09:32:36 发布

懒懒l

最新推荐文章于 2023-12-05 09:32:36 发布

阅读量380

点赞数 1

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/ldcrle/article/details/115837359

版权

前端学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

css属性小结之文本

（1）用text-decoration设置文本修饰线

要对文本增加一些装饰性的效果，可以使用元素的text-decoration属性，该属性的值有：underline、 overline、line-through 、none；分别对应：下划线、上划线、删除线和去除装饰。

演示效果

(a).设置文本下划线：

<p style=" text-decoration:underline">使用text-decoration设置文本下划线演示效果</p>

对应效果：

(b).设置文本上划线：

<p style=" text-decoration:overline">使用text-decoration设置文本上划线演示效果</p>

对应效果：

©.设置文本删除线：

<p style=" text-decoration:line-through">使用text-decoration设置删除线演示效果</p>

对应效果：

(d).取消文本装饰：

<a  href="#" style=" text-decoration:none">取消文本装饰演示效果</p>

对应效果：
在这里插入图片描述

注：演示为使用“text-decoration:none”去除了超链接的默认下划线；字体颜色仍然为默认蓝色，若修改此字体颜色则需使用 " color "属性；详细说明见另一篇博客：css属性之字体

（2）text-align 设置文本对齐方式（水平）

text-align属性用来设置文本在水平方向*的对齐方式，属性的值分别为：“left”,“center”,“right”,“justify”

<!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>css属性之文本演示</title>
   <style type="text/css">
       body {
          border: 1px solid orange;
           width: 400px;
       }
       #text1 {
           text-align: center;
       }

       #text2 {
           text-align: left;
       }

       #text3 {
           text-align: right;
       }

       #text4 {
           width: 100px;
           text-align: justify;
       }
   </style>
</head>
<body>
<div id="text1">文本居中对齐 </div>
<div id="text2">文本左对齐（默认效果） </div>
<div id="text3">文本右对齐 </div>
<div id="text4">There are moments in life when you miss someone so much that you just want </div>
<div id="text4">当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度(中文无效果）</div>
</body>

</html>

(3)text-indent 属性设置段落首行缩进

text-indent 属性用于指定段落第一行的缩进**,属性的数值单位一般使用px或em，em 表示字体的高度**，对中文来说，文字的宽度和高度相同，即首行缩进两个字符：

<!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>css属性之文本演示</title>
    <style type="text/css">
        body {
           border: 1px solid orange;
            width: 400px;
        }

        #text1 {
           text-indent: 2em;
        }

        #text2 {
           text-indent: 18px;
        }
        
    </style>
</head>

<body>
    <p> text-indent: 2em效果演示：</p>
    <div id="text1">      
        人之初，性本善。性相近，习相远。
        苟不教，性乃迁。教之道，贵以专。
        昔孟母，择邻处。子不学，断机杼。
        窦燕山，有义方。教五子，名俱扬。
        养不教，父之过。教不严，师之惰。
        子不学，非所宜。幼不学，老何为。
        玉不琢，不成器。人不学，不知义。
        为人子，方少时。亲师友，习礼仪。
        香九龄，能温席。孝于亲，所当执。</div>
        <hr>
        <p> text-indent: 18px 效果演示：</p>
        <div id="text2">
            人之初，性本善。性相近，习相远。
            苟不教，性乃迁。教之道，贵以专。
            昔孟母，择邻处。子不学，断机杼。
            窦燕山，有义方。教五子，名俱扬。
            养不教，父之过。教不严，师之惰。
            子不学，非所宜。幼不学，老何为。
            玉不琢，不成器。人不学，不知义。
            为人子，方少时。亲师友，习礼仪。
            香九龄，能温席。孝于亲，所当执。</div>
</body>

</html>

在这里插入图片描述

（4）line-height属性设置文本行高

line-height属性用来指定文本行与行之间的间距，即设置文本的行高，属性的值一般有两种方式：px或倍数。注:倍数是当前文本的font-size为基准放缩。

html
<!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>css属性之文本演示</title>
    <style type="text/css">
        body {
           border: 1px solid orange;
            width: 400px;
        }

        #text1 {
            line-height: 2;
        }

        #text2 {
           line-height: 18px;
        }
        
    </style>
</head>

<body>
    
    <div id="text1">
        line-height: 2;效果演示：<br>
        人之初，性本善。性相近，习相远。
        苟不教，性乃迁。教之道，贵以专。
        昔孟母，择邻处。子不学，断机杼。
        窦燕山，有义方。教五子，名俱扬。
        养不教，父之过。教不严，师之惰。
        子不学，非所宜。幼不学，老何为。
        玉不琢，不成器。人不学，不知义。
        为人子，方少时。亲师友，习礼仪。
        香九龄，能温席。孝于亲，所当执。</div>
        <hr>
        <div id="text2">
            line-height: 18px 效果演示：<br>
            人之初，性本善。性相近，习相远。
            苟不教，性乃迁。教之道，贵以专。
            昔孟母，择邻处。子不学，断机杼。
            窦燕山，有义方。教五子，名俱扬。
            养不教，父之过。教不严，师之惰。
            子不学，非所宜。幼不学，老何为。
            玉不琢，不成器。人不学，不知义。
            为人子，方少时。亲师友，习礼仪。
            香九龄，能温席。孝于亲，所当执。</div>
</body>

</html>

在这里插入图片描述

懒懒l

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
css属性小结之文本

css属性小结之文本（1）用text-decoration设置文本修饰线要对文本增加一些装饰性的效果，可以使用元素的text-decoration属性，该属性的值有：underline、 overline、line-through 、none；分别对应：下划线、上划线、删除线和去除装饰。演示效果(a).设置文本下划线：<p style=" text-decoration:underline">使用text-decoration设置文本下划线演示效果</p>对应效果：
复制链接

扫一扫