博客列表 >css元素优先级的介绍

css元素优先级的介绍

昊森
昊森原创
2023年01月20日 19:39:00411浏览

元素样式的来源及优先级

  1. 两大来源:预置样式,自定义样式
  2. 优先级:自定义样式>预置样式
  3. 预置样式:代理样式
  4. 自定义样式:用户自己编写的样式,也是我们需要学的地方
  5. 继承样式:
    • 元素中的可继承属性,还会受到上下文同名元素的影响
    • 可继承属性可简化代码,例如文本、字体、颜色等
    • 盒模型属性不可继承,例如边框、宽度、高度内外边距

用户代理样式为浏览器为某个元素预定义的样式
图片1

自定义样式的来源及优先级

  1. 行内样式:tag.style,当前元素有效
  2. 文档样式/内部样式: <style>,当前文档有效
  3. 外部样式: haosen.css,引入文档有效

他的作用是由小到大的,也可视为优先级不同。

优先级:行内样式 > 文档样式 > 外部样式

行内样式

只定义某一个标签,如果想让昊森运维也变成蓝色就需要再次调用,很麻烦。
图片2
文档样式
这样我们只需要在style内定义h2标签属性即可,

外部样式

外部样式和其他样式不同,我们需要用到link标签引入css文件

然后我们在index.css内编写样式代码即可这样即可实现外部样式引用

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议