CSS基础(4)- 层叠
本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用。
文章目录
- 层叠
- 1. 比较重要性
- 2. 比较特殊性
- 3. 比较源次序
- 应用
- 参考资料
层叠
声明冲突:同一个样式,多次应用到同一个元素
层叠:解决声明冲突的过程,浏览器自动处理(权重计算)
1. 比较重要性
重要性从高到底:
作者样式表:开发者书写的样式
1) 作者样式表中的!important样式(不建议)
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式
2. 比较特殊性
看选择器
总体规则:选择器选中的范围越窄,越特殊
具体规则:通过选择器,计算出一个4位数(x x x x)
- 千位:如果是内联样式,记1,否则记0
- 百位:等于选择器中所有 id选择器 的数量
- 十位:等于选择器中所有 类选择器、属性选择器、伪类选择器 的数量
- 个位:等于选择器中所有 元素选择器、伪元素选择器 的数量
3. 比较源次序
代码书写 靠后 的胜出
应用
- 重置样式表
书写一些作者样式,覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表:normalize.css、reset.css、meyer.css
先引入重置样式,再引入自己书写的样式
- 爱恨法则
link > visited > hover > active
参考资料
- 【渡一教育】袁进老师的html+css基础课程
- 【渡一教育】袁进老师相关课程源代码
CSS基础(4)- 层叠相关推荐
- CSS基础:CSS的上下文之层叠上下文
CSS的上下文之层叠上下文 看到层叠,大家一定会联想到定位元素会是的元素之间发生"遮挡",而z-index可以改变他们之间的遮挡优先级,但这仅仅是层叠这一概念中很小的一部分. 本文 ...
- 和前端撕出逼格,撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
- CSS基础笔记(w3school)
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
- 两天学会css基础(一)
什么是css?css的作用是什么? CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式,搭建页面结构,比如设置元素的宽高大小,颜色,位置等等. 学 ...
- 前端html,css基础总结
0.1.css引入界面的方式: 内联式:通过标签的style属性,在标签上直接写样式. <div style="width:100px; height:100px; backgroun ...
- html笔记(一)html4+css2.0、css基础和属性、盒模型
w3c 官网 这里是 html4 的内容 大标题 小节 一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径 二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
- CSS 基础框盒模型介绍
当对一个文档进行布局(lay out)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box).CSS 决定 ...
- CSS基础「五」定位
本篇文章为 CSS 基础系列笔记第五篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
最新文章
- ES6 一些常用使用
- java数组去重_再谈JavaScript数组去重
- 【Python学习系列十三】Python机器学习库scikit-learn实现逻辑回归
- 4.10 风格代价函数-深度学习第四课《卷积神经网络》-Stanford吴恩达教授
- 【Spring学习】IOC容器
- Coremail邮件系统存在配置信息泄露漏洞(CNVD-2019-16798)
- FragmentSharedFabTransition
- 2022软件测试技能 Jmeter+Ant+Jenkins持续集成并生成测试报告教程
- 矩阵分解程序及报告:LU分解、QR分解、Householder变换、Givens变换、URV分解
- php识别手写图片,可识别手写字体的文字识别软件(附源码)
- Oracle重建控制文件
- 2015小米暑期实习笔试题_风口的猪-中国牛市(dp)
- 2018 最好的自动化测试工具
- 小游戏2048最佳算法怎么实现?思路全解析!
- 《聪明人用方格笔记本》读书笔记
- House of orange
- Debian 9 配置 OpenConnect(兼容Cisco AnyConnect)
- QFont/QFontInfo方法功能(QT5.12)
- 手机吃鸡语音服务器异常是怎么回事,《绝地求生》新版本里实用功能介绍 卡语音怎么解决...
- 计算机软件由程序数据和文档组成其中主体是,chap03 计算机软件
热门文章
- 关于富文本kindeditor中上传本地图片成功后获取到的图片路径是相对路径修改为绝对路径...
- 库编译:opencv 交叉编译静态库
- NKOJ-Unknow 不死的 LYM
- 缺少dll文件怎么办?修复dll文件的多种方法
- 分页功能的实现代码 与 分页查询
- 透过汽车之家二手车业务,看二手车市场的模式终局
- 当当网——(第一次上课的作业)(HTML)
- 新新人类蒙奇奇的天翼3G精彩生活
- 转行软件测试3年了,听前辈说测试前途是IT里最low的,我慌了......
- 房贷利息怎么算, 千万别被砖家叫兽误导