理解CSS|青训营笔记

84 阅读2分钟

CSS简要发展史

CSS1:解决网页排版布局和装饰问题,第一个由“层叠”概念的预言

CSS2:表现和内容分离

CSS2.1:对CSS2的修正、扩展,代替CSS2

CSS3:规范模块化发展,样式丰富、酷炫,提高网站的可维护性以及性能速度。

层叠三大规则

样式表来源 > 选择器优先级 > 源码位置

样式表优先级

用户代理样式表中的 !important > 用户样式表中的 !important > 作者样式表中的 !important > 作者样式表(developer) > 用户样式表> 用户代理样式( 浏览器默认样式)

选择器类别

基础选择器 #id--ID选择器。Tagname--类型选择器或者标签选择器clasS一一类选择器。*一一通用选择器。该选择器匹配所有元素

组合器

子组合器(>)--匹配的目标元素是其他元素的直接后代。如:parent >.child。

相邻兄弟组合器(+)--匹配的目标元素紧跟在其他元素后面。如: p +h2

通用兄弟组合器(~)--匹配所有跟随在指定元素之后的兄弟元素,如: iactive ~li。

复合选择器

多个基础选择器可以连起来使用,如:h1.page-header。

属性选择器

通过约束属性值,dividata-title=“aaa”

伪类选择器:选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如:first-child, :hover

伪元素选择器:匹配在文档中没有直接对应HTML元素的特定部分,或插入内容。如 h2::first-letter, div::before

逻辑选择器:较新的选择器 :is0has :where( :not0)

选择器优先级

内联>id > class = attribute = pseudo-class > type = pseudo-element

注意:选择器尽量少用id,尽量不要用!import,自己的样式加载在引用库样式的后面

继承

image.png

大部分具有继承特性的属性跟文本相关:color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing 还有少部分列表、表格的属性

可以使用inherit关键字显式指定一个属性值从其父元素继承

c400b1cb9902b418e3c05e038da7622.png 最后字体大小为24px,继承了card