CSS学习笔记4：文本样式

最新推荐文章于 2024-05-03 00:15:06 发布

提辖鲁

最新推荐文章于 2024-05-03 00:15:06 发布

阅读量98

点赞数

分类专栏： Web # CSS 文章标签： css css3 html

本文链接：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>

在这里插入图片描述

提辖鲁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记4：文本样式

首行缩进<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首行缩进</title>   <style> p { fo
复制链接

扫一扫