CSS基础一

1.CSS选择器

1. 元素选择器

文档的元素就是最基本的选择器。选择器通常是某个HTML元素，比如 p、h1、em、a，包括html本身。

1 2	html {color: black;} h1 {color: blue;}

2. 类选择器

类名前有一个点号（.）来选择同一类的元素。

<h1 class="news">
This is the title.
</h1>

<p class="news cont">
This is the content.
</p>

.news {color: red;}
p.news {font-size: 16px;}
.news.cont {background: silver;} // 多类选择器

3. ID选择器

ID 选择器前面有一个(#)号，而且引用的是 id 属性中的值。

1
2
3

<p id="info">This is the content.</p>

#info {font-size:bold;}

ID选择器与类选择器的区别：
(1) 在一个HTML文档中，ID选择器会使用一次，而且仅一次。
(2) ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表。
(3) 不同的文档中具有的相同的ID属性，可以同时为其设置属性。

4. 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

a[href] {color:red;} // 选择a元素中有href属性的
a[href][title] {color:red;} // 多属性选择

a[href="http://www.w3school.com.cn"] {color: red;} //根据具体的属性值来选择

5. 后代选择器

如果希望h1元素的所有后代中的em元素应用样式如下：

1	h1 em {color:red;}

6. 子代选择器

如果希望h1元素的子代中的em元素应用样式如下：

1	h1>em {color:red;}

7. 相邻兄弟选择器

如果选择紧接在h1元素后的em元素，两者为兄弟关系，如下：

1	h1 + em {color:red;}

8. 选择器分组

不同选择器之间用(,)分隔。

1	body, h2, p {color:gray;}

9. 伪类选择器

伪类选择器可以为某些元素（甚至是文档本身）的状态所指示的幻想类指定样式。

链接伪类

伪类名	描述
:link	指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚
:visited	指示作为已访问地址超链接的所有锚

动态伪类

伪类名	描述
:focus	指示当前拥有输入焦点的元素
:hover	指示鼠标停留在哪个元素上
:active	指示被用户输入激活的元素

动态伪类可以应用到任何元素上。
伪类的顺序很重要，通常是“link-visited-focus-hover-active”。

选择第一个子元素

1 2	p:first-child {font-weight: bold;} li:first-child {background: yellow;}

将作为某一个元素第一个子元素的所有p元素（li元素）设置为粗体。
这里不要理解错了，应该注意。

10. 伪元素选择器

伪元素能够在文档中插入假想的元素，从而得到某种效果。

设置首字母样式
用于设置一个块级元素首字母的样式。
1
p:first-letter {color: red;} //
设置第一行的样式
用来设置元素中第一行的文本。
1
p:first-line {color: red;}
设置之前和之后元素的样式
假设要在每个h2元素前加一对银色中括号：
1
h2:before {content: "]]"; color: silver;}

要在一个元素后面插入内容并设置样式，可以使用伪元素:after。

1	body:after {content: " The End."}

2.结构和层叠

1. 选择器的特殊性

如果一个元素有两个或多个冲突的属性声明，那么有最高特殊性的声明就会胜出。声明也分为重要声明（就是!important）和非重要声明。这两类声明解决冲突的规则入下：
(1) 对于重要声明就没有特殊性一说,非重要声明的解决冲突使用特殊性,重要声明与非重要声明发生冲突时，胜出的总是重要声明
(2) 非重要声明的特殊性由选择器本身确定。特殊性值表述为4个部分，如0，0，0，0.

对于内联样式特殊性加1，0，0，0；
对于ID选择器特殊性加0，1，0，0；
对于类选择器、伪类选择器、属性选择器特殊性加0，0，1，0；
对于元素选择器和伪元素选择器特殊性加0，0，0，1；
对于通配选择器的特殊性加0，0，0，0；（这个和没有特殊性不一样）

(3) 对于子元素从父元素继承来的值是没有特殊性的，因此通配选择器会覆盖继承来的值。
(4) 如果特殊性相同的两个规则同时应用到同一个元素，则按照声明的顺序进行排序，一个声明在文档中越后出现，权重越大。导入样式表的出现顺序一般认为出现在主样式表的前面。
(5) 以及按角色分为创作人员样式、读者样式和用户代理样式。其中用户代理样式的优先级最低。一般而言创作人员样式优先级最高，除了读者样式设置为!important的情况，这种情况就算是创作人员样式设置为!important都是比他弱的。

2. 继承

css不可继承的属性有：大多数框模型属性（外边距、内边距、背景和边框）。
css可继承的属性有：颜色，文字，字体间距行高对齐方式，和列表的样式可以继承
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

继承的值没有特殊性。通配选择器有0特殊性。0特殊性要比无特殊性要强。

* {color: gray;}
h1.page-title {color: black;}

<h1 class="page-title"><p>hello world</p></h1>

p元素里的内容显示为灰色。

3. 层叠

(1) 找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。
(2) 按显式权重对应用到该元素的所有声明进行排序，有!important标志的声明的权重要高于不带!important标志的声明。
(3) 按来源对应用到给定元素的所有声明进行排序。正常情况下，创作人员的样式要胜过读者的样式。有!important标志的的读者样式要强于所有其他样式，包括有!important标志的创作人员样式。创作人员的样式和读者样式斗都比用户代理的默认样式强。
(4) 按特殊性对应用到给定元素的所有声明进行排序，有较高特殊性的元素权重要大于有较低特殊性的元素。
(5) 按出现顺序对应用到给定元素的所有声明进行排序，后面出现的声明权重要大于前面出现的声明，即后定义的样式会覆盖前面定义的样式。

3.值和单位

1. 颜色

CSS中颜色表示方法有命名颜色、用RGB指定颜色（百分数记法、整数三元组记法）和十六进制RGB颜色，如下表。

颜色	百分数	数值	十六进制	简写十六进制
red	rgb(100%,0%,0%)	rgb(255,0,0)	#FF0000	#F00
orange	rgb(100%,40%,0%)	rgb(255,102,0)	#FF6600	#F60
yellow	rgb(100%,100%,0%)	rgb(255,255,0)	#FFFF00	#FF0
green	rgb(0%,50%,0%)	rgb(0,128,0)	#008000
blue	rgb(0%,0%,100%)	rgb(0,0,255)	#0000FF	#00F

“Web安全”颜色是指，在256色计算机系统上总能避免抖动的颜色。Web安全颜色可以表示为RGB值20%和51（相应的十六进制为33）的倍数，0%和0安全值。比如rgb(40%,60%,100%),rgb(0,204,153)。十六进制使用00,33,66,99，CC，FF都认为是Web安全的。

2. 绝对长度单位

绝对长度单位有英寸(in)，厘米(cm)，毫米(mm)，点(pt)，派卡(pc)。
其中点是标准印刷度量单位，1英寸是72点。派卡也是印刷术语，1派卡是12点。

3. 相对长度单位

相对长度单位有：em、ex、px
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。元素不同则em的值也不同。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
ex是指字体中小写x的高度。如果两段文本，font-size相同但是所用字体不同，则ex的值也可能不同。

参考网页：W3Cschool CSS教程
参考书籍：《CSS权威指南》，作者：Eric A.Meyer