CSS基础-层叠与继承
继承
一些属性可以被继承,一些不可以。
一般来说,字体颜色、字体大小会被继承,关于形状的如 padding 、border 、margin、width等就不会被继承。哪些属性属于默认继承很大程度上是由常识决定的。
控制继承
CSS提供了四个通用属性值来控制继承,每个CSS属性都可以接收这些值。
- inherit 继承父元素的属性值
- initial 设置属性值和浏览器默认样式相同
- unset 将属性重置为自然值,如果有inherit的话就是inherit,否则和initial一样
- revert 很少浏览器支持
重设所有属性值
all : unset initial inherit revert
撤销对所有样式所做的更改,以便回到之前已知的起点。
层叠
有时对于一些元素有多条规则,那么应该选用哪条规则应用于这些元素?
根据重要性从上到下,有三个因素需要考虑:
- 资源顺序
当两条同级别的规则应用到同一个元素上时,写在后面的规则就是实际使用的规则。
- 优先级
声明在style属性(内联样式) > ID选择器 >类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器
选择范围越小,优先级越高,因为越精确。
因此通用的做法是,给基本元素定义通用的样式,根据需求再创建不同的类。
选择器属性优先级计算:
一个选择器的优先级由四个部分相加 ,可以认为是个十百千 —— 四位数的四个位数:
- 千位: 如果声明在 style 的属性(内联样式)则该位得一分。这样的声明没有选择器,所以它得分总是1000。
- 百位: 选择器中包含ID选择器则该位得一分。
- 十位: 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
- 个位:选择器中包含元素、伪元素选择器则该位得一分。
注意:
1. 通用选择器(*)、组合符合(>, ~, +, ' ')和否定伪类(: not) 不会影响优先级。
2. 计算时不能进位,即20个元素选择器的叠加 也不能超过一个类选择器。
- ! important
! important 优先级最高,能够覆盖普通规则的层叠。
覆盖 ! important 的唯一办法是用另一个位置靠后或者具有更高优先级的 ! important 覆盖它。
但是我们应该尽量避免使用这个属性,因为调试起来会不方便。
CSS基础-层叠与继承的更多相关文章
- HTML&CSS基础-样式的继承
HTML&CSS基础-样式的继承 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> & ...
- CSS中层叠和继承的概念。
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: 1 2 3 4 5 6 7 8 9 <ht ...
- CSS 基础 优先级 选择器 继承
1.样式优先级 (内联样式)Inline style > (内部样式)Internal style sheet > (外部样式)External style ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- CSS三大特性(继承、优先级、层叠)之个人见解
首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- CSS基础知识01
一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold; 正常用:norma ...
- CSS基础和选择器
什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...
随机推荐
- [MIT6.006] 21. Daynamic Programming III: Parenthesization, Edit Distance, Knapsack 动态规划III:括号问题,编辑距离,背包问题
这节课主要针对字符串/序列上的问题,了解如果使用动态规划进行求解.上节课我们也讲过使用前缀和后缀的概念,他们如下所示: 接下来,我们通过三个问题来深入了解下动态规划使用前缀.后缀和子串怎么去解决括号问 ...
- 重构rbd镜像的元数据
这个已经很久之前已经实践成功了,现在正好有时间就来写一写,目前并没有在其他地方有类似的分享,虽然我们自己的业务并没有涉及到云计算的场景,之前还是对rbd镜像这一块做了一些基本的了解,因为一直比较关注故 ...
- kali 系列学习09-Kali-linux设置ProxyChains
ProxyChains是Linux和其他Unices下的代理工具.它可以使任何程序通过代理上网,允许TCP和DNS通过代理隧道,支持HTTP.SOCKS4和SOCKS5类型的代理服务器,并且可配置多个 ...
- Route_of_Linux
爬过六个陡坡,对Linux了如指掌 本文是极客时间App中刘超老师趣谈Linux操作系统的学习路径课程的学习笔记 抛弃旧思维习惯,熟练使用命令行 要从Windows的思维习惯,切换成Linux的命令行 ...
- springboot项目启动报错Communications link failure
环境情况,MySQL版本如下: 报错情况如下(看上去是和数据库有关): com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communi ...
- 2021版的思维导图MindManager 安装激活以及换机教程
思维导图软件MindManager更新版本啦,相信细心的小伙伴应该已经发现了,MindManager最新版的名称变成了MindManager Windows 21,并且更新了很多新功能,点击查看Min ...
- 用MindManager做完思维导图后怎么加密
使用MindManager我们可以制作出很多简洁明了的思维导图,然而,不论是分享还是查看这些导图,我们往往需要对导图进行加密操作,尤其是制定公司或企业的下一步发展计划时,加密导图就显得很有必要了. M ...
- Camtasia绿幕素材的视频合成
随着科技和互联网的快速发展,让越来越多的人喜欢上了视频的各项制作,那么怎么让两个视频进行合成并一起播放呢?操作很简单,下面来讲解具体的操作步骤.小编选用的是Camtasia2019版本的视频编辑软件进 ...
- 在家看电影音效太差?Boom 3D帮你轻松升级
新片上映后,很多人都会选择去电影院观看,一是为了第一时间看到电影,还有一个原因就是电影院的音效往往可以让人身临其境,更好地感受电影的氛围.那如果在家刷片我们该怎么办呢? 我们可以使用Boom 3D这款 ...
- FL studio系列教程(二):水果的强大功能
作为音乐人,在电脑上进行编曲,混音,合成是家常便饭,而市面上大家常用的音乐编曲制作软件很多,小编在这里就给大家做一个推荐. 大家常听到的音乐编曲制作软件大多是Cubase.Nuendo.Pro Too ...