CSS设计指南笔记（1）

一.CSS基本概念

当元素的同一个样式属性有多种样式值的时候，css就要靠层机制来决定最终应用哪种样式。CSS(Cascading Style Sheets),也叫层叠样式表，就是一种先选定html元素，然后给该元素设定css属性的一种机制。css选择符和要应用的样式构成一条css规则。

二.给文档添加样式的三种方法

1.写在元素标签里（也叫行内样式）2.写在标签里（也叫嵌入样式）3.写在单独的样式表中（也叫链接样式）

三.CSS规则命名惯例：

CSS规则由选择符和声明组成，选择符用于指出规则所要选择的元素，而声明包括属性和值，属性指规则要改变元素的哪方面的样式，而值就是属性的一个新状态

四.三种选择符：

1.上下文选择符，css规范里，严格来讲，叫后代组合式选择符（descendant combinator selector）2.ID和类选择符3.属性选择符特殊的上下文选择符：1.子选择符 >标签1 > 标签2标签2必须是标签1的子元素，或者说标签1必须是标签2的父元素2.紧邻同胞选择符 +标签1 + 标签2标签2必须紧挨在其同胞标签1后面3.一般同胞选择符 ~标签1 ~ 标签2标签2必须跟在其同胞标签1后面4.通用选择符 *匹配任何元素，像我们平时常用的css规则*

五.伪类分两种：

1.UI伪类UI伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式2.结构化伪类结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式

UI伪类：1.链接伪类:link:链接等着用户去点击:visited:链接已经被点击过:hover:鼠标指针正悬停在连接上:active:链接正在被点击（鼠标在元素上按下，还没有释放）2.:focus伪类当用户点击元素聚焦时，为该字段添加样式，让用户知道输入的字符会再出现在哪里，例如input:focus，当光标聚焦于input字段中时，为该字段添加一个蓝色边框。3.:target伪类用户点击一个指向页面中其他元素的链接，则那个元素就是目标，可以用:target伪类选中它(就是点击锚点跳转到目标后改变目标元素样式吧，例如锚点

Go

,页面目标

There

,当点击Go跳到页面p标签时，通过伪类#go:target可以改变p标签背景颜色)

结构化伪类：例如：1.:first-child和last-child2.:nth-child(n)，n表示一个数值，也就是标签的索引（也可使用odd或even,分别代表奇数和偶数）

六.伪元素

顾名思义，伪元素就是你的文档中若有实无的元素，也就是添加了一个无形的标签(用firebug看不到标签，但它确实存在，这就是伪元素)例如：1.::first-letter伪元素:选中文本段落的首字符2.::first-line伪元素:一般用来选中文本段落的第一行3.::before和::after伪元素:用于在特定元素前面或后面添加特殊内容

注意：一个冒号(:)表示伪类，两个冒号(::)表示CSS3新增的伪元素。尽管浏览器目前都支持对CSS1和CSS2的伪元素使用一个冒号，但是以后单冒号伪元素可能会被淘汰掉，所以最好习惯使用双冒号。