Dreamweaver 网页设计与制作教程 ch06

1、第6章 CSS样式 本章主要内容是CSS样式的创建方法和它的应用， 并就如何编辑CSS样式中的文字格式、背景格式、文 本块格式、方框格式、边框格式、列表格式、定位格 式、扩展格式等作了详细的讲解，最后以一个实例说 明了如何应用CSS样式对网页进行编辑。 6.1 CSS样式概述 CSS是层叠样式表（Cascading Style Sheets）的简 称，利用它可以对网页中的文本内容进行精确的格式化控 制。CSS样式不仅能够控制一篇文档中的文本样式，而且 通过采用外部链接的方式，还可以控制多篇文档的文本格 式。对CSS样式的定义进行修改时，文档中所有应用该样 式的文本格式也会自动发生改变。 CSS

2、样式通常用名称或是HTML标记来表示，HTML文 档中的CSS样式不仅可以控制大多数传统的文本格式属性， 如字体、字号和对齐方式等，还可以定义一些特殊的HTML 属性，例如定位、特效和鼠标轮替等。 CSS样式的定义代码一般书写在HTML文档的头部，通 常由一系列样式的定义组成。它可以应用到使用标注HTML 标记所格式化的文本上，可以定义到通过class属性所定义 范围的文本上，也可以应用到其他的那些符合CSS标准规 范的文本上。 利用Dreamweaver，用户不需要了解CSS复杂烦琐的 语法，就可以创建出具有专业风格的CSS样式。不仅如此， Dreamweaver还能够识别现存文档中定义的C

3、SS样式，更 加方便用户对现有的文档进行修改。 使用CSS，可以将样式和结构分离；能以前所未有的能 力控制页面的布局；可以制作体积更小下载更快的网页；可 以更快更容易地维护及更新大量的网页；还可以使浏览器称 为更友好的界面。 使用CSS样式的缺点在于，它需要有较高版本的浏览器， 使用Internet Explorer 4.0或Netscape Navigator 4.0， 才能够正确地显示带有CSS样式的网页。 就CSS应用的形式来分，CSS一般可以分为两类：嵌入 式，即在独立的文档中应用CSS样式；和外部链接式，它可 以应用于多个文档，生成专门的*.css文件。 6.2 创建CSS样式 CS

4、S样式最大的优点是 它具有自动更新功能，当应 用了CSS格式之后，如果不 满意，仅需要修改CSS样式 就可以更新所有的应用，而 不用像设置HTML样式那样一 个一个地修改。 6.2.1 创建新CSS样式 其操作步骤如下： 1) 在Dreamweaver中，单 击“窗口”“CSS样式”， 打开CSS 样式面板如图6-1 所示。 图6-1 CSS 样式面板 2) CSS样式面板显示 在设计浮动面板组，单 击面板组右上角的“显 示菜单”按钮 ，弹 出下拉菜单如图6-2所 示。 图6-2 CSS样式的下拉菜单 3) 从其中选择“新建”选项卡。或者单击CSS样式面 板右下角的【新建CSS样式】按钮 ，打

5、开如图6-3所 示的新建样式对话框。 图6-3 新建样式对话框 4) 选择CSS样式类型： “类（可应用于任何标签）”，可以生成一个新的样式 表，制作完毕后可以在样式面板中看到制作完成的样式。在 应用的时候，首先在页面选中对象，然后选择样式即可。该 类型样式名称必须以英文句点“.”开头，如果没有输入句点， Dreamweaver会自动添加在“名称”文本框中。它是唯一 可以被应用于文档中任何文本的样式类型，而不用考虑控制 文本的标签。所以可用于类样式的名称都将显示在样式工具 栏中。 选择“标签（重新定义特定标签的外观）”，可以将现 有的标签赋上样式，制作完毕以后不需要选中对象就可以直 接应用到页

6、面上去。 5) 定义一个外部连接的CSS还是定义一个仅应用于当前文 档的CSS。 “自定义”：定义一个外部连接的CSS。 “仅仅对该文档”：定义的CSS样式只能在当前文档中 使用。 6) 单击【确定】按钮， 出现保存样式表对话 框，如图6-4所示。 图6-4 保存样式表 7) 选择样式表所保存的 位置，单击【保存】按 钮，出现CSS设置对话 框如图6-5所示，进行相 应的属性设置，单击 【确定】，一个CSS样 式创建成功。 图6-5 CSS设置对话框 6.2.2 应用CSS样式 1. 如果要在文档中应用样式 操作方法如下： 1) 将插入点放置在段落之中，即选择了整个段落，可 以对其设置格式；也

