第 5 章 DIV+CSS

第 5 章 DIV+CSS

知识目标

理解 CSS 盒子模式。熟练掌握 Div 的创建与设置方法。掌握 CSS 规则设置方法。

5.1CSS 样式表概述

为什么用 CSS样式• 如今网页排版格式越来越来复杂，如

果要对多个网页的同样格式一一进行设计，那么就会给制作人员带来很多的工作量，所以解决办法是采用 CSS样式来一次性对若干个文档的格式进行控制。


什么是 CSS样式• CSS（ Cascading Style Sheet ，层叠样

式表）技术是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。


什么是 CSS样式CSS 样式存于样式表文件中，然后在多个

网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。

5.1CSS 样式表概述认识 CSS面板

显示所有样式显示当前样式

内部样式表

样式名称

样式及属性值

5.2 CSS 的分类• 外部链接样式表 (External linking css): 实际上是一

个仅包含样式规则的外部文本文件，其后缀名为“ CSS” ，当编辑此文件时，所有与此样式表链接的文档将全被更新。

• 内嵌式样式表 (Embedded CSS) ：嵌在 HTML 代码的 <style> 标记之间。

• 内联式样式表 (Inlink CSS): 直接在某一 HTML 标记后添加样式代码。

• 优先程度：内联式 > 内嵌式 > 外部链接

（ 1 ）显示“ CSS 样式”面板的方式：打开“窗口”菜单——“ CSS”样式（ 2 ）样式视图

CSS 样式面板

CSS样式在网页中的三种存在方式

• 外部文件方式： CSS 以文件的形式存在，在 HTML 文档头通过文件引用进行控制。

CSS 文件的引用是在 <head></head> 标签之间写下列语句 :

<link rel=“stylesheet” href=“ 文件名 .CSS” type=“text/css”>

链接与导入的区别

（ 1） link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式， link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS ，定义 rel 连接属性等， @import就只能加载 CSS（ 2 ）当一个页面被加载的时候（就是被浏览者浏览的时候）， link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载（ 3）@import是 CSS2.1 提出的所以老的浏览器不支持，link 不存在这个问题；所以，目前使用 link 链接 .CSS 是个不错的选择！！！

不以文件的形式存在 , 仅作用于本文档 , 直接定义在

<head></head> 之间 .<Style type=“text/css”><!—P{font-family:“ 宋体” font-size:9pt;color:blue}H2{font-family: “ 宋体” ;font-size:13pt;color:red}--></style>

内嵌样式

直接插入式• 只需要在每个 HTML 标签后书写 CSS

属性。作用范围只限于本标签。• <table style=“color:red;font-

size:10pt”> 在统一站点风格上，用第一方式

，在某个网页风格统一上，用第二种方式，而在网页内部某个标签的具体调整上，用第三种方式。

如果是新建 CSS 文件 , 有两种方法 :方法一 : 可以通过菜单”文件 / 新建 /CSS 样式”方法二 : 通过进入 CSS 面板 , 点击右下角的”新建 CSS 样式”

接下来 , 我们来看第二种方法

创建新的 CSS 样式

• 创建自定义样式 ( 也就是选择器类型中选择”类” ) ：名称须以 . 开头，并且可以包含任何字母和数字组合。例如 .myhead1 。如果您没有输入开头的句点， Dreamweaver 将自动为您输入。

在”定义在 :” 的选项中 , 有两个选择 , 第一个表示新建 CSS 文件 , 这时 , 你在刚才的”名称 :” 后面的文本框中输入的就是 CSS 文件名 ; 如果你选择”仅对该文档” , 则是以形如” .myhead1” 方式出现在代码中 .

• 重定义 HTML 标签：重定义特定 HTML 标签的默认格式。对文档中的任何标签都可以应用 CSS 样式 .

• acronym 从字义上理解，是取首字母的缩写词， abbr 是缩写，在应用过程中，两个标签看起来差不多，但还是有区别的。

<acronym title="css">Cascading Style Sheets</acronym>

<abbr title="ps">photoshop</abbr>上面这两行代码是放在页面中的 . 然后再设置 abbr或acronym 标签注意 :IE6 中可能不支持 ,IE7支持

• 更多的 HTML 标签的信息请浏览附录 :html标记大全

• 选择高级：重新定义一些标签的特定组合格式。共有四种 :a:link, a:visited, a:hover,a:active

• a:link 当文字作为链接时 , a:visited 当其链接的网页已被浏览时 , a:hover 表示光标移向链接文字时 ,a:active 当超链接文字被选中时

• 在网页中练习这四种的效果

• 外部：将以文件的形式存在。• 仅对该文档：内嵌式样式。

CSS的属性• 字体： font-family• 大小： font-size• 粗细： font-weight• 样式： font-style• 行高： line-height• 修饰： text-decoration• 颜色： color

CSS 中的单位和值

• 16 进制颜色如 #ffffff ， #07dc0f• 长度（ 1 ）绝对单位：英寸 (in)、厘米 (cm ）、毫米（ mm ）、磅（ pt ）、 pica=12pt

（ 2 ）相对单位： em—相对于字体的 font-size ex—相对于小写字母 x 的高度 px— 像素，最常用

定义层叠样式表• 类型：定义 CSS 样式的基本类型设置。• 背景：对 CSS 样式的背景设置进行定义，可以对网页中的任

何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。

• 区块：精确定义整段文本中文字的字距、对齐方式等属性。 • 方框：可以定义特定元素的大小及其与周围元素的间距等属性

。 • 边框面板：可以对控制元素周围边界的样式属性进行定义。• 列表面板：定义列表的样式属性。• 定位面板：定义层的样式属性。• 扩展样式面板：主要是用来控制那些不被大多数浏览器所支持

