前言
总结收集CSS的一些关键知识点
设置样式的方式有几种
3种
外部样式表,使用link引入一个外部css文件。
内部样式表,在head标签中使用style标签设置样式。
内联样式,在HTML元素中使用style属性定义样式
选择器都有哪些
派生选择器(根据文档的上下文关系来确定某个标签的样式。li strong {font-style: italic;font-weight: normal;})
id选择器(id)
类选择器(class)
属性选择器(用DOM的属性进行声明)
后代选择器(使用空格间隔,div p{})
群组选择器(使用逗号分隔,div,p,a{})
选择器的优先级
当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。
当优先级与多个CSS声明中任意一个声明的优先级相等的时候,CSS中最后的那个声明将会被应用到元素上。
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
<p>
标签内的文字的颜色是red,优先级相等的时候与文件中样式定义的先后顺序有关,即是后面的覆盖前面的,与在class定义中的先后关系无关。
一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。
下面列表中,选择器类型的优先级是递增的:
派生选择器(例如,
h1
)和伪元素(例如,::before
)类选择器(例如,
.example
),属性选择器(例如,[type="radio"]
),伪类(例如,:hover
)ID选择器(例如,
#example
)通配选择符(
*
), 关系选择符 (+, >, ~, ' '
) 和否定伪类(:not()
) 对优先级没有影响。(但是,在:not()
内部声明的选择器是会影响优先级)。给元素添加的内联样式 (例如,
style="font-weight:bold"
) 总会覆盖外部样式表的任何样式 ,因此可看作是具有最高的优先级。
例外的!important
规则
当在一个样式声明中使用一个
!important
规则时,此声明将覆盖任何其他声明。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。
使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。
一些经验法则
一定要优化考虑使用样式规则的优先级来解决问题而不是
!important
只有在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用
!important
永远不要在全站范围的 css 上使用
!important
永远不要在你的插件中使用
!important
木已成舟!怎样覆盖!important
再添加一条带
!important
的CSS规则给选择器更高的优先级
添加一样选择器,把它的位置放在原有声明的后面,让其覆盖
干脆改写原来的规则,以避免使用
!important
什么是CSS Hack
由于不同厂商的浏览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),
对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。
我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本编写特定的CSS样式,
我们把这个针对不同的浏览器/不同版本写相应的CSS的过程,叫做CSS Hack。
分类
属性前缀法(即类内部Hack):例如 IE6能识别下划线
_
和星号*
,IE7能识别星号*
,但不能识别下划线_
,IE6~IE10都认识\9
,但firefox前述三个都不能认识。选择器前缀法(即选择器Hack):例如 IE6能识别
*html
.class{}
,IE7能识别*+html
.class{}
或者*:first-child+html
.class{}
。IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释):
<!--[if IE]>IE浏览器显示的内容 <![endif]-->
,针对IE6及以下版本:<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
一般情况下,我们尽量避免使用CSS hack,但是有些情况为了顾及用户体验实现向下兼容,不得已才使用hack。
使用hack虽然对页面表现的一致性有好处,但过多的滥用会造成html文档混乱不堪,增加管理和维护的负担。
display:none与visibility:hidden的区别
display:none
元素完全从渲染树中消失,渲染的时候不占据任何空间。visibility: hidden
不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见。display: none
是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示。visibility: hidden
是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;
可以让子孙节点显示。修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
读屏器不会读取
display: none;
元素内容;会读取visibility: hidden;
元素内容。
Sass、LESS、Stylus是什么
Sass、LESS、Stylus均是CSS预处理器。
CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题。
它支持嵌套、变量、混入、继承、函数等。
优势
结构清晰,便于扩展。
可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码,可以方便地应用到老项目中。
CSS的content属性
CSS的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。
CSS可以在元素的前后插入文本:在选择器的后面加上::before
或者::after
。在声明中,指定 content 属性,并设置文本内容。
可以通过将content 属性值设置为某个图片的URL,可以将图片插到元素的前面或后面。
rgba()和opacity的透明效果有什么不同
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
往期好文:VUE 钩子函数超详细深入解析
欢迎您长按二维码订阅!
感谢戳一下在看或转发