7、可以选中多个段落，对多个段落 设置格式；选择某些字符还可以对这些字符设置格式。 2) 在CSS样式面板中，用鼠标点击某个定义好的样式， 则该CSS样式就会应用在这些文档上。 2. 应用外部链接式CSS样式 1) 打开CSS样式面板。 2) 单击CSS样式面板右下角的【附加样式表】按钮， 出现如图6-6所示“链接外部样式表”对话框。 3) 单击【浏览】按钮，从所保存的CSS文件中选取一 个，即可应用。 图6-6 “链接外部样式表”对话框 3. 在现有样式的基础上 创建新样式 1) 在CSS样式面板上， 选中作为基础的样式。 2) 单击CSS样式面板右 上角的“显示菜单”按钮， 打开面板菜单；或者

8、在面 板中单击鼠标右键，打开 快捷菜单，如图6-7所示。 图6-7 CSS样式的快捷菜单 3) 选择“重制”命令，系统弹出如图6-8所示对话框，并 显示该样式的设置。 4) 在对话框中选择新样式的类型和定义，输入新的名称。 5) 单击【确定】按钮，确定操作。 图6-8 “重制CSS样式”对话框 4. 删除某个样式 在CSS样式面板上，选中要删除的样式。单击 CSS样式面板右上角的“显示菜单”按钮，打开面板 菜单；或者在面板中单击鼠标右键，打开快捷菜单， 选择“删除”命令。或者单击面板菜单右下角的“删 除CSS样式”命令按钮。将删除被选择样式，同时该 样式从样式列表中消失。 6.3 设置CSS样

9、式格式 在Dreamweaver中，通过CSS样式定义对话框可以对 CSS样式格式进行精确定制，在CSS面板上新建CSS样式时 可以进行设置，或者通过可以打开如图6-5所示CSS样式定 义对话框，从中可以看出，CSS共有8个选项。 6.3.1 编辑文字格式 在CSS样式定义对话框中单击左边的“类型”，右边区 域显示可以设置的有关文字格式方面的CSS样式。其中： 1)字体：可以在下拉菜单中设置当前样式所用的字体。 2)大小：，设置字体的大小。可以通过选择数字和单位来指 定字体，如“磅”、“像素”、“英寸”、“厘米”等，也 可以选择相对的字体大小，如“极小、“特小”等。 3)样式：通过选择“正常”

10、、“斜体”或“偏斜体”来设置 字体的特殊格式， 4)行高：设置文本的行高。选择“正常”，则由系统自动计 算字体的行高和大小；也可以通过输入一个精确的数值并选 择其计算单位，来具体指定行高。 5)粗细：对字体应用指定的或相对的粗细度，有“正常”、 “粗体”、“特粗”和“细体”等。其中“正常”等于400， “粗体”一般为700。 6)变量：允许设置字体的变体形式，有“正常”和“小型大 写字母”。 7)大小写：可以设置字符的大小写方式。“首字母大写”， 可以指定将每个单词的第一个字符大写；“大写”或“小写” 可以分别将别选择的文本设置为大写或小写；“无”保持字 符本身原有的大小写格式。 8)修饰：可

11、以设置字体的一些修饰格式。“下划线”、“上 划线”、“删除线”、“闪烁”和“无”。 9)颜色：用于设置文字的颜色。 6.3.2 编辑背景格式 在CSS样式定义对话框中单击左边的“背景”，右边区 域显示可以设置CSS样式的背景格式，如图6-9所示。 图6-9 编辑CSS样式背景格式 其中： 1)背景颜色：设置样式的背景颜色。 2)背景图像：设置作为样式背景的图像文件所在的URL地址： 单击【浏览】按钮可以从磁盘中选择某一个图像文件。 3)重复：可以设置是否允许背景图像被重复。“不重复”只 在应用样式的元素开始部分显示一次图像；“重复”在应用 样式的元素背景上纵向和横向重复显示该图像；“横向重复”

