第四课《背景边框列表链接和更复杂的选择器》
一、学习了background相关样式属性:
background-color、background-image、background-repeat、background-position、background-attachment、background、background-size、多重背景的设置方法
二、学习了border相关样式属性:
border、border-width、border-style、border-color、border-radius、border-clip、border-image
三、学习了list相关样式属性:
list-style、list-style-type、list-style-image、list-style-position、start、reversed、value、如何处理列表间距
四、学习了链接相关样式:
- 链接的五种状态:link、visited、hover、focus、active以及他们分别对应的伪类 :link、:visited、:hover、:focus、:active
- 默认的链接样式以及cursor和outline属性
- 链接样式顺序:love fears hate
- 给链接添加图标的方式
- 将链接创建为选项菜单的方式
五、选择器的分组:
使用“,”来对选择器进行分组,以便让很多的元素共享同样的样式
六、派生选择器:
又称“上下文选择器”,依据所选元素在dom中的上下文关系进行匹配
- 后代选择器:使用空格连接,匹配某元素的所有后代元素
- 子元素选择器:使用>连接,匹配某元素的所有子元素
- 相邻元素选择器:使用+连接,匹配其后出现的所有某兄弟元素
七、伪类选择器:
- 伪类选择器:以“:”为前缀添加到一个选择器的末尾做关键字,表示在特定状态下才被应用到指定元素上
- 伪元素选择器:以“::”为前缀添加到一个选择器的末尾做关键字去选择某个元素的某个部分
八、学习了如何组合使用选择器
九、层叠的优先级判断
- 重要性:
- 将!important加在某条声明后可以使该声明总是优先于其他规则
- 声明的重要性取决于他来自什么样的样式表内,相互冲突的声明将按以下顺序适用,后一种将覆盖先前的声明:
- 在用户代理样式表的声明 (例如:浏览器在没有其他声明的默认样式).
- 用户样式表中的普通声明(由用户设置的自定义样式)
- 作者样式表中的普通声明(这是我们设置的样式,Web开发人员)
- 作者样式表中的重要声明
- 用户样式表中的重要声明
- 专用性:一个选择器具有的专用性的量是用四种不同的值(或组件)来衡量的,它们可以被认为是千位,百位,十位和个位:
- 千位:如果声明是在style属性中该列加1分(这样的声明没有选择器,所以它们的专用性总是1000。)否则为0
- 百位:在整个选择器中每包含一个ID选择器就在该列中加1分
- 十位:在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分
- 个位:在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分
- 源代码次序:后出现的规则将战胜先出现的规则
十、继承:CSS为处理继承提供了四种特殊的通用属性值:
- inherit: 该值将应用到选定元素的属性值设置为与其父元素一样
- initial:该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值,并且该属性是自然继承的,那么该属性值就被设置为inherit
- unset:该值将属性重置为其自然值,即如果属性是自然继承的,那么它就表现得像inherit,否则就是表现得像initial
- revert:如果当前的节点没有应用任何样式,则将该属性恢复到它所拥有的值。换句话说,属性值被设置成自定义样式所定义的属性(如果被设置), 否则属性值被设置成用户代理的默认样式