第8章应用CSS样式美化网页

1、第第8 8章章 应用应用CSS样式美化网页样式美化网页 一、一、 CSS基础CSS（Cascading Style sheets，层叠样式表）是一种制作网页的新技术，主要用来指定布局、字体、颜色、背景以及其他一些图文元素的格式。CSS现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，尤其是在设计者面对有数百个网页的站点时，大大减少了重复劳动的工作量。CSS样式一般分为内部样式表文件和外部样式表文件两种类型。用内容样式表文件创建的样式只对当前文档起作用，外部样式表文件保存在外部，但可以链接到当前文档中

2、。外部样式应用于多个文档，且生成专门的的*.css文件。CSS样式最大的优点就是它能自动更新，当应用了CSS格式后，如果不满意，仅修改CSS样式即可更改所有的应用。1.1.创建创建CSSCSS样式样式（1）选择“窗口”-“CSS样式”（快捷键为Shift+F11）命令，打开“CSS样式”面板。（2）单击“CSS样式”面板中的“新建规则样式”按钮，打开“新建CSS样式”对话框。或者选择“文本”-“CSS 样式”-“新建”，来打开“新建CSS样式”对话框。对话框中各项功能说明如下：1）“类（可应用于任何标签）”，生成一个新的样式。制作完毕后，可以在样式面板中看到制作完成的样式。在应用的时候，首先在

3、页面中选中对象，然后选择样式即可。2）“标签（重新定义特定标签的外观）”：将现有的HTML标签赋上样式。制作完毕后不需要选中对象就可以直接应用到页面中。二、创建和应用样式表二、创建和应用样式表3）“高级（ID、上下文选择器等）”：为具体某个标签组合或所有包含特定ID属性的标签定义格式。在“选择器”文本框中输入一个或多个HTML标签，或从弹出式菜单中选择一个标签。弹了的菜单中提供的标签包含a:active、a:hover、 a:link、a:visited。其中a:active表示超级链接文本被激活时显示样式，a:hover表示光标移动到超级链接文本时显示样式，a:link表示正常的未被访问过的

4、超链接文本的显示样式，a:visited表示被访问过的超链接文本的显示样式。4）名称：指定CSS样式的名称。类名称必须以句点开头，并且可以包含任何字母和数字组合（如，.myhead1）。如果没有输入开头的句点，Dreamweaver 将自动输入它。5）定义在：指定第一个选项“新建样式表文件”时所建立的CSS样式以外部文件的方式存在，在其它文档中也可以应用该CSS样式。指定第二个选项“仅对该文档”时所建立的CSS样式存在于当前文档之中，只能应用于当前文档。（3）单击“确定”按钮，弹出CSS规则定义对话框。（4）在CSS规则定义对话框中设置相应的参数，单击“确定”即完成CSS样式的建立。 2 2应

5、用应用CSSCSS样式样式(1)在文档中，选择要应用 CSS 样式的文本。 将插入点放在段落中以便将样式应用于整个段落。如果在单个段落中选择一个文本范围，则 CSS 样式只影响所选范围。若要指定要应用 CSS 样式的确切标签，请在位于“文档”窗口左下角的标签选择器中选择标签。(3)执行下列操作之一。 l在“CSS 样式”面板（“窗口”-“CSS 样式”）中，选择“所有”模式，右键单击要应用的样式名称，然后从上下文菜单选择“应用”。l在文本属性检查器中，从“样式” 菜单中选择要应用的类样式。l在“文档”窗口中，右键单击 (Windows) 或按住 Control 单击 (Macintosh) 所

6、选文本，在上下文菜单中选择“CSS 样式”，然后选择要应用的样式。l打开“文本”-“CSS 样式”，在子菜单中选择要应用的样式。如果要应用的CSS样式为外部样式表（即其他文档中定义的“新建样式表文件”），则需先添加进外部样式表。具体方法为：在需应用外部样式表的文档中，打开菜单“文本-CSS样式-附加样式表”，弹出链接外部样式表对话框。点击“浏览”按钮，选择需要链接到该文档的CSS样式表（此处为redapple.css）；单击“确定”按钮。此时在“文本CSS样式”的子菜单中，可以看到刚刚链接进来的redapple样式。在该文档中可以直接应用redapple样式。3.3.重命名样式重命名样式l在“

