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