CSS学习笔记4：文本样式

于 2022-01-13 20:20:46 发布
阅读量122 收藏
点赞数
分类专栏： Web # CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lj402159806/article/details/122481783
版权
Web 同时被 2 个专栏收录
37 篇文章 0 订阅
订阅专栏
CSS
13 篇文章 0 订阅
订阅专栏

首行缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首行缩进</title>
    <!--text-indent	首行缩进-->
    <!--text-indent值应该是font-size值的2倍-->
    <style>
        p {
            font-size: 14px;
            text-indent: 28px;
        }
    </style>
</head>
<body>
<h3>爱莲说</h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

在这里插入图片描述

水平对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平对齐</title>
    <!--text-align	水平对齐-->
    <!--left	左对齐（默认值）-->
    <!--center	居中对齐-->
    <!--right	右对齐-->
    <style>
        #p1 {
            text-align: left;
        }

        #p2 {
            text-align: center;
        }

        #p3 {
            text-align: right;
        }
    </style>
</head>
<body>
<p id="p1"><strong>左对齐</strong>:好好学习，天天向上。</p>
<p id="p2"><strong>居中对齐</strong>:好好学习，天天向上。</p>
<p id="p3"><strong>右对齐</strong>:好好学习，天天向上。</p>
</body>
</html>

在这里插入图片描述

文本修饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本修饰</title>
    <!--text-decoration	文本修饰-->
    <!--none	        无划线（默认值）-->
    <!--underline	    下划线-->
    <!--line-through	中划线-->
    <!--overline	    顶划线-->
    <style>
        #p1 {
            text-decoration: underline;
        }

        #p2 {
            text-decoration: line-through;
        }

        #p3 {
            text-decoration: overline;
        }

        a {
            /*去除超链接的下划线样式*/
            text-decoration: none;
        }
    </style>
</head>
<body>
<p id="p1">这是“下划线”效果</p>
<p id="p2">这是“删除线”效果</p>
<p id="p3">这是“顶划线”效果</p>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

在这里插入图片描述

大小写转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大小写转换</title>
    <!--text-transform  大小写转换-->
    <!--none	        无转换（默认值）-->
    <!--uppercase	    转换为大写-->
    <!--lowercase	    转换为小写-->
    <!--capitalize	    每个英文单词首字母转换为大写-->
    <style>
        #p1 {
            text-transform: uppercase;
        }

        #p2 {
            text-transform: lowercase;
        }

        #p3 {
            text-transform: capitalize;
        }

    </style>
</head>
<body>
<p id="p1">rome wasn't built in a day.</p>
<p id="p2">rome wasn't built in a day.</p>
<p id="p3">rome wasn't built in a day.</p>
</body>
</html>

在这里插入图片描述

行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行高</title>
    <!--line-height	行高-->
    <style>
        #p1 {
            line-height: 15px;
        }

        #p2 {
            line-height: 20px;
        }

        #p3 {
            line-height: 25px;
        }

    </style>
</head>
<body>
<p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<hr/>
<p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<hr/>
<p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
</body>
</html>

在这里插入图片描述

字母间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字母间距</title>
    <!--letter-spacing	字母间距-->
    <style>
        #p1 {
            letter-spacing: 0px;
        }

        #p2 {
            letter-spacing: 3px;
        }

        #p3 {
            letter-spacing: 5px;
        }

    </style>
</head>
<body>
<p id="p1">Rome was't built in a day.罗马不是一天建成的。</p>
<hr/>
<p id="p2">Rome was't built in a day.罗马不是一天建成的。</p>
<hr/>
<p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>

在这里插入图片描述

词间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>词间距</title>
    <!--word-spacing	词间距-->
    <style>
        #p1 {
            word-spacing: 0px;
        }

        #p2 {
            word-spacing: 3px;
        }

        #p3 {
            word-spacing: 5px;
        }

    </style>
</head>
<body>
<p id="p1">Rome was't built in a day.罗马不是一天建成的。</p>
<hr/>
<p id="p2">Rome was't built in a day.罗马不是一天建成的。</p>
<hr/>
<p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>

在这里插入图片描述

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Practice</title>
    <style>
        p {
            text-indent: 32px;
        }

        #p2 {
            text-transform: uppercase;
        }

        span {
            font-weight: bold;
            text-decoration: underline;
        }

    </style>
</head>
<body>
<p>很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，事实上这种“<span>低水平的勤奋</span>”远远比懒惰可怕。</p>
<p id="p2">Remember: no pain, no gain！</p>
</body>
</html>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值