基础部分
link标记是一个完全合法但很少用的标记,css使用这个标记来连接样式表和文档
<link type="text/css" rel="stylesheet" href="https://s.ssl.qhres.com/static/f64b0802627e55c3/link/share-login.css">
为了成功的加载一个外部样式表,link必须放在head元素中,但不能放在其他元素内部(如title)
除非文件名以.css结尾,有些Web服务器甚至不会将文件作为text/css传递,不过这个问题通常可以通过改变服务器的配置文件来修正。
可以在多个媒体中使用一个样式表,为此要提供应用此样式表的媒体列表,各媒体用逗号分隔。
media = "screen,projection"
同时加载两个样式表,会合并它们的规则,并将其全部应用于文档。
将rel定义为alternatestylesheet就可以定义候选样式表,只有在用户选择这个样式表时才会用于文档表现
如果一个rel为stylesheet的link指定标题(title),也就制定了该样式要作为首选样式表。这意味着,这个样式表要优先于候选样式表使用,而且第一次显示文档时会使用这个首选样式表。不过一旦选择候选样式表,就不会再选择首选样式表。
如果不为样式表指定title,那么它将作为一个永久样式表,始终用于文档的显示
style一定要使用type属性,对应css文档,正确的type属性值是“text/css”
可以使用@import来包含多个外部样式表链接
@import需要房子其它样式之前,用@import无法指定候选样式表
一个内联的style属性只能放一个声明块,而不能放整个样式表。因此,不能在style属性中放@import,也不能包含完整的规则
选择器
h2 {font:large/150% sans-serif;}
通过把两个类选择器链接到一起,可以仅选择同时包含这些类名的元素(类名的顺序不限)
h1[class] {color: silver;}
还可以根据多个属性进行选择,只需将属性选择器链接到一起即可,这样会选择同时具有多个属性的元素。
除了选择有某些属性的元素,还可以只选择具有特定属性值的元素。
a[href="https://s.ssl.qhres.com/static/f64b0802627e55c3/link/share-login.css"] {font-weight:bold;}
注意,这种格式要求必须和属性值完全匹配
p[class~="warning"] {font-weight:blod;}
[foo^="bar"] 描述foo属性值以"bar"开头的所有元素
选择子元素
h1>strong 选择h1下子元素strong
使用+可以选择紧跟其后且具有相同父元素的元US。
伪类
:focus 指示当前拥有输入焦点的元素
:hover 鼠标指针停留的元US
:active 指示被用户激活的元素
顺序为"link-visited-focus-hover-active"
尽量避免在动态伪类上改变元素大小和排布
最常见的错误在于认为p:first-child之类的选择器会选择p元素的第一个子元素,实际上是作为第一个子元素的p元素
伪类比属性选择器更健壮,是一个很好的选择
不要将互斥的伪类放在一起使用。
所有伪元素都必须放在出现该伪元素的选择器的最后面。
结构和层叠
ID选择器和ID属性选择器是不同的
!important总是放在声明的最后,及分号前面
!important声明没有特殊性值,但所有!important声明会分组在一起,如果一个重要声明和一个非重要声明冲突,胜出的总是重要声明
继承的值没有特殊性,连0特殊性都没有。
同样特殊性值的选择器!important的权重更高,后出现的权重高。如果样式表中有导入样式表,则认为导入样式表在前。
综上——先看是否为!important,再看特殊性值,最后看出现顺序