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

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