CSS样式表.ppt

8.1 CSS入门入门n早期的网页一般是由早期的网页一般是由HTML标签控制的标签控制的文本网页，随着文本网页，随着Web的流行与发展，漂的流行与发展，漂亮的亮的外观外观变得越来越重要。变得越来越重要。n一方面一方面HTML在在控制页面格式控制页面格式和外观上和外观上越来越越来越力不从心力不从心；n另一方面另一方面HTML标签中充斥了大量的对标签中充斥了大量的对外观属性的定义，网页要表现的外观属性的定义，网页要表现的“内容内容”与如何与如何“表现表现”内容内容混杂混杂在一起，在一起，HTML代码变得越来越代码变得越来越繁杂繁杂，大量的标，大量的标签堆积在一起，难以阅读和理解。签堆积在一起，难以阅读和理解。8.1 CSS入门入门1996年年W3C（万维网联盟）提出了（万维网联盟）提出了CSS技术规范，它以技术规范，它以HTML语言为基础语言为基础，提供了，提供了丰富的样式丰富的样式。应用了应用了CSS样式的网页，将样式的网页，将样式样式外观设外观设置从置从HTML文档中文档中分离分离出来，使代码清出来，使代码清晰、容易维护。晰、容易维护。CSS一经引入即得到了广泛应用。一经引入即得到了广泛应用。8.1 CSS入门入门CSS是是Cascading Style Sheets（层叠样式表）的简称。主要用于对网页层叠样式表）的简称。主要用于对网页中的文本或某一区块的布局、字体、颜中的文本或某一区块的布局、字体、颜色、背景和特效等进行色、背景和特效等进行精确控制精确控制。CSS可将网页要展示的内容与样式设定可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从分开，也就是将网页的外观设定信息从网页内容中网页内容中独立独立出来，并出来，并集中管理集中管理。要改变网页外观时，只需更改样式设定要改变网页外观时，只需更改样式设定的部分，而的部分，而HTML文件本身并不需要更文件本身并不需要更改。改。8.1.1 “CSS样式样式”面板面板“CSS样式样式”面板是新建、编辑、管理面板是新建、编辑、管理CSS的主要工具。的主要工具。选择选择“窗口窗口”|“CSS样式样式”命令可以打开命令可以打开或者关闭或者关闭“CSS样式样式”面板。面板。“CSS样式样式”面板提供了全部模式和当前面板提供了全部模式和当前模式。模式。全部模式可以跟踪文档可用的全部模式可以跟踪文档可用的所有所有规则和规则和属性。属性。当前模式当前模式可以跟踪影响当前可以跟踪影响当前所选所选页页面面元素的元素的CSS规则和属性。规则和属性。8.1.1 “CSS样式样式”面板面板全部模式下的全部模式下的“CSS样式样式”面面板没有定义板没有定义CSS前，前，“CSS样式样式”面板空白显示。面板空白显示。定义了定义了CSS， “CSS样式样式”面面板中会显示所定义板中会显示所定义好的好的CSS规则。规则。8.1.1 “CSS样式样式”面板面板当前模式下在文档当前模式下在文档编辑区选择了使用编辑区选择了使用CSS样式的元素，样式的元素，“CSS样式样式”面板面板中才能显示这个元中才能显示这个元素当前正在使用的素当前正在使用的CSS规则。规则。8.1.1 “CSS样式样式”面板面板3显示类别视图显示类别视图8.1.2 定义定义CSS规则规则一般情况下，可在一般情况下，可在HTML网页文档（网页文档（内部内部CSS）或和独立的）或和独立的CSS样式表文档（样式表文档（外部外部CSS）中新建）中新建CSS规则。规则。“新建新建CSS规则规则”对话对话新建一个新建一个HTML网页文档，打网页文档，打开开“CSS样式样式”面板，单击面板，单击“新建新建CSS规规则则”按钮按钮 ，弹，弹出出“新建新建CSS规则规则”对话框，对话框，如图所示。如图所示。“新建新建CSS规则规则”对话对话8.1.2 定义定义CSS规则规则（1）在）在“新建新建CSS规则规则”对话框中设置对话框中设置“选选择器类型择器类型”，下拉列表中有，下拉列表中有4个选项，根据个选项，根据所要定义的所要定义的CSS规则的需要任意选择一个规则的需要任意选择一个类型。比如这里保持默认设置类型。比如这里保持默认设置“类（可应类（可应用于任何用于任何HTML元素）元素）”。（2）在）在“选择器名称选择器名称”文本框选择或者输入文本框选择或者输入一个一个CSS规则名称。不同的选择器类型，规则名称。不同的选择器类型，CSS规则名称的命名格式和方法是不一样规则名称的命名格式和方法是不一样的。因为前一个步骤设置的选择器类型是的。因为前一个步骤设置的选择器类型是“类类”，所以这里在，所以这里在“名称名称”文本框中输文本框中输入入.mycss1（名称以点号（名称以点号.开始）。开始）。8.1.2 定义定义CSS规则规则 （3）在）在“规则定义规则定义”下拉列表中有两个选下拉列表中有两个选项，可以设置项，可以设置CSS规则定义在本文档内还规则定义在本文档内还是定义在外部样式表文件中。是定义在外部样式表文件中。8.1.2 定义定义CSS规则规则 （4）单击）单击“确定确定”按钮，弹出按钮，弹出“.mycss1的的CSS规则定义规则定义”对话框。在该对话框中对话框。在该对话框中可以分类设置可以分类设置CSS规则的属性。规则的属性。8.1.2 定义定义CSS规则规则 （5）任意设置一下字体、颜色等属性。单）任意设置一下字体、颜色等属性。单击击“确定确定”按钮即可完成一个按钮即可完成一个CSS规则的规则的定义，这时在定义，这时在“CSS样式样式”面板中就可以面板中就可以看到定义好的看到定义好的CSS规则名称，以及对应这规则名称，以及对应这个个CSS规则的属性列表。规则的属性列表。“CSS样式样式”面板面板8.1.2 定义定义CSS规则规则从从“代码代码”视图中可以看出，视图中可以看出，CSS代码应该位于代码应该位于和和标签之间。定义样式表规标签之间。定义样式表规则的部分用则的部分用和和标签来表示。标签来表示。8.1.3 在网页中应用在网页中应用CSS样式样式套用样式表的方法主要有三种，下面分别进行介绍。套用样式表的方法主要有三种，下面分别进行介绍。1在在“属性属性”面板中选择应用特定的样式面板中选择应用特定的样式打开打开“属性属性”面板，在面板，在“类类”下拉列表框中列出了下拉列表框中列出了已经定义的一些类规则。在已经定义的一些类规则。在ID下拉列表框中列出了下拉列表框中列出了已经定义的一些已经定义的一些ID规则。规则。 8.1.3 在网页中应用在网页中应用CSS样式样式2利用利用“标签选择器标签选择器”选择样式选择样式首先需要在首先需要在“标签选择器标签选择器”上选定一个标签，如图上选定一个标签，如图8-11中的中的标签，然后在标签，然后在标签上右击，标签上右击，在弹出的快捷菜单中选择在弹出的快捷菜单中选择“设置类设置类”|mycss1命命令，则可以快速把已经定义的令，则可以快速把已经定义的mycss1样式指定给样式指定给标签。标签。 8.1.3 在网页中应用在网页中应用CSS样式样式3使用快捷菜单使用快捷菜单也可以从快捷菜单中直接给对象指定一个样式，首也可以从快捷菜单中直接给对象指定一个样式，首先选中对象，右击，在快捷菜单中指定样式。先选中对象，右击，在快捷菜单中指定样式。 8.1.4 CSS规则类型规则类型CSS规则类型包括：规则类型包括：类（可应用于任何类（可应用于任何HTML元素）元素）ID（仅应用于一个（仅应用于一个HTML元素）元素）标签（重新定义标签（重新定义HTML元素）元素）复合内容（基于选择的内容）复合内容（基于选择的内容） 8.1.4 CSS规则类型规则类型1类（可应用于任何类（可应用于任何HTML元素）元素）CSS选择器有类选择器和选择器有类选择器和ID选择器两种。类选择选择器两种。类选择器以英文句点（器以英文句点（.）开头，而）开头，而ID选择器以英文井号选择器以英文井号（#）开头。）开头。 8.1.4 CSS规则类型规则类型2ID（仅应用于一个（仅应用于一个HTML元素）元素）ID选择器又可以称为标识选择器，它的名字选择器又可以称为标识选择器，它的名字以英文井号（以英文井号（#）开头，这种选择器样式一）开头，这种选择器样式一般在页面中只用在一个元素上。般在页面中只用在一个元素上。3标签（重新定义标签（重新定义HTML元素）元素） “标签（重新定义标签（重新定义HTML元素）元素）”，可以实，可以实现用现用CSS重新定义重新定义HTML标签的外观的功能标签的外观的功能。 8.1.4 CSS规则类型规则类型4.复合内容（基于选择的内容）复合内容（基于选择的内容）针对针对标签、标签、标签、标签、标签同时标签同时进行了进行了CSS规则定义。规则定义。 8.1.4 CSS规则类型规则类型复合内容复合内容 “选择器名称选择器名称”下拉列表框中包下拉列表框中包含含4个有关超级链接的选择器名称，利用它个有关超级链接的选择器名称，利用它们可以对超级链接的外观进行重新定义。们可以对超级链接的外观进行重新定义。a:link 超级链接的正常状态。超级链接的正常状态。a:visited 访问过的超级链接状态。访问过的超级链接状态。a:hover 鼠标指针指向超级链接的状态。鼠标指针指向超级链接的状态。a:active 选中超级链接状态。选中超级链接状态。 8.2 CSS样式详解样式详解8.2.1 类型类型类型选项主要是对类型选项主要是对文字文字的字体大小、颜色的字体大小、颜色、效果等基本样式进行设置。、效果等基本样式进行设置。可只对要改变的属性进行设置，不改变的可只对要改变的属性进行设置，不改变的属性就使之为空。这些属性包括：属性就使之为空。这些属性包括： 1Font-family（字体）（字体）2Font-size（字体大小）（字体大小）3Font-style（字体样式）（字体样式） 4. Line-height（行高）（行高）5Text-decoration（修饰）（修饰）8.2.1 类型类型类型选项主要是对文字的字体大小、颜色类型选项主要是对文字的字体大小、颜色、效果等基本样式进行设置。可只对要改、效果等基本样式进行设置。可只对要改变的属性进行设置，不改变的属性就使之变的属性进行设置，不改变的属性就使之为空。这些属性包括：为空。这些属性包括：6Font-weight（字体粗细）（字体粗细）7Font-variant（变体）（变体）8Text-transform（大小写）（大小写）9Color（颜色）（颜色）8.2.2 背景背景背景选项主要是对背景选项主要是对元素背景元素背景进行设置，包进行设置，包括背景颜色、背景图像、背景图像控制。括背景颜色、背景图像、背景图像控制。一般是对一般是对BODY（页面）、（页面）、TABLE（表格（表格）、）、DIV（区域）的设置。（区域）的设置。8.2.2 背景背景8.2.2 背景背景背景属性包括：背景属性包括：1Background-color（背景颜色）（背景颜色）2Background-image（背景图像）（背景图像）3Background-repeat（重复）（重复）4.Background-attachment（附件）（附件）5Background-position（水本位置）（水本位置）6Background-position（垂直位置）（垂直位置）8.2.3 区块区块区块选项是设置对象文本文字间距、对齐区块选项是设置对象文本文字间距、对齐方式、上标、下标、排列方式、首行缩进方式、上标、下标、排列方式、首行缩进等。等。8.2.3 区块区块属性包括：属性包括：1Word-spacing（单词间距）（单词间距）2Letter-spacing（字母间距）（字母间距）3Vertical-align（垂直对齐）（垂直对齐）4. Text-align（文本对齐）（文本对齐）5Text-indent（文字缩进）（文字缩进）6White-space（空格）（空格）7Display（显示）（显示）8.2.4 方框方框方框选项主要设置对象的边界、间距、高方框选项主要设置对象的边界、间距、高度、宽度和浮动方式等。度、宽度和浮动方式等。8.2.4 方框方框属性包括：属性包括：1Width（宽）（宽）2Height（高）（高）3Float（浮动）（浮动）4. Clear（清除）（清除）5Padding（填充）（填充）6Margin（边界）（边界）8.2.5 边框边框边框设置对象边框的宽度、颜色及样式。边框设置对象边框的宽度、颜色及样式。8.2.6 列表列表列表设置列表项样式、列表项图片和位置列表设置列表项样式、列表项图片和位置。8.2.7 定位定位用来确定选定的内容在页面上的定位方式用来确定选定的内容在页面上的定位方式。8.2.7 定位定位属性包括：属性包括：1Position（类型）（类型）2Visibility（显示）（显示）3Z-Index（Z 轴）轴）8.Overflow（溢出）（溢出）5Placement（定位）（定位）6Clip（剪辑）（剪辑）8.2.8 扩展扩展扩展包括分页、光标和滤镜效果选项。扩展包括分页、光标和滤镜效果选项。8.2.8 扩展扩展 1分页分页打印网页时，在样式所控制的对象之前或打印网页时，在样式所控制的对象之前或者之后者之后强行分页强行分页（Page-break-before或者或者Page-break-after）。列表中包括）。列表中包括4个选项：自动、总是、左对齐和右对齐。个选项：自动、总是、左对齐和右对齐。 2Cursor（光标）（光标）当鼠标指针位于样式所控制的对象上时改当鼠标指针位于样式所控制的对象上时改变变鼠标指针的外观鼠标指针的外观。“光标光标”下拉列表中下拉列表中包括一些具体的选项，选择后可以改变鼠包括一些具体的选项，选择后可以改变鼠标指针的视觉效果。标指针的视觉效果。8.2.8 扩展扩展 3Filter（过滤器）（过滤器）对样式所控制的对象应用特殊效果（包括对样式所控制的对象应用特殊效果（包括模糊和反转等滤镜效果）。模糊和反转等滤镜效果）。“过滤器过滤器”下拉列表中包括一些具体的选下拉列表中包括一些具体的选项，这些效果应用到网页中的元素上后，项，这些效果应用到网页中的元素上后，可以得到一种类似于可以得到一种类似于Photoshop的滤镜效的滤镜效果。果。8.3 创建创建CSS样式样式在需要设置单个页面的格式时，可以使在需要设置单个页面的格式时，可以使用用内部样式表内部样式表保存在网页文档内部保存在网页文档内部的样式表。的样式表。在需要同时控制多个文档的外观以便在在需要同时控制多个文档的外观以便在多个页面上实现统一的格式时，可以使多个页面上实现统一的格式时，可以使用用外部样式表外部样式表，这是保存在网页文档外，这是保存在网页文档外部的样式表，它被链接到当前页面。部的样式表，它被链接到当前页面。8.3.1 内部样式表内部样式表内部样式内部样式是那些定义了只使用于是那些定义了只使用于当前文档当前文档的样式。如果用户想定义只在自己站点的的样式。如果用户想定义只在自己站点的一个页面中使用的样式，就可以使用内部一个页面中使用的样式，就可以使用内部样式。样式。下面通过创建下面通过创建CSS样式对网页中的文本进样式对网页中的文本进行格式化。行格式化。（1）用）用Dreamweaver打开网页文档打开网页文档“8.3.1.html”。（2）单击）单击“样式表样式表”面板中的面板中的“新建新建CSS规规则则”按钮按钮 ，弹出，弹出“新建新建CSS规则规则”对话框对话框。8.3.1 内部样式表内部样式表 （3）在）在“选择器类型选择器类型”下拉列表中选择下拉列表中选择“类（可应用于任何类（可应用于任何HTML元素）元素）”，在，在“选择器名称选择器名称”文本文本框里输入要定义的框里输入要定义的CSS样式的名称样式的名称.ziti，在，在“规则定义规则定义”下拉列表中选择下拉列表中选择“仅限该文档仅限该文档”，如图，如图8-23所示。所示。8.3.1 内部样式表内部样式表（4）单击）单击“确定确定”按钮，按钮，“.ziti的的CSS规则定义规则定义”对话框中，选择左边对话框中，选择左边“分类分类”列表框中的列表框中的“类型类型”选项，把选项，把Font-size（字体大小）设为（字体大小）设为12px（像（像素），如图素），如图8-24所示。所示。8.3.1 内部样式表内部样式表（5）选择）选择 “区块区块”选项，把选项，把Text-index设为设为2个个字体高（字体高（ems），如图），如图8-25所示。所示。（6）单击）单击“确定确定”按钮，可在按钮，可在“CSS样式样式”面板看面板看到增加了一个到增加了一个.ziti的的CSS样式，如图样式，如图8-26所示。所示。 图图8-25 设置文字缩进设置文字缩进 图图8-26 “CSS样式样式”面板面板8.3.1 内部样式表内部样式表（7）切换到）切换到“代码代码”视图，可以看到在视图，可以看到在之间新增加了以下代码：之间新增加了以下代码： 这是在这是在HTML文档内部定义的文档内部定义的CSS代码。代码。8.3.1 内部样式表内部样式表（8）切换到）切换到“设计设计”视图。在视图。在“标签选择器标签选择器”上选上选定定body标签，在标签，在body标签上右击，在标签上右击，在弹出的快捷菜单中选择弹出的快捷菜单中选择“设置类设置类”|ziti命令，就命令，就可以把已经定义的可以把已经定义的ziti样式类指定给样式类指定给body标标签。切换到签。切换到“代码代码”视图，可以看到视图，可以看到标标签变成了以下代码：签变成了以下代码： （9）将网页文档另存为）将网页文档另存为“8.3.1(css).html”，用浏览器预览效果。用浏览器预览效果。8.3.1 内部样式表内部样式表（10）在）在“CSS样式样式”面板中，选择面板中，选择.ziti样式，单样式，单击击“编辑样式编辑样式”按钮按钮 ，会弹出，会弹出“.ziti的的CSS规则规则定义定义”对话框。对话框。（11）在）在Line-height（行高）右边的两个下拉列（行高）右边的两个下拉列表中分别选择表中分别选择“值值”、“”选项，然后，再在选项，然后，再在“（值）（值）”文本框中输入数值，这里输入文本框中输入数值，这里输入150%作作为网页文字的行间距，如图为网页文字的行间距，如图8-27所示。所示。8.3.1 内部样式表内部样式表（12）单击）单击“确定确定”按钮。此时网页中的文字行间按钮。此时网页中的文字行间距会自动地调整为定义的样式。距会自动地调整为定义的样式。图图8-27 定义行高定义行高8.3.2 外部样式表外部样式表内部样式表只在一个网页中起作用，如果内部样式表只在一个网页中起作用，如果想制作很多具有统一样式的网页，就必须想制作很多具有统一样式的网页，就必须在每个网页内定义相同的在每个网页内定义相同的CSS样式表。这样式表。这样很麻烦，效率也很低。样很麻烦，效率也很低。外部外部CSS样式表样式表能够较好地解决这个问题能够较好地解决这个问题。先。先建立建立一个外部一个外部CSS样式表文件样式表文件，在这，在这个文件中定义文字、段落、表格、超链接个文件中定义文字、段落、表格、超链接等网页元素的样式。然后在需要的网页上等网页元素的样式。然后在需要的网页上链接链接这个外部这个外部CSS样式表文件样式表文件即可。即可。8.3.2 外部样式表外部样式表（1）在开始页的）在开始页的“新建新建”列表中选择列表中选择CSS选选项，新建一个外部项，新建一个外部CSS文件。将其保存为文件。将其保存为mycss.css。（2）单击）单击“CSS样式样式”面板的面板的“新建新建CSS规则规则”按钮按钮 ，弹出，弹出“新建新建CSS规则规则”对话对话框。在框。在“选择器类型选择器类型”下拉列表中选择下拉列表中选择“类（可应用于任何类（可应用于任何HTML元素）元素）”，在，在“选择器名称选择器名称”文本框里输入要定义的文本框里输入要定义的CSS样式的名称样式的名称. text ，在，在“规则定义规则定义”下拉下拉列表中选择列表中选择“外部外部CSS文档文档”，如图，如图8-28所示。所示。8.3.2 外部样式表外部样式表（3）单击）单击“确定确定”按钮，弹出按钮，弹出“.text的的CSS规则规则定义定义”对话框。在对话框。在“分类分类”列表框中选择列表框中选择“类型类型”选项，定义字体、大小、行高分别为：宋体、选项，定义字体、大小、行高分别为：宋体、12像素、像素、150%，如图，如图8-29 所示。所示。图图8-28 “新建新建CSS规则规则”对话框对话框图图8-29 定义字体、大小和行高定义字体、大小和行高8.3.2 外部样式表外部样式表（4）在）在“分类分类”列表框中选择列表框中选择“区块区块”选项，定义选项，定义对齐方式为顶部（对齐方式为顶部（top）、左对齐（）、左对齐（left），文字），文字缩进为缩进为2字体高，如图字体高，如图8-30所示。所示。图图8-30 定义段落的对齐方式、文字缩进定义段落的对齐方式、文字缩进8.3.2 外部样式表外部样式表（5）单击）单击“确定确定”按钮，完成按钮，完成.text样式的定义。样式的定义。这时的这时的“CSS样式样式”面板如图面板如图8-31所示。所示。CSS文文档的代码内容如图档的代码内容如图8-32所示。所示。 图图8-31 “CSS样式样式”面板面板 图图8-32 mycss.css的代码内容的代码内容8.3.2 外部样式表外部样式表（6）新建）新建CSS规则，在规则，在“选择器类型选择器类型”下拉列表中下拉列表中选择选择“标签（重新定义标签（重新定义HTML元素）元素）”，在，在“选择选择器名称器名称”文本框中输入表格标签文本框中输入表格标签table，在，在“规则规则定义定义”下拉列表中选择下拉列表中选择“仅限该文档仅限该文档”，如图，如图8-33所示。所示。图图8-33 “新建新建CSS规则规则”对话框对话框8.3.2 外部样式表外部样式表（7）单击）单击“确定确定”按钮，弹出按钮，弹出“table的的CSS规则规则定义定义”对话框。选择对话框。选择“分类分类”列表框中的列表框中的“边框边框”选项，然后按照图选项，然后按照图8-34进行设置。进行设置。图图8-34 定义定义table的的CSS规则规则8.3.2 外部样式表外部样式表（8）完成）完成table的的CSS规则定义。规则定义。（9）新建一个）新建一个CSS样式。在样式。在“选择器类型选择器类型” 中选择中选择“复合内容（基于选择的内容）复合内容（基于选择的内容）”，在，在“选择器名选择器名称称” 中选择中选择a:link选项，在选项，在“规则定义规则定义” 中选择中选择“仅限该文档仅限该文档”，如图，如图8-35所示。所示。图图8-35 新建超链接新建超链接CSS样式样式8.3.2 外部样式表外部样式表（10）单击）单击“确定确定”按钮，弹出按钮，弹出“a:link的的CSS规规则定义则定义”对话框，对话框，“分类分类”列表框中选择列表框中选择“类型类型”选项，定义字体、大小、颜色、修饰为：宋体、选项，定义字体、大小、颜色、修饰为：宋体、12像素、像素、 #FFFFFF、无。、无。（11）新建一个）新建一个CSS样式。在样式。在“选择器类型选择器类型”下拉下拉列表中选择列表中选择“复合内容（基于选择的内容）复合内容（基于选择的内容）”，在，在“选择器名称选择器名称”下拉列表中选择下拉列表中选择a:hover选项，选项，在在“规则定义规则定义”下拉列表中选择下拉列表中选择“仅限该文档仅限该文档”。8.3.2 外部样式表外部样式表（12）单击）单击“确定确定”按钮后，在按钮后，在“a:hover的的CSS规则定义规则定义”对话框对话框“分类分类”列表框中选择列表框中选择“类型类型”选项，定义颜色为：选项，定义颜色为：#000000；在；在“分类分类”列表列表框中选择框中选择“背景背景”选项，定义背景颜色为：选项，定义背景颜色为：#00FF00。单击。单击“确定确定”按钮，完成超链接样式按钮，完成超链接样式的定义。的定义。（13）选择）选择“文件文件”|“保存保存”，保存，保存CSS文件。这文件。这时的时的CSS代码为：代码为： charset utf-8;/* CSS Document */.text 8.3.2 外部样式表外部样式表font-family: 宋体宋体;font-size: 12px;line-height: 150%;text-align: left;text-indent: 2em;vertical-align: top;table border: 1px dotted #FF9900;a:link font-family: 宋体宋体;font-size: 12px;color: #FFFFFF;text-decoration: none;8.3.2 外部样式表外部样式表2 2链接外部链接外部CSSCSS样式表样式表（1）在浏览器中查看一下，发现没有应用外）在浏览器中查看一下，发现没有应用外部部CSS样式表时网页效果（网页文件样式表时网页效果（网页文件8.3.2.html），如图），如图8-36所示。所示。图图8-36 没有应用外部没有应用外部CSS样式表时网页的效果样式表时网页的效果8.3.2 外部样式表外部样式表（2）打开网页文件）打开网页文件“8.3.2.html”。（3）“CSS样式样式”面板单击面板单击“附加样式表附加样式表”按钮按钮 。在在 “链接外部样式表链接外部样式表” 中的中的“添加为添加为”选项区域选项区域选中选中“链接链接”单选按钮，然后单击浏览按钮，选择单选按钮，然后单击浏览按钮，选择外部样式表文件外部样式表文件mycss.css，如图，如图8-37所示。所示。图图8-37 “选择样式表文件选择样式表文件”对话框对话框8.3.2 外部样式表外部样式表（4）单击）单击“确定确定”按钮，返回按钮，返回“链接外部样式表链接外部样式表”对话框，如图对话框，如图8-38所示。所示。（5）单击）单击“确定确定”按钮，按钮，mycss.css就会自动链就会自动链接到网页中。在接到网页中。在“CSS样式样式”面板中将自动出现一面板中将自动出现一个可折叠的个可折叠的mycss.css样式表。样式表。图图8-38 “链接外部样式表链接外部样式表”对话框对话框8.3.2 外部样式表外部样式表（6）因为控制超链接和表格的）因为控制超链接和表格的CSS规则是用规则是用相应的标签重新定义得到的，所以网页中相应的标签重新定义得到的，所以网页中的超链接和表格会自动应用样式。的超链接和表格会自动应用样式。（7）可以将）可以将.text样式应用到样式应用到标签标签上，这样网页中的文字都用上，这样网页中的文字都用.text这个样式这个样式来控制外观。来控制外观。（8）在浏览器中预览一下效果，如图）在浏览器中预览一下效果，如图8-39所示。可以发现在外部样式表中定义的一所示。可以发现在外部样式表中定义的一些样式已经应用到了网页中。些样式已经应用到了网页中。8.3.2 外部样式表外部样式表按照上面的方法，还可以将外部样式表文件按照上面的方法，还可以将外部样式表文件mycss.css应用到其他网页文档中。将来如果需应用到其他网页文档中。将来如果需要统一更改这些网页的外观，则只需修改外部样式要统一更改这些网页的外观，则只需修改外部样式表文件表文件mycss.css既可。既可。图图8-39 应用外部应用外部CSS样式表时网页的效果样式表时网页的效果8.4 本章习题本章习题 8.4 本章习题本章习题 8.5 上机练习上机练习 练习练习1 利用利用CSS自定义项目列表自定义项目列表在在Dreamweaver中制作项目列表时，系统中制作项目列表时，系统默认的项目列表图标是圆点。本练习要利用默认的项目列表图标是圆点。本练习要利用CSS定义个性化的项目列表图标，效果如图定义个性化的项目列表图标，效果如图8-40所示。所示。图图8-40 个性化项目列表图标个性化项目列表图标8.5 上机练习上机练习 练习练习2 外部外部CSS文件的创建和应用文件的创建和应用创建一个创建一个CSS文件，定义若干文件，定义若干CSS样式（包括样式（包括对文本段落格式控制的样式、超链接样式、表对文本段落格式控制的样式、超链接样式、表格样式等）。然后创建一个网页效果，尽量让格样式等）。然后创建一个网页效果，尽量让网页包括常用一些元素（文字、图像、表格、网页包括常用一些元素（文字、图像、表格、导航条等），最后将外部导航条等），最后将外部CSS文件链接到这个文件链接到这个网页上，并应用相应的网页上，并应用相应的CSS样式控制网页的外样式控制网页的外观。观。72 结束语结束语