深入CSS(上)|青训营

153 阅读2分钟

本节课学习了《深入CSS(上)》和《深入CSS(下)》,上半节课程的重点内容有:CSS 选择器的特异度、CSS 继承、CSS 求值过程解析、CSS 布局方式及相关技术。CSS是通过选择器找出页面中的元素,以便给元素设置样式。选择器分为:id选择器类选择器伪类属性选择器标签选择器通配选择器选择器按照特异度从高到底分为:!important(∞) > 行内样式(1000) > id选择器(100) > 类(伪类、属性)选择器(10) > 标签选择器(1) > (*)通配符选择器(0)特异度计算方式单个选择器时,选择器的特异度就是上面对应的值组合选择器时,选择器的特异度就多个选择器的相加,例如div .app的特异度就是10+1=11,注:这里的相加不会产生进位,例如:有11个标签选择器和一个类选择器的组合,他的特异度是10+11=1-11而不是21,特异度比较是从高位比到低位。样式作用原理由于一个元素可能有多个样式,但最终渲染时只会有一个样式起作用,就是特异度最高的那一个起作用。如果一个元素设置了多个特异度相同的样式,根据就近原则,会优先使用离元素最近的样式(一般是最后一个样式)在 css 中,每个CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的,当元素的一个继承属性(inherited property)没有指定值时,则取父元素的同属性的计算值 computed value (en-US)。只有文档根元素取该属性的概述中给定的初始值(initial value)(这里的意思应该是在该属性本身的定义中的默认值)。当元素的一个非继承属性(在 Mozilla code 里有时称之为reset property ) 没有指定值时,则取属性的初始值 initial value(该值在该属性的概述里被指定)。但要注意inherit 关键字允许显式的声明继承性,它对继承和非继承属性都生效。可以使用 all 简写属性一次控制所有属性的继承,该属性将其值应用于所有属性。通过学习本节课程,使我对CSS有了更深一步的理解,作为小白,虽然有些专业术语乍一听还是一头雾水,但随着课程的慢慢深入,我逐渐的对CSS 选择器的特异度、CSS 继承、CSS 求值过程解析、CSS 布局方式及相关技术等知识点有了自己的思考,今天也是收获满满~明天继续加油!