KJ009 GUI网页设计课件(CSS)v1.0

第2章 CSS基础教学目标1. 理解CSS在页面风格设计中的作用。

2. 掌握样式表的定义与使用方法。

3. 掌握如何定义选择符，了解CSS3新增的选择器。

4. 理解长度单位与颜色设置方法。

5. 掌握盒子模型。

6. 了解CSS3实现圆角边框与块阴影的方法。

2教学内容2.1 理解CSS2.2 样式表的定义与使用2.3 选择符2.4 长度单位与颜色设置方法2.5 盒子模型2.6 圆角边框与块阴影教学重点和难点重点：选择符、盒子模型。

难点：选择符的复合使用。

导入：查看新浪等网站网页的CSS代码。

分析网页使用CSS的方法。

2.1 理解CSS2.1.1 CSS的简介CSS（Cascading Style Sheet，层叠样式表）。

样式就是格式，对于网页来说，像网页显示的文字的大小、颜色以及图片位置等，都是网页显示的样式。

层叠就是指当HTML文件引用多个CSS样式时，如果CSS的定义发生冲突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循“最近优先原则”。

CSS能将样式的定义与HTML文件内容分离。

只要建立定义样式的CSS文件，并且让所有的HTML文件都来调用CSS文件所定义的样式。

如果要改变HTML文件中任意部分的显示风格时，只要把CSS文件打开，更改样式即可。

2.1.2 CSS构造CSS就是包含一个或多个规则的文本文件。

这些规则通过属性和值来决定网页中的元素应该如何显示。

CSS属性可以控制基本格式（如字体、尺寸和颜色等）和布局（如定位和浮动），还可以决定元素的显示和关闭等。

1. 构造样式规则样式表的每个规则都有两个主要部分：选择器（selector）和声明（declaration）。

选择器决定哪些因素要受到影响，声明由一个或多个属性值对组成。

基本语法：selector{属性:属性值[[;属性:属性值]…]}语法说明：（1）selector表示希望进行格式化的元素；（2）声明部分包括在选择器后的大括号中；（3）用“属性:属性值”描述要应用的格式化操作；（4）声明中的多个属性值对之间必须用分号隔开。