《网页设计与制作》课程讲义

《网页设计与制作》课程讲义

第十六讲 使用DIV+CSS格式化网页

课堂回顾：我们制作网页的重要步骤就是能够布局好网页，也就是将设计好的网页设计图分割成一个个单元格，然后将每部分图片与文字等网页信息添加到布局好的结构中，在之前我们使用的布局方法是使用表格。使用表格布局网页，加以在html标记中进行各个部分的属性设置构成了我们的网页。那么当前较为流行的制作网页的另一个方法就是用 DIV+CSS格式化网页。那么我们如何用DIV+CSS格式化网页？使用这种方法格式化网页有什么优越的地方呢？下面我们将通过制作网页实例的对比来学习和参照一下两者之间制作网页的区别。

在前面的章节中学习了基本的网页元素，及其对应的HTML标签的语法。但对于网页设计者来说，仅学会这些是不够的。在Web 2.0标准中，HTML语言只用于定义网页的结构。要制作出漂亮且符合规范的网页，还需要使用CSS样式表来表现网页的外观。本章将介绍CSS的基本概念，以及通过CSS控制网页元素，如文字外观、背景设置和元素定位等。

新课学习要点提示： 一、 CSS基本概念

CSS是Cascading Style Sheets的缩写，中文译为层叠样式表，用于控制或增强网页外观样式，并且可以与网页的内容相分离。CSS 1.0是W3C工业合作组织首次发布于1997年，用于对HTML语言功能的补充。1998年又推出了CSS 2，进一步增强了HTML的语言功能。但由于浏览器之间的差异，对CSS的支持并不完全兼容。本书讲解的CSS主要针对

IE用户。

二、CSS功能介绍及优点

在Web早期，网页一般用于技术交流，HTML只用于描述结构和内容。但随着Web的流行与发展，漂亮的外观变得格外重要。随着网页越来越复杂，HTML代码变得越来越繁杂，大量的标签堆积起来变得难以阅读和理解。

此时CSS的出现为这种状况提供了解决之道。CSS还原了HTML语言原本的描述结构功能，不仅实现了美化页面，还使页面结构变得简洁合理且清晰可读。简单了解CSS用于表现网页，控制或增强网页的外观。 三、引用CSS

既然CSS有如此强大的功能，那么在网页中如何进行引用？一般有下列4种方法：

1、将外部样式表链接到HTML文件上。 2、将外部样式表导入到HTML文件中。 3、将样式表内嵌HTML文件中。 4、将样式表内联到HTML文件行中。

这里我们重点学习一下第一种，将css样式表作为独立的样式文件与html文档进行关联进行网页制作。

外联样式表就是把外部的样式表文件链接到网页上，从而在网页中使用样式表。此方法通过标签实现，关于标签在前面的章节中有详细的介绍。将标签加入到标签之间，具体格式如下：