CSS（Cascading Style Sheets）：层叠样式表，又叫级联样式表，简称样式表

CSS实现了将结构与表现分离

提高了代码的可重用性和可维护性


CSS与XHTML之间的关系

XHTML用于构建网页的结构

CSS用于构建HTML元素的样式

XHTML是结构，CSS样式是表现


XHTML属性与CSS样式的使用原则

W3C建议尽量使用CSS样式取代XHTML属性

如果属性为XHTML特有属性，则使用XHTML属性

如果属性为CSS样式特有属性，则使用CSS样式属性


链接到外部CSS文件

创建CSS文件，并且书写CSS规则

-CSS文件的拓展名.css

链接到外部CSS文件

在HTML文档的<head>元素内添加<link/>元素

<link type="text/css" rel="stylesheet" media="媒体类型" href="" />


书写于头部文档中

在<head>元素内部书写<style>元素

在<style>元素中添加样式规则

<style type="text/css">

h2 {color:blue;}

</style>


书写于标记内部

内部CSS样式是通过XHTML标记的style属性来实现的

<p>普通段落</p>

<p >段落（内部样式）</p>


CSS应用方式的优先级

内联样式最高

内部样式其次

外部样式最低

内部样式和外部样式冲突的话，取决于二者的书写顺序


CSS选择器

类型选择器

类型选择器也被称为元素选择器

类型选择器匹配文档树中的特定的HTML元素

<style>p{text-align:left;color:red;}</style>

类选择器

类选择器以点开头，类名称不能以数字开头。

类选择器匹配使用指定类的元素

类选择器的使用通过元素的class属性来实现

多个类名称之间以空格分隔

<style>.class{text-align:left;color:red;}<style>span.class{text-align:left;color:red;}

仅对具有class属性的span元素生效

ID选择器

ID选择器以#开头

ID选择器匹配文档中的唯一元素

ID选择器的使用通过HTML元素的ID实现

注：某HTML元素存在ID属性，那么该ID可以应用于

-CSS样式

-JavaScript

-jQuery

群组选择器

群组选择器是具有相同属性的选择器的简写方式

选择器之间以逗号分隔


后代选择器

后代选择器也被称为派生选择器

依据元素在其位置的上下文关系来定义样式

后代选择器要求选择器之间至少存在父子关系

选择器之间以空格分隔


子代选择器

依据元素在其位置的上下文关系来定义样式

后代选择器要求选择器之间只能存在父子关系

选择器之间以大于号分隔


伪类选择器

CSS伪类用于向某些选择器添加特殊的效果

CSS伪类选择器的语法是：

选择器：伪类选择器

CSS伪类选择器可以分为

-动态元素

-UI元素状态伪类

动态伪类是基于HTML元素的特征进行分类

动态伪类不能出现在文档源代码或者文档树

动态伪类又可以分为

-链接伪类

：link，适用于尚未访问的链接

：visited，适用于访问过的链接

-用户动作伪类，用于呈现用户操作

：hover，用户指定HTML元素

：active，HTML元素被用户激活

：focus，应用于HTML元素获取焦点

a:link{color:red;text-decoration:none;}a:visited{color:black;text-decoration:underline;}

UI元素状态伪类

：enabled，表示处于启用状态的UI元素

：disabled，表示处于禁用状态的UI元素

：checked，表示被选定的UI元素


伪元素选择器

CSS伪元素用于向某些选择器设置特殊效果

：before，用于在呀un苏的内容前面插入新内容

：after，用于在元素的内容后面插入新内容


选择器的优先级

选择器类型

权值

类型选择器0,0,0,1伪元素选择器0,0,0,1类选择器0,0,1,0伪类选择器0,0,1,0ID选择器0,1,0,0内联样式1,0,0,0


选择器的权值加到一起，大的优先；如果权值相同，后定义的优先