的功能。

CSS 的盒模型（ BOX Model ）

margin ：边距，四个方向为 margin-top，margin-right，margin-bottom，margin-left

border ：边框，四个方向为 border-top， border-right， border-bottom， border-left

padding ：填充，四个方向为 padding-top， padding-right， padding-bottom， padding-left

content ：主体内容

Div+CSS — 问题探究

Div与 CSS相结合来进行网页布局，已成为网页设计领域一大亮点。在 Dreamweaver CS3 中如何实现这一设计理念呢？ Div 标签一般用来定义网页上的一个特定区域，将文字、图片和表格等各种网页元素放在此区域里，再用 CSS 对该 <Div> 标签定义的区域进行定位和样式的设置。 CSS 样式表不但是定义页面样式的良好工具，同时它所具有的精确定位对象的控制能力又使其成为不可多得的网页布局工具，为了提高设计效率，可以事先定义好布局所需的 CSS 样式规则，然后在“插入 Div 标签”中应用。使用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器。


Div+CSS布局设计思路 • 用 Div 来定义语义结构；• 用 CSS 来美化网页，如加入背景、线条边框、对齐属性等；

• 在这个 CSS 定义的盒子内加上内容，如文字、图片等。


典型的版面实例该实例采用分栏结构，即页头、导航栏、内容、版权四部分组成。

Div+CSS排版结果图


Div+CSS 标准的优点1. 符合W3C 标准。微软等公司均为 W3C 支持者，这样可以保证

您的网站不会因为将来网络应用的升级而被淘汰。2. 结构清晰，容易被搜索引擎搜索到，天生优化了 seo ；3. 提高易用性，可以一次设计，随处发布。支持浏览器的向后兼

容，几乎在所有的浏览器上都可以使用。4. 表现和内容相分离。这也用 CSS布局的特色所在，网页由内容

构成，而将网页设计部分剥离出来放在一个独立样式文件中，代码变得更简洁，使页面和样式的更新变得更加方便，提高了网页下载速度。

5. Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起。而 Div 更能体现样式和结构相分离，结构的重构性强。

Div+CSS — 构建任务

工作流程

1. 在站点中新建一个页面并保存。2. 插入一个 Div并设置相关 CSS 规则，使之成为外部容器。

3. 根据事先拟好的布局草图，定制四个 Div 标签并分别设置相关 CSS 规则。

4. 在各 Div窗口中插入相应页面元素。5. 检查整个布局效果并加以调整，保存并预览布局效果。

ID 与类的区别• 在 CSS 中，类选择符是一个半角英文句点（ . ）之前，而 id 则是半角英文井号（ #）

• 一个 id名称在一个页面里面通常是唯一定义的 ,因此在页面里定义 css通常建议使用class,这样你可以重复使用你的 css. 而把 id留给最需要使用 html元素的 javascript等

SPAN

• span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与 CSS结合使用的话， span 可以对文档中的部分文本增添视觉效果。

• 举例 :<p>早睡早起使人健康、富裕又聪颖。 </p>• 假设我们想将健康 ,富裕 ,聪颖这三个词用红色显示 . 我们可以用 <span> 标签来标记 , 然后，我们将这几个 span 设置为相同的 class 。这样，我们稍后就可以在样式表里针对这个 class 定义特定的样式。

• <p>早睡早起使人 <span class="benefit">健康 </span>、 <span class="benefit"> 富裕 </span> 和 <span class="benefit"> 聪颖</span>。 </p>

• 相应的 CSS 代码如下：• span.benefit { color:red; } • 示例程序见 d:/test/span-exe.html

SPAN与 DIV

• span 的使用局限在一个块元素内，而 div 可以被用来组织一个或多个块元素。

• 让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表：

• <div id="democrats"> <ul> <li>富兰克林 ·D·罗斯福 </li> <li>哈利 ·S·杜鲁门 </li> <li>约翰 ·F·肯尼迪 </li> <li>林登 ·B·约翰逊 </li> <li>吉米 ·卡特 </li><li> 比尔 ·克林顿 </li> </ul> </div>

• <div id="republicans"> <ul>

<li>德怀特 ·D·艾森豪威尔</li>

<li> 理查德 ·尼克松 </li> <li>杰拉尔德 ·福特 </li> <li>罗纳德 ·里根 </li> <li>乔治 ·布什 </li> <li>乔治 ·W·布什 </li> </ul> </div>

• 可以定义样式如下 :#democrats { background:blue; } #republicans

{ background:red; }

网页预览效果

div+css参考网站 http://www.csscool.cn http://www.52css.comhttp://www.csszengarden.com/

http://www.csscool.cn/

http://www.csscool.cn/

http://www.52css.com/

本章练习题1. 选择题（ 1） CSS 样式选择器的类型有（）。A ．标签、类、文本　 B ．类、标签、图像　C ．类、标签、高级　 D． FLASH 、类、 ID（ 2 ）在“页面属性”设置中，不能设置的样式为（）。A ．背景颜色 B ．背景图像 C ．字体大小 D ．图像边框（ 3 ）对特定 ID 的属性设置 CSS 样式时，选择器命名时，在名称前

必须加（）。A． . （英文状态的句点） B．@ C． # D ．？2. 简答题• 定义 CSS 样式有什么好处？• 什么是 CSS 样式？分为哪几类？• 如何调用 CSS 样式？

课堂作业• 对上海凯泉生物科技有限公司主页 (http://

www.kaiquanbiotech.com/qyjs.htm)的 CSS 样式导出为独立文件。

<style type="text/css"></style>

Documents

第 5 章 DIV+CSS