使用CSS样式表美化和布局网页

教学时间：本章共分_______课时
教学方法
案例教学
多媒体教学
理论面授
教学素材
课程范例文件：sample\第6章\
练习文件：exercise\第6章\
6.1 了解CSS样式表
CSS（Cascading Style Sheet，层叠样式表 ）是一种制作网页必不可少的技术之一，现在已 经为大多数的浏览器所支持。实际上，CSS是一 系列格式规格或样式的集合，主要用于控制页面 的外观，是目前网页设计中的常用技术与手段。
6.3.8 设置扩展样式
“扩展”样式属性包含两部分。
6.3.9 设置过渡样式
在过去的几年中，大多数都是使用JavaScript 来实现过渡效果。使用CSS可以实现同样的过渡效 果。过渡效果最明显的表现就是当用户把鼠标悬停 在某个元素上时高亮它们，如链接、表格、表单域 、按钮等。过渡可以给页面增加一种非常平滑的外 观。
CSS具有强大的页面美化功能。通过CSS， 可以控制许多仅使用HTML标记无法控制的属性， 并能轻而易举地实现各种特效。
6.2 CSS的使用
在制作网页时，对文本的格式化是一件很烦 琐的工作。利用CSS样式不仅可以控制一篇文档 中的文本格式，而且可以控制多篇文档的文本格 式。因此使用CSS样式表定义页面文字，将会使 工作量大大减小。一些好的CSS样式表的建立， 使我们可以更进一步地对页面美化及文本格式进 行精确定制 。
第6CSS
教学内容：CSS层叠样式表，是在网页制作过 程中普遍用到的技术，现在已经为大多数浏览 器所支持，成为网页设计必不可少的工具之一。 使用CSS技术，可以更轻松、有效地对页面的 整体布局、字体、图像、颜色、背景和链接等 元素实现更加精确的控制，完成许多使用HTML 无法实现的任务。
• 学习目标
• 熟悉CSS样式表 • 掌握CSS的基本语法 • 掌握添加CSS的方法 • 掌握CSS属性的设置 • 掌握CSS+DIV布局的四大核心
教学目标和基本要求
___________________________________
___________________________________
___________________________________
6.4.4 定位
position的原意为位置、状态或安置。在CSS布局 中，position属性非常重要，很多特殊容器的定位必须 用position来完成。position属性有4个值，分别是 static、absolute、fixed和relative，static是默认值， 代表无定位。
6.3.1 设置CSS类型属性
在CSS样式定义对话框左侧的【分类】列表框 中选择“类型”选项，在右侧可以设置CSS样式的 类型参数 。
6.3.2 设置CSS背景属性
使用【CSS规则定义】对话框的“背景”类别 可以定义CSS样式的背景设置。可以对网页中的任 何元素应用背景属性 。
6.3.3 设置区块样式
6.4.3 浮动
float属性定义元素在哪个方向浮动。以往这个属 性应用于图像，使文本围绕在图像周围，不过在CSS 中，任何元素都可以浮动。浮动元素会生成一个块级 框，而不论它本身是何种元素。float是相对定位的， 它会随着浏览器的大小和分辨率的变化而改变。float 浮动属性是元素定位中非常重要的属性，常常通过对 div元素应用float浮动来进行定位 。
CSS的“方框”类别可以为控制元素在页面上 的放置方式的标签和属性定义设置。
6.3.5 设置边框样式
CSS的“边框”类别可以定义元素周围边框的 设置 。
6.3.6 设置列表样式
CSS的“列表”类别为列表标签定义列表设置 。
6.3.7 设置定位样式
CSS的“定位”样式属性使用“层”首选参数 中定义层的默认标签，将标签或所选文本块更改为 新层 。
6.4使用CSS+Div布局的4大核心
CSS＋Div是网站标准中常用的术语之一， CSS和Div的结构被越来越多的人采用，它的好处 很多，可以使结构简洁，定位更灵活，CSS布局 的最终目的是搭建完善的页面架构。下面介绍使 用CSS+DIV布局的核心知识 。
6.4.1 盒子模型
如果想熟练掌握Div和CSS的布局方法，首先要对 盒子模型有足够的了解。盒子模型是CSS布局网页时 非常重要的概念，只有很好地掌握了盒子模型以及其 中每个元素的使用方法，才能真正的布局网页中各个 元素的位置 。
6.2.1 CSS的基本语法
CSS是一系列样式的集合，使用CSS可以有效 地分离页面的内容与格式，从而减少网页设计的工 作量。下面简要介绍CSS样式的基本语法和添加方 法。CSS的语法结构仅由3部分组成，分别为选择符 、样式属性和值。基本语法如下：
选择符{样式属性：取值；样式属性：取值；样 式属性：取值；…… }。
所有页面中的元素都可以看作一个装了东西的盒 子，盒子里面的内容到盒子的边框之间的距离即填充 （padding），盒子本身有边框（border），而盒子边 框外和其他盒子之间，还有边界（margin） 。一个盒 子由4个独立部分组成 。
6.4.2 标准流
标准流就是标签的排列方式，就像流水一样，排 在前面的标签内容前面出现，排后面的标签内容后面 出现 。
使用【CSS规则定义】对话框的“区块”类别 可以定义标签和属性的间距和对齐设置，对话框中 左侧的【分类】列表中选择“区块”选项，在右侧 可以设置相应的CSS样式 。
6.3.4 设置方框样式
使用【CSS规则定义】对话框的“方框”类别 可以为用于控制元素在页面上的放置方式的标签和 属性定义设置。可以在应用填充和边距设置时将设 置应用于元素的各个边，也可以使用【全部相同】 设置将相同的设置应用于元素的所有边。
6.2.2 添加CSS的方法
在HTML文档中添加CSS的方法主要有4种， 1．链接外部样式表 2．导入外部样式表 3．内部样式表 4．内嵌样式表。
6.3 设置CSSFra Baidu bibliotek性
控制网页元素外观的CSS样式用来定义字体、 颜色、边距和字间距等属性，可以使用 Dreamweaver来对所有的CSS属性进行设置。CSS 属性被分为9大类：类型、背景、区块、方框、边框 、列表、定位、扩展和过滤 。