1.CSS认识

在谈论CSS的概念之前，我们先说一说web标准的目的——其在于创建一个统一的用于web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。一个网页的呈现是由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。

而三大部分又是由html、css、js来编写组成的：

结构

HTML

样式

CSS

行为

JS

1.1 CSS的概念及作用

CSS是(Cascading Style Sheets)层叠样式表的缩写 ，简称样式表。

网页设计者使用CSS可以定义元素的样式，包括字体，颜色及其它的高级样式。

采用CSS样式的优点：

1. 提高页面浏览速度。 使用CSS方法，比传统的web设计方法至少节约50%以上的大小。

2. 缩短改版时间，将表现与内容相分离。 只要简单的修改几个CSS文件就可以重新设计一个有成千上万个网页。

3.降低网站流量的费用。带宽要求降低(代码更简洁),成本更低

4.联想容易被搜寻引擎搜索到。 提高网站在百度或google中的排名

5.内容能被更广泛的设备所访问。包括屏幕阅读机，手持设备等。

1.2 CSS的三种基本写法

语法简单说明如下：

单个样式：

样式属性名：样式属性值 ; 比如 color:red;

多个样式：

样式属性名：样式属性值 ; 样式属性名：样式属性值 ;

比如 color:red;font-size:120px;

注意：

1.属性值不需要使用引号括起来，除非属性值是由多个单词组成，如：font-family: "sans serif"；

2.有的属性可以指定多个属性值，多个属性值间以“,”隔开；

3.当定义多个值时，浏览器按照从前向后顺序选择属性值。如果第1个值有效，则尝试使用，如果第1个无效，则使用第2个，依次类推。

①写法一：在标签中的style属性中直接写样式

1 2 

②写法二：在style标签内书写样式，标签可以放在页面的任何位置；推荐写在head、body中

 1  2  3 Insert title here 4  5 13 14 15 

16

③写法三：外部引入样式，实际项目中应用最多，使用link标签进行.css文件外部引用

 1  2  3 Insert title here 4  5  6  7  8  9 

10

.css文件中写入选择器对应的样式列表，如下：

1 @CHARSET "UTF-8";2 div {3 color: red;4 font-weight: bold;5 font-style: italic;6 font-family:楷体;7 }

2.CSS选择器

2.1基本选择器

CSS基本选择器比较简单，主要分为：通用选择器、标签选择器、类选择器、ID选择器四大类。直接上代码看一下就懂了：

 1  2  3 Insert title here 4 34 35 36 41 

42 span样式43 a超链接样式44

2.2其他选择器

CSS其他选择器主要有：多元素选择器、后代选择器、子元素选择器、相邻元素选择器、属性选择器这五大类，具体还是看代码：

 1  2  3 Insert title here 4 47 48 49 55 

56 span样式57

p1标签样式

58 a超链接样式59

66 span样式67

p2标签样式

68 baidu.com
69 taobao.com70

另外独立来说一说伪类选择器，CSS伪类选择器主要用于某些选择器添加特殊的效果。主要在支持CSS的浏览器上对链接的不同状态以不同的方式显示。这些状态包括：活动状态(active)，已被访问状态(visited)，未被访问状态(link)，和鼠标悬停状态(hover)。

1 a:link {color: #FF0000} /* 未访问的链接 */2 a:visited {color: #00FF00} /* 已访问的链接 */3 a:hover {color: #FF00FF} /* 鼠标移动到链接上 */4 a:active {color: #0000FF} /* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

下面以一个a:hover的例子来解释一下伪类选择器的作用：

 1  2  3 Insert title here 4 17 18 19 25 百度网址26 

显示效果如下：

更多CSS伪类知识可以参考：http://www.w3school.com.cn/css/css_pseudo_classes.asp

3. CSS的优先级

CSS样式是有优先级的，具体的样式优先级(渲染顺序)如下：

!important > 行内样式 > id选择器 > 类选择器 > 标签选择器，在选择器优先级(先看优先级)相同的情况下，参照就近原则，具体示例如下代码：

 1  2  3 Insert title here 4  6 23 24 25 

26

4.CSS的继承性

HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素。

HTML中，

是其他元素的容器，是其他元素的最外层元素，所以元素中定义的样式将影响其他所有元素的显示格式。

具体示例如下：

 1  2  3 Insert title here 4  5 13 14 15 21 

24

27

具有继承的CSS属性：

说明

对应属性

文本相关的属性是继承的

text-align、color、text-indent、font-family、font-size、

font-style、font-weight、 letter-spacing、word-spacing、

text-transform、line-height等

列表相关的属性是继承的(ul,ol,li)

list-style、 list-style-image、list-style-position、list-style-type