前端打卡day12--CSS--4.文本样式

最新推荐文章于 2023-01-10 21:51:24 发布

啊西边的瓜

最新推荐文章于 2023-01-10 21:51:24 发布

阅读量124

点赞数

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

本文链接：https://blog.csdn.net/qq_41083616/article/details/119773007

版权

前端学习专栏收录该内容

45 篇文章 0 订阅

订阅专栏

强调：字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。因此在CSS中，特意使用了“font”和“text”两个前缀来区分这两类样式。
在这里插入图片描述
1 首行缩进
中文段落首行一般需要缩进两个字的空间。如果想要实现这个效果，text-indent值应该是font-size值的2倍。

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

2 水平对齐：text-align

    <style type="text/css">
        #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>

3 定义文本的修饰效果：text-decoration
在这里插入图片描述
4 大小写：text-transform

5 间距：letter-spacing、word-spacing
letter-spacing属性来定义两个字之间的距离
word-spacing属性来定义两个单词之间的距离

啊西边的瓜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端打卡day12--CSS--4.文本样式

强调：字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。因此在CSS中，特意使用了“font”和“text”两个前缀来区分这两类样式。1 首行缩进中文段落首行一般需要缩进两个字的空间。如果想要实现这个效果，text-indent值应该是font-size值的2倍。<!DOCTYPE html><html><head> <meta charset="utf-8" />
复制链接

扫一扫

专栏目录