1.起源

早起HTML最初只作为结构化标记语言，但随着人们对页面展现需求的不断增加，迫于无奈只能增加一些类似font、big之类的展现类的标签。随后出现一片混乱，页面被大量的table和font标签充斥，毫无语义。页面为了和设计保持一致，页面的结构只能做出妥协，结构化的HTML从此是路人。这样会引发几个问题：

• 非结构化的页面简历索引困难，不利于搜索引擎检索
• 降低可访问性
• 高级页面只能应用某种结构
• 不利于维护

既要使用结构化的标签，又要展示丰富的样式，基于以上的这些问题，一颗璀璨的明星CSS应运而生了，W3C于95年提出计划，96年已经演化为推荐草案。HTML负责结构，CSS负责展现。

2.CSS的几大特点

• 丰富的样式，具备更丰富的表现力，可以修改任何元素的外观
• 易用，集中定义规则，容易维护，可以被多个页面引用
• 可以层叠，可继承
• 结构、表现分离，减少html页面大小
• 可兼容未来web发展

3.元素

3.1替换元素和非替换元素

3.1.1替换元素

替换元素包含例如img，input，可以理解为显示的内容并非来自文档本身内容。

3.1.2非替换元素

非替换元素包含例如span、div等几乎所有元素

3.2元素显示角色

包含块级元素和行内元素

3.2.1块级元素

块级元素默认会生成一个元素框，默认会填充父元素的内容区，旁边不能有其他元素。会在元素之前和之后生成分隔符。特例：列表项会生成一个标记符，此标记符会关联到元素框。例如div、p

3.2.2行内元素

行内元素不会在自身前后生成分隔符。例如a、strong、em。一般而言，XHTML中块级元素是不能嵌套在行内元素里面的（块级元素不能继承行内元素，反之可以）。display的默认值为inline

3.3CSS的引入方式

3.3.1link标记

格式如：<link rel="stylesheet" href="example.css" type="text/css" media="all" / >，添加到head标签内部。外部的样式文件中只能包含样式和注释，如果包含标签，则样式内容部分会被忽略。

属性：rel（relation）为stylesheet，type为加载的数据类型，href为资源地址。media表示支持的媒体，常见的3种，all、screen、print，多个属性使用逗号分隔。

rel为alternate stylesheet(候选样式表)，此时link需要指定title，浏览器会显示带有指定title的样式表，以供用户切换，link中的title一般不指定，如果为多个首选样式表增加title，结果只能加载其中一个样式。

3.3.2style元素

格式如：<style type="text/css">具体样式、@import外部样式</style>

import指令：import url(sheet.css);

import必须出现在css规则之前，无法加载候选样式表，对于link和import的分析，见http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

<style type="text/css"><!-- import url();--></style>，当老版本浏览器无法识别style标签，标签内部的内容也不显示