CSS基本使用(一)--inherit属性（颜色和字体大小）

最新推荐文章于 2023-07-21 10:34:38 发布

qq_39355295

最新推荐文章于 2023-07-21 10:34:38 发布

阅读量1.2w

点赞数 3

分类专栏： CSS3

原文链接：https://zhuanlan.zhihu.com/p/53826638

版权

CSS3 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

一、color属性设置

提前：以color使用inherit有几种情况分析，以a标签为例，如果a标签本身没有给出颜色属性：
第一种：没给a标签赋值：

(1) 记住：a标签的颜色没有默认继承属性。
所以：他的所有父级元素有没有给出颜色属性都不影响a标签的默认属性。

运行结果：
在这里插入图片描述
第一种：给a标签赋值color，但是没给父级元素赋值：

<!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>Document</title>
    <style>
        .test{
            color: red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">
            <a href="" class="test">超链接</a>
        </div>
    </div>
</body>
</html>

运行结果：
在这里插入图片描述
第二种：给a赋值inherit，但是没给父级两个元素赋值：

 <style>
        .test{
            color: inherit;
        }
 </style>

运行结果：
在这里插入图片描述
第三种：a赋值inherit，给一级父级和二级父元素赋值：

<style>
        .parent{
            color: yellow;
        }
        .son{
            color: red;
        }
        .test{
            color: inherit;
        }
    </style>

运行结果：
在这里插入图片描述
备注：继承会使用最近的继承辈颜色
第四种：a赋值inherit，给一级父级或者二级父元素赋值：
运行结果：
和对应被赋值的元素颜色相同。

注意：因为a标签颜色有默认属性样式，所以会优先使用自己的默认属性，但是div没有默认的颜色，所以可以默认继承父辈body的颜色

font-size属性：

注意：字体大小font-size刚好跟颜色color相反，a标签的font-size的就有默认继承属性。
第一种：a没给出inherit属性，如果父级设置属性，则自动继承：

<style>
        .parent{
           font-size: 30px;
        }
        .son{
           
        }
        .test{
           
        }
    </style>
   <body>
    <div class="parent">
        <div class="son">
            <a href="" class="test">超链接</a>
        </div>
    </div>
</body>

运行结果：
在这里插入图片描述

总结

所以能否继承就看不主动写出该属性的前提下，是否有小三角形默认样式属性。
在这里插入图片描述

qq_39355295

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
CSS基本使用(一)--inherit属性（颜色和字体大小）

一、color属性设置提前：以color使用inherit有几种情况分析，以a标签为例，如果a标签本身没有给出颜色属性：第一种：没给a标签赋值：(1) 记住：a标签的颜色没有默认继承属性。所以：他的所有父级元素有没有给出颜色属性都不影响a标签的默认属性。运行结果：第一种：给a标签赋值color，但是没给父级元素赋值：<!DOCTYPE html><html ...
复制链接

扫一扫

专栏目录