7、CSS 样式”面板中，右键单击要重命名的 CSS 类样式，然后选择“重命名类”。 或者：通过从“CSS 样式”面板选项菜单中选择“重命名类”来重命名类。l在“重命名类”对话框中，确保要重命名的类是在“重命名类”弹出菜单中选择的类。 l在“新建名称”文本框中，输入新类的新名称，然后单击“确定”。 4.4.从选定内容删除从选定内容删除CSSCSS样式样式(1)选择要从中删除样式的对象或文本。 (2)在文本属性检查器（“窗口”-“属性”）中，从“样式”弹出菜单中选择“无”。 5.5.编辑编辑CSSCSS样式样式CSS 样式表通常包含一个或多个规则。可以使用“CSS 样式”面板编辑 CSS 样式表中的

8、各个规则，如果您喜欢，也可以直接在 CSS 样式表中操作。(1)在“CSS 样式”面板（“窗口”“CSS 样式”）中，选择“所有”模式。 (2)在“所有规则”窗格中，双击要编辑的样式表的名称。 (3)在“文档”窗口中，根据需要修改样式表，然后保存样式表。 三、定义三、定义CSSCSS属性属性CSS规则定义对话框中的属性说明如下：1“类型”中的各属性说明：(1)字体：为样式设置字体系列（或多组字体系列）。浏览器使用用户系统上安装的字体系列中的第一种字体显示文本。为了与 Internet Explorer 3.0 兼容，首先列出 Windows 字体。两种浏览器都支持字体属性。 (2)大小：定义文

9、本大小。可以通过选择数字和度量单位选择特定的大小，也可以选择相对大小。使用像素作为单位可以有效地防止浏览器扭曲文本。两种浏览器都支持大小属性。 (3)样式：指定“正常”、“斜体”或“偏斜体”作为字体样式。默认设置是“正常”。两种浏览器都支持样式属性。 (4)行高：设置文本所在行的高度。习惯上将该设置称为行高。选择“正常”自动计算字体大小的行高，或输入一个确切的值并选择一种度量单位。两种浏览器都支持行高属性。 (5)修饰：向文本中添加下划线、上划线或删除线，或使文本闪烁。常规文本的默认设置是“无”。链接的默认设置是“下划线”。将链接设置设为无时，可以通过定义一个特殊的类去除链接中的下划线。两种浏

10、览器都支持修饰属性。 (6)粗细：对字体应用特定或相对的粗体量。“正常”等于 400；“粗体”等于 700。两种浏览器都支持粗细属性。 (7)变体：设置文本的小型大写字母变体。Dreamweaver 不在“文档”窗口中显示此属性。Internet Explorer 支持变体属性，但 Navigator 不支持。 (8)大小写：将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。两种浏览器都支持大小写属性。2 2“背景背景”中的各属性说明中的各属性说明(1)背景颜色：设置元素的背景颜色。 (2)背景图像：设置元素的背景图像。 (3)重复 ：确定是否以及如何重复背景图像。两种浏览器都支

11、持重复属性。“不重复”只在元素开始处显示一次图像。“重复”在元素的后面水平和垂直平铺图像。“横向重复”和“纵向重复”分别显示图像的水平带区和垂直带区。图像被剪辑以适合元素的边界。(4)附件：确定背景图像是固定在其原始位置还是随内容一起滚动。注意，某些浏览器可能将“固定”选项视为“滚动”。Internet Explorer 支持该选项，但 Netscape Navigator 不支持。 (5)水平位置和垂直位置：指定背景图像相对于元素的初始位置。3 3“区块区块”中的各参数说明中的各参数说明(1)单词间距：设置字词的间距。(2)字母间距：增加或减小字母或字符的间距。若要减小字符间距，请指定一个负

12、值（例如 -4）。字母间距设置覆盖对齐的文本设置。 (3)垂直对齐：指定应用此属性的元素的垂直对齐方式。 (4)文本对齐：设置文本在元素内的对齐方式。两种浏览器都支持“文本对齐”属性。 (5)文字缩进：指定第一行文本缩进的程度。可以使用负值创建凸出，但显示方式取决于浏览器。(6)空格：确定如何处理元素中的空格。从三个选项中进行选择：“正常”，收缩空白；“保留”，其处理方式与文本被括在 pre 标签中一样（即保留所有空白，包括空格、制表符和回车）；“不换行”，指定仅当遇到 br 标签时文本才换行。Dreamweaver 不在“文档”窗口中显示此属性。(7)显示 ：指定是否以及如何显示元素。“无”

