CSS设计指南笔记(1)

一.CSS基本概念

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

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

1.写在元素标签里(也叫行内样式)
2.写在<style>标签里(也叫嵌入样式)
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规则*{margin:0px auto;padding:0px 0px;}

五.伪类分两种:

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

UI伪类:
1.链接伪类
:link:链接等着用户去点击
:visited:链接已经被点击过
:hover:鼠标指针正悬停在连接上
:active:链接正在被点击(鼠标在元素上按下,还没有释放)
2.:focus伪类
当用户点击元素聚焦时,为该字段添加样式,让用户知道输入的字符会再出现在哪里,例如input:focus{border:1px solid blue;},当光标聚焦于input字段中时,
为该字段添加一个蓝色边框。
3.:target伪类
用户点击一个指向页面中其他元素的链接,则那个元素就是目标,可以用:target伪类选中它
(就是点击锚点跳转到目标后改变目标元素样式吧,例如锚点<a href=”#go”>Go</a>,页面目标<p id=”go”>There</p>,当点击Go跳到页面p标签时,通过伪类#go:target{background:red;}可以改变p标签背景颜色)

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

六.伪元素

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

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