一级域名免费网站怎么申请,宁波市网站建设制作费用,网站建设系统源码,wordpress对比phpcms目录 例子1#xff0c;确定声明值2#xff0c;层叠冲突2.1#xff0c;比较源重要性2.2#xff0c;比较优先级2.3#xff0c;比较源次序 3#xff0c;使用继承4#xff0c;使用默认值其他 例子
我们来举例说明h1 标签最终的样式#xff1a;
divh1… 目录 例子1确定声明值2层叠冲突2.1比较源重要性2.2比较优先级2.3比较源次序 3使用继承4使用默认值其他 例子
我们来举例说明h1 标签最终的样式
divh1 classred标题一/h1
/div样式表1——自定义样式
.red {color: salmon;font-size: 40px;
}h1 {font-size: 30px;
}div h1.red {font-size: 20px;font-size: 3em;
}div {background-color: rgba(0, 0, 0, 0.3);text-align: center;
}样式表2——浏览器默认样式 一个 css 属性计算出的最终属性值会经过下面4个步骤。 1确定声明值
在所有样式表中没有冲突的 css 样式就是最终样式。
可以看到没有冲突的 css 样式有 color display margin-block-start… 等等。
所以这一步得到确定的最终样式
h1 {color: salmon;display: block;margin-block-start: 0.67em;margin-block-end: 0.67em;margin-inline-start: 0px;margin-inline-end: 0px;font-weight: bold;/* 其他 css 声明... */
}2层叠冲突
对样式表中有冲突的声明使用层叠规则
2.1比较源重要性
重要性自定义样式 浏览器默认样式。
所以font-size 的最终值会在自定义样式中确定
.red {font-size: 40px;
}h1 {font-size: 30px;
}div h1.red {font-size: 20px;font-size: 3em;
}这一步能够解释为什么选择器权重低的自定义样式 * { margin: 0 }会覆盖浏览器默认的样式 body { margin: 8px } 2.2比较优先级
也就是选择器的权重。很明显这个选择器的权重最高
div h1.red {font-size: 20px;font-size: 3em;
}2.3比较源次序
相同 css 样式代码靠后的覆盖代码靠前的。 此时得到的最终样式
h1 {font-size: 3em;color: salmon;display: block;margin-block-start: 0.67em;margin-block-end: 0.67em;margin-inline-start: 0px;margin-inline-end: 0px;font-weight: bold;/* 其他 css 声明... */
}3使用继承
对仍然没有值的样式若可以继承则继承父元素的样式。
可以看到自定义样式还有一条 css 声明
div {background-color: rgba(0, 0, 0, 0.3);text-align: center;
}其中 background-color 不能继承text-align 可以继承。所以得到继承样式 h1 {text-align: center;font-size: 3em;color: salmon;display: block;margin-block-start: 0.67em;margin-block-end: 0.67em;margin-inline-start: 0px;margin-inline-end: 0px;font-weight: bold;/* 其他 css 声明... */
}4使用默认值
对仍然没有值的样式使用默认值预设值。
比如 h1 的 background-color 默认值是 transparent。
h1 {background-color: transparent;text-align: center;font-size: 3em;color: salmon;display: block;margin-block-start: 0.67em;margin-block-end: 0.67em;margin-inline-start: 0px;margin-inline-end: 0px;font-weight: bold;/* 其他 css 声明... */
}此时已经确定了最终的样式还需要通过最后一步单位转换让浏览器能够识别。 尺寸相关的样式会将相对单位转换为绝对单位比如 em rem % auto 都转为 px。 颜色都会转换 rgb()。red 转为 rgb(255, 255, 255)transparent 转为 rgba(0, 0, 0, 0) 其他
有了上面的规则再看一个例子
div classboxa href超链接/a
/div.box {color: red !important;
}效果 解释
在第一步确定声明值中a 的浏览器默认样式中是有 color 样式的。而且也没有对 a 设置自定义样式。所以直接就能确定 a 的 color 样式值。 所以一般在项目中会对 a 设置如下自定义样式来继承父级的 color方便后续的操作。
a {text-decoration: none;color: inherit; /* 表示继承 */
}以上。 参考渡一教育。