12、 相应的显示图像的横向重复延伸；“纵向重复”相应的显示 图像的纵向重复延伸。 4)附件：设定当拖动浏览器滚动条浏览滚动页面时，背景图 像是固定在它的原始位置，还是同内容一起滚动。“固定” 表明背景图像固定在原始位置；“滚动”表明背景图像可以 滚动。 有些浏览器会将固定方式始终作为滚动方式来处理。 5)水平位置和垂直位置：设置背景图像相对于文档窗口的水 平和垂直位置。 6.3.3 编辑文本块格式 在CSS样式定义对话框中单击左边的“区块”，右边 区域显示可以设置CSS样式的区块格式，如图6-10所示。 图6-10 编辑CSS样式的块格式 1)单词间距：可以在文字直接添加空格。可以输入一个数 值，

13、并在其右方的下拉列表中选择设置数值的单位；如果 输入负值，显示的效果会由浏览器来决定。该选项会受到 页边距调整的影响。 2)字母间距：可以在字符直接添加空格。如果输入负值， 其显示由浏览器决定。该选项可以覆盖由页边调整产生的 字母之间的多余空格。 3)垂直对齐：可以设置各元素相对于上一级的纵向对齐方 式。如果输入数值，显示的是一个百分比。除了应用于 IMG标签的情况，该设置不会显示在Dreamweaver的文 档窗口中。 4)文本对齐：设置文本中元素的对齐方式。 5)文字缩进：设置文本首行缩进的距离。如果输入为负值 时等于创建了文本凸出（反缩进），其显示取决于浏览器。 只有当标签应用于文本块时

14、，该设置才会显示在 Dreamweaver的文档窗口中。 6)空格：设置在应用样式元素时空格的处理方法。 “正常”表示按照正常的方法处理空格，多个空格当 做一个空格来对待；“保留”表示保留所有的原始空 格形象，比如空格、跳格和回车符等，都作为文本用 PRE标签包围；“不换行”表示设定文本不会自动换 行，只有使用换行标记BR才换行。该设置不会显示在 Dreamweaver的文档窗口中。 7)显示：可以设置哪些元素被显示以及如何显示。 6.3.4 编辑方框格式 在CSS样式定义对话框中单击左边的“方框”，右边 区域显示可以设置CSS样式的框格式，如图6-11所示。 图6-11 编辑CSS样式框格式

15、 其中： 1)宽和高：设置元素的大小尺寸。选择“自动”由浏览 器自行控制；输入一个数值，并在其右边的下拉列表中 选择数值的单位，可以固定元素的大小和尺寸。只有在 被应用于图像或层时，Dreamweaver的文档窗口中才 会显示该属性。 2)浮动：设置元素的的浮动位置。页面不并移动，将元 素放置在页面边缘的左侧或右侧时，其他元素会围绕该 元素。只有在被用于IMG标签时，才会在 Dreamweaver的文档窗口中显示该属性。 3)清除：定义元素的某个边侧不允许有层出现。如果分 层出现在被设置清除的元素的一边，该元素会被移动到 层的下面。只有在被用于IMG标签时，才会在 Dreamweaver的文档

16、窗口中显示该属性。 4)填充：定义元素的内容和边框之间的空间大小。该设置不 会显示在Dreamweaver的文档窗口中。 5)边界：定义元素边缘和其他元素之间的空间大小。只有在 被应用于文本块一类的元素时，才会在Dreamweaver的文 档窗口中显示该属性。 6.3.5 编辑边框格式 在CSS样式定义对话框中单击左边的“边框”，右边区 域显示可以设置CSS样式的边框格式，如图6-12所示。 其中： 1)样式：设置边框的样式，“点划线”表明边框是点线形， “虚线”表明边线是虚线形。通过上、右、下和左可以分别 设置四个边的风格，“全部相同”表示四边边框线的风格一 致。 2)宽度：定义应用该样式的

17、元素边框的宽度。细、中、粗和 数值可以作为相应的宽度选项。 3)颜色：可以设置边框对应位置的颜色。 图6-12 编辑CSS样式边框格式 6.3.6 编辑列表格式 在CSS样式定义对话框中单击左边的“列表”，右边区 域显示可以设置CSS样式的列表格式，如图6-13所示。 其中： 1)类型：在下拉列表中，可以选择无序列表或者有序项目的 符号或编号的外观类型。 2)项目符号图像：可以设置以图片作为列表项目的符号。通 过直接在文本框中输入图片文件的URL地址，或单击【浏览】 按钮，从磁盘上选择图片文件。 3)位置：可以设置列表项换行时是缩进还是边缘对齐。 图6-13 编辑CSS样式列表格式 6.3.7

