CSS手记（一）

基础部分

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，也不能包含完整的规则

选择器

如果声明中使用了不正确的属性或不正确的值，那么整个声明都会失效

如果 一个属性能接受多个关键字，在这种情况下，关键字通常由空格分隔。

只有在一种情况下css允许用/来分隔，那就是font属性用分隔线来设置字体的大小和行高

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"开头的所有元素

[foo$="bar"]    描述foo属性值以"bar"结尾的所有元素

[foo*="bar"]     选择foo属性值中包含子串“bar”的所有元素

*[lang|="en"]   选择lang属性以en或en-开头的所有元素

选择子元素

h1>strong 选择h1下子元素strong

使用+可以选择紧跟其后且具有相同父元素的元US。

伪类

:focus    指示当前拥有输入焦点的元素

:hover     鼠标指针停留的元US

:active    指示被用户激活的元素

顺序为"link-visited-focus-hover-active"

尽量避免在动态伪类上改变元素大小和排布

最常见的错误在于认为p:first-child之类的选择器会选择p元素的第一个子元素，实际上是作为第一个子元素的p元素

伪类比属性选择器更健壮，是一个很好的选择

不要将互斥的伪类放在一起使用。

所有伪元素都必须放在出现该伪元素的选择器的最后面。

结构和层叠

选择器的各个ID属性值+100

选择器的各个类属性值、属性选择或伪类，+10

对于选择器中给定的各个元素和伪元素+1

特殊性值0,0,1,0比0,0,0,13更高

ID选择器和ID属性选择器是不同的

!important总是放在声明的最后，及分号前面

!important声明没有特殊性值，但所有！important声明会分组在一起，如果一个重要声明和一个非重要声明冲突，胜出的总是重要声明

继承的值没有特殊性，连0特殊性都没有。

同样特殊性值的选择器！important的权重更高，后出现的权重高。如果样式表中有导入样式表，则认为导入样式表在前。

综上——先看是否为!important，再看特殊性值，最后看出现顺序