CSS特性

最新推荐文章于 2023-07-15 18:06:52 发布

Lewin671

最新推荐文章于 2023-07-15 18:06:52 发布

阅读量378

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/QingyingLiu/article/details/82083636

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS特性

CSS具有两大特性：继承性和层叠性。

继承性

CSS的继承性，指的是子元素继承父元素的某些样式属性，例如在父元素定义字体颜色(color 属性)，子元素会继承父亲元素的字体颜色。不过我们要注意的是，不是所有元素都具有继承性质，如padding、margin、border等就不具备继承性，只有那些能够使我们轻松书写的属性才可以继承。在CSS中，具有继承的属性有三大类：

文本相关属性:font-family、font-size、font-sytle、font-weight、font、line-height、text-align、text-indent、word-spacing
列表相关属性：list-style-image、list-style-position、list-style-type、list-style
颜色相关属性：color

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>example1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        #father{
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <div id="father">
        this is a block of father.
        <div>
            this is a block of son.
        </div> 
    </div>
</body>
</html>

运行结果

层叠性

CSS的层叠性，指的是样式的覆盖。如果我们重复定义相同属性，并且这些样式具有相同的权重，CSS会以最后定义的属性的值为准，也就是“后来者居上”原则。

注意“后来者居上”必须符合三个条件:

元素相同
属性相同

权重相同

Example2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>example2</title>
<style type="text/css">
    div{
        color: black;
    }
    div{
        color: aqua;
    }
    div{
        color: tomato;
    }
</style>
</head>
<body>
<div>i am lewin</div>
<div>i am lewin</div>
<div>i am lewin</div>
</body>
</html>

运行效果

Lewin671

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS特性

CSS特性CSS具有两大特性：继承性和层叠性。继承性CSS的继承性，指的是子元素继承父元素的某些样式属性，例如在父元素定义字体颜色(color 属性)，子元素会继承父亲元素的字体颜色。不过我们要注意的是，不是所有元素都具有继承性质，如padding、margin、border等就不具备继承性，只有那些能够使我们轻松书写的属性才可以继承。在CSS中，具有继承的属性有三大类：文本...
复制链接

扫一扫