18、 编辑定位格式 在CSS样式定义对话框中单击左边的“定位”，右边区 域显示可以设置CSS样式的定位格式，如图6-14所示。 其中： 1)类型：在下拉列表中，可以选择设置浏览器中分层的放置 方式。 “绝对”使用在Placement框中输入的相对于页面左上 角的绝对坐标放置分层。 “相对”使用在Placement框中输入的坐标放置分层， 该坐标是相对于文档中的对象位置。 “静态”将层定位在文本自身的位置。 图6-14 编辑CSS样式定位格式 2) 宽和高：设置层的位置和大小。 3)定位：指定层的位置和大小。它的具体使用依赖于类型部 分的设置，分为上、右、下和左四个部分。 4) 显示：决定层的初始显

19、示状态，如果没有设置该属性，在 默认状态下，大多数浏览器将继承其上级的值。 “继承”继承层的上一级的可见性属性。 “可见”显示各个分层的内容，而不考虑其上级元素。 “隐藏”隐藏层的内容，而不考虑其上级元素。 5) Z轴：在下拉列表中可以选择定义分层的叠放顺序。编号 高的分层显示在编号低的分层之上。其数值可以为正也可以 为负。 6)溢出：如果在分层中的内容超出了分层的边界，在此决定 处理方式。 可见：当分层中的内容超出分层的边界时，分层会自动 向下或向右扩展它的大小，以容纳分层的内容，使之可见。 隐藏：当分层中的内容超出分层的边界时，分层大小不 变，也不出现滚动条，超出边界的内容不显示。 滚动：

20、无论分层中的内容是否超出分层范围，分层上总 会出现滚动条，利用滚动条进行浏览。 自动：在分层中的内容超出分层的边界时，出现滚动条 以便显示所有分层内容。 7) 剪辑：可以定义分层可见部分的位置和大小。如果指定 了碎片区域，可以通过脚本语言如JavaScript来对其进行操 作，例如可以输入其属性以创建特殊效果。 6.3.8 编辑扩展格式 在CSS样式定义对话框中单击左边的“扩展”，右 边区域显示可以设置CSS样式的扩展格式，如图6-15所 示。 图6-15 编辑CSS样式扩展格式 扩展样式更多的是对自定义功能的扩展，可能不被 某些浏览器所支持。其中： 1)分页：可以设置在打印页面时强制分页的位

21、置。在“之 前”和“之后”的下拉列表中，可分别设置分页前和分页 后的位置。此属性只有4.0以上版本的浏览器支持。 2) 视觉效果：可以设置样式的一些可视效果。 光标：用于设置当鼠标掠过被样式控制的对象时的指 针外观。如选择hand，鼠标指针会变为“手形”，只有 4.0及其以上版本的浏览器支持此属性。 过滤镜：在其下拉菜单中选择需要的特效，对被样 式控制的对象指定特殊的效果，包括模糊和反转，只有 4.0及其以上版本的浏览器支持此属性。 利用编辑CSS样式对话框可 以对CSS样式进行编辑。其步骤如 下： 1) 在样式面板空白处单击鼠标右 键，从弹出的菜单中选择“编辑” 命令；或者从CSS面板菜单的

22、右下 角处选择【编辑样式】按钮。打开 如图6-16所示编辑样式对话框。 2) 选择要编辑的样式，单击【编 辑】按钮，打开如图6-15所示选 择编辑CSS样式对话框。 3) 选中要编辑的样式，可以链接 外部样式表，可以新建一个样式， 可以编辑、复制和删除CSS样式。 图6-16编辑样式对话框 6.4 编辑管理CSS样式 6.5 将CSS样式转换为HTML标记 CSS样式只能在4.0或更高版本的浏览器中显示，如果 想让更多版本的浏览器支持，就需要将其转换为标准的 HTML标记，使网页具有更好的兼容性。其操作步骤如下： 1) 在Dreamweaver中选择菜单“文件”“转 换”“XHTML”,将会打

23、开一个新的Dreamweaver窗口，并 装载转换后的HTML标记。 2)不是所有的CSS代码都可以成功地转换为HTML标记，任 何不能替换为HTML标记的CSS标记都将会被忽略。表6-1显 示了CSS样式和HTML标记之间的转换关系。 CSS属性 转换为 color font color font-family font face font-size font size=1- 7 font-style:oblique i font-style:italic i font-weight b list-style- type:square ul type= square list-style- type:circle ul type=circle 表6-1 CSS样式和HTML标记之间的转换关系 list-style-type:upper-roman ol type=I list-style-type:lower-roman ol type=i list-style-type