CSS层叠样式表—CSS文本属性

最新推荐文章于 2023-09-13 13:19:10 发布

来聊前端

最新推荐文章于 2023-09-13 13:19:10 发布

阅读量107

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36893834/article/details/131995465

版权

CSS文本属性

学习目标

在这里插入图片描述

首行缩进

p元素的首行是不会自动缩进的，因此我们在HTML中往往使用6个 来实现首行缩进两个字的空格。但是这种方式冗余代码很多。那么有没有更好的解决方法呢？

在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。

语法：

text-indent: 像素值;

<!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>

水平对齐

在CSS中，我们可以使用text-align属性来控制文本在水平方向上的对齐方式。

语法：

text-align: 取值;

属性值	描述
left	左对齐（默认值）
right	右对齐
center	居中对齐

<!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>

文本修饰

在CSS中，我们可以使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）。

语法：

text-decoration: 取值;

属性值	描述
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>

去除超链接下划线

<!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.baidu.com" target="_blank">百度</a>
</body>
</html>

大小写

在CSS中，我们可以使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言，因为中文不存在大小写之分。

语法：

text-transform: 取值;

属性值	说明
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 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>

行高

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

语法：

line-height: 像素值;

<!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>

间距

字间距

在CSS中，我们可以使用letter-spacing属性来两个字之间的距离。

语法：

letter-spacing: 像素值;

说明：

letter-spacing，从英文意思上就可以知道这是“字母间距”。注意，每一个中文汉字都被当做一个“字”，而每一个英文字母也当做一个“字”。

<!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>

词间距

在CSS中，我们可以使用word-spacing属性来定义两个单词之间的距离。

举例：

word-spacing: 像素值;

说明：

word-spacing，从英文意思上就可以知道这是“单词间距”。一般来说，word-spacing只针对英文单词而言。

<!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>

常用属性总结表

属性	值	含义
text-indent	像素	首行缩进
text-align	left左/right右/center居中	文本的位置
text-decoration	none无、underline下画线，line-through贯穿线	文本的画线
line-height	像素	行高
color	颜色属性	颜色