段落属性、继承性

最新推荐文章于 2022-12-06 08:56:51 发布

hello_xujj

最新推荐文章于 2022-12-06 08:56:51 发布

阅读量205

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/xjj19999272/article/details/116309506

版权

CSS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

段落属性、继承性

段落和行相关属性

text-indent属性

text-indent属性定义首行文本内容之前的缩进量，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落属性</title>
    <style>
        p {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>
        岳阳楼，位于湖南省岳阳市岳阳楼区洞庭北路，地处岳阳古城西门城墙之上，紧靠洞庭湖畔，下瞰洞庭，前望君山；始建于东汉建安二十年（215年），历代屡加重修，现存建筑沿袭清光绪六年（1880年）重建时的形制与格局；因北宋滕宗谅重修岳阳楼，邀好友范仲淹作《岳阳楼记》使得岳阳楼著称于世。自古有“洞庭天下水，岳阳天下楼”之美誉，与湖北武汉黄鹤楼、江西南昌滕王阁并称为“江南三大名楼”，是“中国十大历史文化名楼”之一，世称"天下第一楼"。
    </p>
    <p>
        岳阳楼主楼为长方形体，主楼高19.42米，进深14.54米，宽17.42米，为三层、四柱、飞檐、盔顶纯木结构，楼中四根楠木金柱直贯楼顶，周围绕以廊、枋、椽、檩互相榫合，结为整体；顶覆琉璃瓦，构型庄重大方。岳阳楼内一楼悬挂《岳阳楼记》雕屏及诗文、对联、雕刻等；二楼正中悬有紫木雕屏，上刻有清朝书法家张照书写的《岳阳楼记》；三楼悬有毛泽东手书的杜甫《登岳阳楼》诗雕屏，檐柱上挂“长庚李白书”对联“水天一色，风月无边”，具有一定的观赏价值。岳阳楼作为三大楼中唯一保持原貌的古建筑，独特的盔顶结构体现了古代劳动人民的聪明智慧及能工巧匠的精巧设技能。
    </p>
</body>
</html>

em表示字符宽度，2em表示缩进两个字符。代码效果如下：
在这里插入图片描述
可以看到首行都有缩进两个字符。

line-height属性

line-height属性用于定义行高，行高不是每行直接的间距，行高指的是文本行的基线间的距离。

line-heigh属性的单位可以是以px为单位的数值。

line-heigh属性也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法。

line-heigh属性也可以是百分数，表示字号的倍数。示例如下：

line-height: 30px;
line-height: 1.5;
line-height: 150%;

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

font合写属性

font属性可以用来作为font-style, font-weight, font-size, line-height和font-family属性的合写。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落属性</title>
    <style>
        p {
            /* 分别设置字体为倾斜、加粗、20字号大小、行高为字号的1.5倍、字体为Arial, 备选字体为微软雅黑 */
            font: italic bold 20px/1.5 Arial, "微软雅黑";
        }
    </style>
</head>
<body>
    <p>
        font合写属性
    </p>
    <p>
        font合写属性
    </p>
</body>
</html>

代码效果如下：
在这里插入图片描述

继承性

文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效。比如这几个常用的color 、font- 开头的、list- 开头的、text- 开头的和line- 开头的都有继承性。

因为文字相关属性有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了。

在继承的情况下，选择器权重计算失效，而是采用“就近原则”。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落属性</title>
    <style>
        #box1 #box2 {
            /* 权重为（2，0，0） */
            color: red;
        }
        .box1 .box3 {
            /* 权重为（0，2，0） */
            color: blue;
        }
    </style>
</head>
<body>
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <P>继承性的就近原则</P>
            </div>
        </div>
    </div>
</body>
</html>

如果按照权重计算，则文字应该是红色，但因为都没有选择p标签，都是在继承的情况下，所以选择器权重计算失效，采用“就近原则”，很明显box3描述的更近，所以文字应该是蓝色。代码效果如下：
在这里插入图片描述

hello_xujj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
段落属性、继承性

段落属性、继承性段落和行相关属性text-indent属性text-indent属性定义首行文本内容之前的缩进量，示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
复制链接

扫一扫