黑豹程序员-CSS四种样式的定义方式及冲突后的就近原则

4种样式定义

  1. 浏览器缺省设置(即默认)
  2. 外部样式表(引用的css)
  3. 内部样式表(位于 标签内部)
  4. 内联样式(在 HTML 元素内部)

样式冲突如何解决?

若多重样式将层叠为一个:

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

这是使用CSS时最大的难点。实际开发中会产生不同人写的样式去修饰同一个元素的情况,此时谁的修饰生效?

内联样式(在 HTML 元素内部)拥有最高的优先权,我们也称为就近原则。

案例

外部样式表:

cpp 复制代码
<span style="font-size:18px;"><link href="style.css" rel="stylesheet" type="text/css"></span>

内部样式表:

cpp 复制代码
<span style="font-size:18px;"><style type="text/css">.classname{width:100%}</style></span>

内联样式

cpp 复制代码
<span style="font-size:18px;"><div width="80"></div></span>
相关推荐
ayqy贾杰12 分钟前
SpaceX 收购 Cursor,马斯克花600亿美元买了个代码编辑器
前端·人工智能·机器学习
云飞云共享云桌面8 小时前
传统工作站 vs 云飞云共享云桌面:制造业设计云桌面选型深度对比
运维·服务器·前端·网络·3d·架构·制造
UXbot8 小时前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app
llz_1129 小时前
web-第四次课后作业
前端·spring boot·web
武清伯MVP10 小时前
前端跨域方案大合集
前端·javascript
小刘|10 小时前
Spring AI Alibaba 集成和风天气 API 实战
java·服务器·前端
星星在线10 小时前
我是怎么把页面图片流量砍掉一半的
前端·javascript
木叶子---11 小时前
前端打包出错
前端·人工智能·tensorflow
JAVA面经实录91711 小时前
前端系统化学习计划表(含完整知识思维导图)
前端·学习
本末倒置18312 小时前
开发了一个所见所得的md编辑器,致敬Typora大佬
前端