• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

4.5 首行缩进text-indent

一、text-indent属性简介

在CSS中,使用text-indent属性定义段落的首行缩进。我们都知道段落p标签的首行是不会缩进的,我们在学习HTML入门教程时,都是使用4个“ ”(牛逼SP)来缩进首行文本,让段落排版规范一些。但是这样的话,冗余代码就会很多。

现在,我们可以使用CSS的text-indent属性来控制文本首行的缩进。

语法:

text-indent:像素值;

说明:

CSS入门教程中,全部都是使用像素作单位,在CSS进阶阶段我们会深入讲解其他CSS单位。

举例:

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

在浏览器预览效果如下:

text-indent属性

分析:

我们都知道,段落首行缩进的是两个字的间距,如果要实现这个效果,text-indent的属性值应该是字体font-size属性值的两倍,大家琢磨一下(参考本例)就知道了。这是一个小技巧,大家以后应该会经常用得到。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部