前端开发 之 CSS入门

文章简要：

• 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; }
说明：

1. 每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2. 属性必须放在花括号中，属性与属性值用冒号连接；
3. 每条声明用分号结束；
4. 当一个属性有多个属性值的时候，属性值与属性值部分先后顺序。
5. 在书写样式的过程中，空格、换行等操作不影响属性显示。

---

CSS新建格式

1. 内部样式表

语法

说明
使用 style 标记创建样式时，最好将该标记写在中。

2. 内联样式

语法

说明
直接写在HTML标签style属性的属性值里。

3. 引用外部样式表文件（两种方式）

1）直接引用（link）

使用link元素导入外部样式表时，需将该元素写在文档头部，即与之间。

href： CSS文件的路径及文件名全称
rel： 用于定义文档关联，表示关联样式表
type：定义文档类型

2）导入（@import）

@和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. 样式表优先级说明

内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写顺序有关，后书写的优先级别高。

---