外部样式表和html优先级,CSS语法、三种样式表及优先级、css选择器

1.1、css简介

cascading style sheets 汉译:层叠样式表

WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式

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

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

1998年5月21日由w3C正式推出的css2.0

div+css的优点：

缩减页面代码，提高访问速度;

代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验会更好

结构清晰，有利于seo

有利于搜索引擎优化

缩短改版时间

对网站的重构有很好的支持

弥补html语言的不足

说明：

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

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

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

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

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

2.1、css样式表

1、内部样式表(嵌套到html页面中)

2、内联样式(行间样式，行内样式，嵌入式样式)

3、引用外部样式表文件

外部样式的建立及调用：

步骤1:外部样式表的创建

步骤2:外部样式表的导入

*link和import导入外部样式的区别：

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

差别2：加载顺序的差别：当一个页面被加载的时候(就是被浏览者浏览的时候)，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。

差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只t在IE5以上的才能识别，而link标签无此问题。

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

**

3.样式表的优先级

**4.样式表的作用域

内联样式只对当前标签起作用；

内部样式只对当前文件起作用；

外部样式对所有连接的页面都起作用；

CSS选择器

常用的选择符有十种左右：

类型选择符(标记选择器)

类选择符 (class选择符)

ID选择符 (id选择器)

伪类选择器

群组选择符(集合选择器)

通配符(*)

子选择符

包含选择符(后代选择器)

1.元素选择符/类型选择符

元素名称 { 属性：属性值；} 如p{background:red;}

说明：

①元素选择符即使用结构中元素名称作为选择符。如body、div、p,img,em,strong,span…等。

②所有的页面元素都可以作为选择符;

③使用元素选择器，会把文档中所有的标签都加相同的样式；

如：a｛background:red｝ 所有a的背景颜色都是红色

2.id选择器

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

说明：

①使用ID选择器时需给元素定义id属性；

②在css样式表中写id选择器时，id名称前加#；如：#box{width:300px; height:300px;}

③ 起id名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)；如：head标记

④一个id名称只能对应文档中一个具体的元素；

3.class选择器/class选择符

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

说明：

①使用类选择符时需为元素定义一个class属性；

②一个class属性可以起多个名字；

4.群组选择器

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

说明：当有多个选择符应用相同的样式时，可以使用群组选择器；

5.包含选择器(后代选择器)

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

说明：选择符1和选择符2用空格隔开，选择符1中必须包含的所有选择符2;

6.子元素选择器

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

说明：子元素选择器只能匹配父元素下的第一级子元素

7.伪类选择器(伪类选择符)

a:link{属性：属性值;} 超链接的初始状态;

a:visited{属性：属性值;} 超链接被访问后的状态;

a:hover{属性：属性值;} 鼠标划过超链接时的状态;

a:active{属性：属性值;} 即鼠标按下时超链接的状态

说明：①当四个伪类选择器同时使用时，必须是以上的顺序；

②写网页时一般我们简化使用：如：a{color:red;} a:hover{color:green;}

表示超链接的三种状态都相同，只有鼠标划过变颜色

8.通配符

{属性：属性值；}

说明：通配选择符的写法是“ * ”，其含义就是所有元素。

用法：常用来重置样式。

选择符的权重:

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

类型选择符的权重：0001

class选择符的权重：0010

id选择符的权重：0100

子选择符的权重：0000

属性选择符的权重：0010

伪类选择符的权重：0010

伪元素选择符的权重：0010

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

内联样式的权重：1000

继承样式的权重：0000

注释表示方法：