CSS属性值的计算过程 (核心难点)

最新推荐文章于 2024-05-29 09:14:06 发布

BB_zhan

最新推荐文章于 2024-05-29 09:14:06 发布

阅读量264

点赞数 1

分类专栏： Web前端笔记文章标签： css 前端 css3

本文链接：https://blog.csdn.net/bb_zhan/article/details/122075456

版权

Web前端笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

属性值的计算过程 (核心难点)

一个一个元素依次渲染，顺序按照页面文档的树形目录结构进行

         /meta
    /head\title
html      /h3
    \body/ p - strong
         \ a
          \img

渲染每个元素的前提条件: 该元素的所有CSS属性必须有值。

一个元素，从所有属性没有值，到所有属性都有值，这个计算过程叫做属性值计算过程。 (再次强调HTML的语义化)

属性值从无到有:

确定声明值
参考样式表(作者写的和浏览器默认的)中没有冲突的声明，直接作为CSS的属性值。
层叠冲突 (!important>内联>ID>类>元素>通配符)
对样式表有冲突的声明使用层叠规则，确定CSS属性值。(参考CSS的层叠)
使用继承 (inherit)
对仍然没有值的属性，若可以继承，则继承父元素的值。(background-color不能被继承，参考CSS的继承)
使用默认值(initial value)
对仍然没有值的属性，使用默认值(每个CSS属性都有默认值，例如background-color的默认值为transparent)

!important>内联>ID>类>元素>通配符>继承>默认

特殊的两个CSS的取值:

inherit: 强制继承(提前继承,对a元素也通用)
initial: 默认值(提前默认，初始化)

实例:

<!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>Document</title>
    <link rel="stylesheet" href="./CSS/meyer.css">
    <!-- 已代入重置样式表 -->
    <style>
        div {
            color: blue;
            text-decoration: none;
        }
        a {
            /* 在此使用强制继承 */
            color: inherit;
            text-decoration: inherit;
        }
        p {
            text-decoration: overline;
            background-color: yellow;
        }
        .para {
            text-decoration: initial;
            /* 层叠中的权重计算 */
        }
        p {
            background-color: initial;
            /* 层叠中的比较源次序 */
        } /* 两种方法实现初始化 */
    </style>
</head>
<body>
    <div>
        <a href="">
            如何继承父元素的颜色
        </a>
        <p class="para">
            一段文字
        </p>
    </div>
</body>
</html>

BB_zhan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS属性值的计算过程 (核心难点)

属性值的计算过程 (核心难点)一个一个元素依次渲染，顺序按照页面文档的树形目录结构进行 /meta /head\titlehtml /h3 \body/ p - strong \ a \img渲染每个元素的前提条件: 该元素的所有CSS属性必须有值。一个元素，从所有属性没有值，到所有属性都有值，这个计算过程叫做属性值计算过程。 (再次强调HTML的语义化)属性值从无到有:确定声明值参考样式表(作者写的和浏览器
复制链接

扫一扫