《HTML+CSS+JavaScript》之第14章文本样式

14.1 文本样式简介

字体样式针对文字本身的形体效果，文本样式针对整个段落的排版效果。
文本样式属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
text-transform	大小写转换
line-height	行高
letter-spacing、word-spacing	字母间距、词间距

14.2 首行缩进

text-indent:像素值；
1

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

14.3 水平对齐

text-align控制文本或图片（img元素）水平方向上的对齐方式。

text-align:取值；
1

left
左对齐（默认）
center
居中对齐
right
右对齐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

14.4 文本修饰

text-decoration定义文本的修饰效果。

text-decoration:取值；
1

none
去除所有划线效果，默认
underline
下划线，标明文章重点。
line-through
中划线，各大电商网站，用于促销。
overline
顶划线，没见过，可以放弃。
划线效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-decoration:underline;}
        #p2{text-decoration:line-through;}
        #p3{text-decoration:overline;}
    </style>
</head>
<body>
    <p id="p1">这是“下划线”效果</p>
    <p id="p2">这是“删除线”效果</p>
    <p id="p3">这是“顶划线”效果</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

去除超链接下划线

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        a{text-decoration:none;}
    </style>
</head>
<body>
    <a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

14.5 大小写

text-transform进行文本大小写转换。

text-transform:取值；
1

属性值	说明
none	无转换，默认
uppercase	转换为大写
lowercase	转换为小写
capitalize	每个英文单词首字母大写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-transform:uppercase;}
        #p2{text-transform:lowercase;}
        #p3{text-transform:capitalize;}
    </style>
</head>
<body>
    <p id="p1">rome was't built in a day.</p>
    <p id="p2">rome was't built in a day.</p>
    <p id="p3">rome was't built in a day.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

14.6 行高

line-height控制一行文本高度，不是行间距。

line-height:像素值；
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

14.7 间距

14.7.1 字间距

中文汉字和字母被当作字。

letter-spacing:像素值；
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

14.7.2 词间距

word-spacing:像素值；
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相关阅读:
Windows 安装Redis（图文详解）
DN-DETR: Accelerate DETR Training by Introducing Query DeNoising
C#：计算机视觉与OpenCV 的目标
阐述以下方法 @classmethod, @staticmethod, @property？
y109.第六章微服务、服务网格及Envoy实战 -- 可观测应用之分布式跟踪(二十)
剑指Offer || 044.在每个树行中找最大值
dubbo面试题
Kafka消息堆积
报名即将结束！11 大云原生领域开源技术干货一场拿下
Properties类和properties配置文件的理解学习

原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125611998

《HTML+CSS+JavaScript》之第14章 文本样式

《HTML+CSS+JavaScript》之第14章 文本样式

14.1 文本样式简介

14.2 首行缩进

14.3 水平对齐

14.4 文本修饰

14.5 大小写

14.6 行高

14.7 间距

14.7.1 字间距

14.7.2 词间距

《HTML+CSS+JavaScript》之第14章文本样式

《HTML+CSS+JavaScript》之第14章文本样式