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,自己的样式加载在引用库样式的后面
继承
大部分具有继承特性的属性跟文本相关: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关键字显式指定一个属性值从其父元素继承
最后字体大小为24px,继承了card