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

注释表示方法：