CSS基础(一)

• 简介
• 语法
• 样式加载方式
• 选择器（符）
• 权重

---

简介

CSS英文名称：cascading style sheets。

CSS中文名称：层叠样式表。

WEB标准中的表现标准语言,作用是修饰网页信息的显示样式。

1996年由W3C正式推出的css1。

1998年由W3C正式推出的css2。

目前推荐遵循的是W3C发布的CSS3.0。

用来表现XHTML或者XML等样式文件的计算机语言 。

语法

选择符{属性：属性值；属性：属性值；}

说明：

(1)每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值。

(2)属性必须放在花括号中，属性与属性值用冒号连接。

(3)每条声明用分号结束。

(4)当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。

(5)在书写样式过程中，空格、换行等操作不影响属性显示。

样式加载方式

内联样式

语法：

<标签 style="属性：属性值;属性:属性值;"></标签>

内部样式

语法：

<style type="text/css">    css语句</style>

注释： type属性可以省略。

外部样式

语法1：

<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />

语法2：

<style type="text/css">@import url(目标文件的路径及文件名全称);</style>

说明(ink和import导入外部样式的区别):

(1)来源的差别。link是XHTML的标签，@import是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。

(2)加载顺序差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。

(3)兼容性差别。@import只在IE5以上的浏览器才能被识别，而link标签无此问题。

(4)使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

选择器（符）

常用的选择符有十种左右，包括类型选择符，id选择符，class选择符，通配符，群组选择符，包包含选择符，伪类选择符，伪对象选择符等。

(1)元素选择符/类型选择符（element选择器 )

语法：

语法:元素名称{属性:属性值;}

说明：

(1)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body,div,p,img,em,strong,span……
(2)所有的页面元素都可以作为选择符。

用法：

(1)如果想改变某个元素得默认样式时，可以使用类型选择符。
(2) 当统一文档某个元素的显示效果时，可以使用类型选择符。

(2)id选择器

语法：

#id名{属性：属性值;}

说明：

(1)当我们使用id选择符时，应该为每个元素定义一个id属性。
(2)id选择符的语法格式是“#”加上自定义的id名。
(3)起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)。
(4)一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。

用法：

(1)创建网页的外围结构。

(3)class选择器(符)

语法：

.class名{属性：属性值;}

说明：

(1)当我们使用类选择符时，应先为每个元素定义一个类名称。

用法：

(1)class选择符更适合定义一类样式。

(4)群组选择器

语法：

选择符1，选择符2，选择符3......{属性：属性值;}

说明：

(1)当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。

(5)包含选择器

语法：

选择符1 选择符2{属性：属性值;}

说明：

(1)选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2。

(6)通配符

语法：

*{属性：属性值；}

说明：

(1)通配选择符的写法是“*”，其含义就是所有元素。

用法：

(1)常用来重置样式。
(2)*{margin:0; padding:0}将所有元素的边界值和填充值清0。

权重

css中用四位数字表示权重，权重的表达方式如：0，0，0，0。

类型选择符的权重为0001

class选择符的权重为0010

id选择符的权重为0100

子选择符的权重为0000

属性选择符的权重为0010

伪类选择符的权重为0010

伪元素选择符的权重为0001

包含选择符的权重：为包含选择符的权重之和

内联样式的权重为1000

继承样式的权重为0000