文章简要:
- CSS介绍
- DIV+CSS的优点
- CSS 语法
- CSS新建格式
CSS入门
CSS介绍
CSS(Cascading Style Sheet) 层叠样式表,用于控制网页样式。
WEB标准中的表现标准语言,在网页中主要对网页信息的显示进行控制,简单来说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0版本
用来表现HTML或XML等文件样式的计算机语言。
DIV+CSS的优点
- 缩减页面代码,提高访问速度
- 结构清晰,有利于SEO搜索引擎优化
- 缩短改版时间,对网站的重构有很好的支持
- 弥补HTML语言的不足
CSS 语法
选择符 { 属性:属性值 }
例:p { font-size:12px; color:red; }
说明:
- 每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值;
- 属性必须放在花括号中,属性与属性值用冒号连接;
- 每条声明用分号结束;
- 当一个属性有多个属性值的时候,属性值与属性值部分先后顺序。
- 在书写样式的过程中,空格、换行等操作不影响属性显示。
CSS新建格式
1. 内部样式表
语法
<style type="text/css">
<!-- css语句 -->
</style>
说明
使用 style 标记创建样式时,最好将该标记写在<head></head>
中。
2. 内联样式
语法
<div style="属性1:值1; 属性2:值2; 属性3:值3;……" ></div>
说明
直接写在HTML标签style属性的属性值里。
3. 引用外部样式表文件(两种方式)
1)直接引用(link)
<link href="目标文件的路径及文件名全称" rel="stylesheet" type="text/css" />
使用link元素导入外部样式表时,需将该元素写在文档头部,即<head>
与</head>
之间。
href: CSS文件的路径及文件名全称
rel: 用于定义文档关联,表示关联样式表
type:定义文档类型
2)导入(@import)
<style type="text/css">
@import url("目标文件的路径及文件名全称");
</style>
@和import之间没有空格;
url和小括号之间也没有空格;
括号内部加引号,必须以分号结束。
3)两种方式的区别
- 老祖宗的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS。
- 加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
- 兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只在IE5以上的才能识别,而link标签无此问题。
- 使用dom控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
4. 样式表优先级说明
内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写顺序有关,后书写的优先级别高。