段落和行相关属性

最新推荐文章于 2024-10-04 22:03:04 发布

小豪boy

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量172

点赞数

分类专栏： CSS3学习笔记文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_34771938/article/details/119928211

版权

CSS3学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了CSS中text-indent属性用于设置文本首行缩进，line-height属性调整行间距，并展示了如何通过line-height实现单行文本垂直居中。此外，还探讨了font属性的综合使用，包括字号、行高和字体的合写方式。通过实例代码详细解析了这些CSS属性的用法。

摘要由CSDN通过智能技术生成

text-indent属性

text-indent属性定义首行文本内容之前的缩进量，缩进两个字符应该写作：

text-indent: 2em;

line-height

line-height属性用于定义行高。
line-heigh属性的单位可以是以px为单位的数值。
line-height: 30px; 
line-heigh属性也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法。
line-height: 1.5; 
line-heigh属性也可以是百分数，表示字号的倍数。
line-height: 150%;

单行文本垂直居中

设置行高=盒子高度，即可实现单行文本垂直居中。
设置text-align: center，即可实现文本水平居中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        p {
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <!-- 单行文本水平垂直居中 -->
    <p>
        还没来得及去沾花惹草，就被人拔光了。
    </p>
</body>

</html>

font合写属性

font属性可以用来作为font-style, font-weight, font-size, line-height和font-family属性的合写。
font: 20px/1.5 Arial, "微软雅黑";
上面示例代表的意思依次是：字号大小/行高字体。
font: italic bold 20px/1.5 Arial, "微软雅黑";
上面示例代表的意思依次是：倾斜加粗字号大小/行高字体。