13、指定到某个元素时，它将禁用该元素的显示。 4.“4.“方框方框”中的各参数说明中的各参数说明(1)宽和高：设置元素的宽度和高度。 (2)浮动：设置其它元素（如文本、AP Div、表格等）在围绕元素的哪个边浮动。 (3)清除：定义不允许 AP 元素的边。如果清除边上出现 AP 元素，则带清除设置的元素将移到该元素的下方。 (4)填充：指定元素内容与元素边框之间的间距（如果没有边框，则为边距）。取消选择“全部相同”选项可设置元素各个边的填充。 (5)全部相同：为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的填充属性。 (6)边距：指定一个元素的边框与另一个元素之间的间距（如果没有边框，

14、则为填充）。仅当该属性应用于块级元素（段落、标题、列表等）时，Dreamweaver 才会在“文档”窗口中显示它。取消选择“全部相同”可设置元素各个边的边距。 (7)全部相同：为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边距属性。 5.“5.“边框边框”中的各参数说明中的各参数说明(1)样式：设置边框的样式外观。样式的显示方式取决于浏览器。Dreamweaver 在“文档”窗口中将所有样式呈现为实线。两种浏览器都支持样式属性。取消选择“全部相同”可设置元素各个边的边框样式。 (2) “样式”中全部相同：为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框样式属性。

15、(3)宽度：设置元素边框的粗细。两种浏览器都支持“宽度”属性。取消选择“全部相同”可设置元素各个边的边框宽度。 (4) “宽度”中全部相同：为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框宽度。 (5)颜色：设置边框的颜色。可以分别设置每条边的颜色，但显示方式取决于浏览器。取消选择“全部相同”可设置元素各个边的边框颜色。 (6)“颜色”中相同：为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框颜色。 6 6“列表列表”中的各参数说明中的各参数说明(1)类型：设置项目符号或编号的外观。两种浏览器都支持“类型”。 项目符号图像：使您可以为项目符号指定自定义图像。单击“

16、浏览”(Windows) 或“选择”(Macintosh) 通过浏览选择图像，或键入图像的路径。 (2)位置：设置列表项文本是否换行并缩进（外部）或者文本是否换行到左边距（内部）。 7 7“定位定位”中的各参数说明中的各参数说明(1)类型：确定浏览器应如何来定位选定的元素。 (2)可见性：确定内容的初始显示条件。如果不指定可见性属性，则默认情况下内容将继承父级标签的值。body 标签的默认可见性是可见的。其中“继承”（默认）继承内容的父级可见性属性。“可见” 将显示内容，而与父级的值无关。“隐藏” 将隐藏内容，而与父级的值无关。(3)Z 轴：确定内容的堆叠顺序。Z 轴值较高的元素显示在 Z 轴

17、值较低的元素（或根本没有 Z 轴值的元素）的上方。值可以为正，也可以为负 (4)溢出：确定当容器（如 DIV 或 P）的内容超出容器的显示范围时的处理方式。 (5)位置：指定内容块的位置和大小。(6)剪辑：定义内容的可见部分。如果指定了剪辑区域，可以通过脚本语言（如 JavaScript）访问它，并操作属性以创建像擦除这样的特殊效果。使用“改变属性”行为可以设置擦除效果。 8 8“扩展扩展”中的各参数说明中的各参数说明(1)分页：在打印期间在样式所控制的对象之前或者之后强行分页。在弹出菜单中选择要设置的选项。此选项不受任何 4.0 版本浏览器的支持，但可能受未来的浏览器的支持。 (2)光标：当

18、指针位于样式所控制的对象上时改变指针图像。在弹出菜单中选择要设置的选项。Internet Explorer 4.0 和更高版本以及 Netscape Navigator 6 支持该属性。 (3)过滤器：对样式所控制的对象应用特殊效果（包括模糊和反转）。从弹出菜单中选择一种效果。过滤器中包括很多特殊的效果，各类效果及参数说明如下：1)Alpha：透明效果。可以使图像呈现出透明效果，共有七种参数，opacity为不透明度，范围是0100，0表示完全透明，100表示完全不透明。Finishopacity为结束时的不透明度，它用来设定图像结束时的不透明度，利用它可以制作出透明渐进的效果，取值范围同opacity。Style为样式，用来指定图像渐变的类型，0表示没有渐变，1表示直线渐变，2表示圆形渐变，3表示矩形渐变。startX和startY表示渐变开始的X、Y坐标值。finishX和finishY表示渐变结束的X、Y坐标值。2)BlendTrans：渐隐渐现效果。参数duration用来设定渐隐渐现的时间，以秒为单位。3)Bl