是用于控制网页样式并允许 将样式信息与网页内容分离的一种标记性语言 即即: :告诉浏览器，这段样式将应用到哪个对象告诉浏览器，这段样式将应用到哪个对象....CSSCSS语法结构语法结构: 选择符{ 属性1:值1； 属性2:值2…… } 举例：body { font-size:12px; text-align:center;}参数说明：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开CSSCSS选择器选择器选择器选择器2.2.2 CSS选择器（符）选择器（符）ØØ标签选择器标签选择器标签选择器标签选择器：指以网页中已有的标签名作为名称的选择器，几乎所有的html标签均可用作该类选择器（如：body{ } p{ } h1{ } 等等...）ØØ类别选择器类别选择器类别选择器类别选择器：属用户自定义名称的选择器，可以在XHTML标签中用class=“”为相应标签指派样式可理解为一类 特点特点：在文档中允许被重复使用ØØId Id 选择器选择器选择器选择器：属用户自定义名称选择器，基于DOM文档对象模型原理出现的选择器，可以在XHTML标签中用id=“”为相应标签指派样式，可理解为一个标识特点：特点：在网页中，每个id名称只能使用一次2.2.3 选择器的声明选择器的声明vv集体声明集体声明集体声明集体声明:并列关系vv嵌套声明嵌套声明嵌套声明嵌套声明:从属关系vv混合声明混合声明混合声明混合声明:并列及从属关系2.2.4 如何应用如何应用CSS到网页中到网页中Ø行内样式表Ø内部（内嵌）样式表Ø外部（链接）样式表Ø导入式样式表CSS编码可以多种方式灵活地应用到我们所设计XHTML页面之中，选择方式可根据我们对设计的不同表现手段来制定，一般按CSS代码位置分为：2.2.5 实例代码实例代码:CSS按位置的分类按位置的分类

是用于控制网页样式并允许将样式信息叠样式表是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言与网页内容分离的一种标记性语言 【【本章学习目的本章学习目的】】 本章通过多个本章通过多个CSSCSS样式的应用实例，重点介绍样式的应用实例，重点介绍了了CSSCSS样式表功能、定义样式表功能、定义CSSCSS规则的方法，应用内嵌规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章的式样式表和链接外部样式表的方法等，通过本章的学习，读者应了解学习，读者应了解CSSCSS样式表的用途，掌握创建和样式表的用途，掌握创建和应用应用CSSCSS样式表的方法，学会用样式表的方法，学会用CSSCSS样式表进行网页样式表进行网页的美化和网页布局的美化和网页布局5.1 利用CSS 样式表的网页实例 CSSCSS样式表是由一系列样式选择器和样式表是由一系列样式选择器和CSSCSS属性组成，它属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的格列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。

式化功能 使用使用CSSCSS样式表的另一个优点是可以利用同一个样式样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰，表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而不当需要更改样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，简化了格式化网页的工作用对每个页面逐个进行修改，简化了格式化网页的工作5.1 利用CSS 样式表的网页实例 【【例例5.55.5】】利用利用CSSCSS样式还可以代替表格进行网页布局，样式还可以代替表格进行网页布局，这是目前较为流行页面排版方式，如图所示这是目前较为流行页面排版方式，如图所示 该实例主要采用了该实例主要采用了divdiv标签＋标签＋csscss样式，涉及到的知识样式，涉及到的知识点有以下几点：点有以下几点：v分析构架：画出构架图；分析构架：画出构架图；v模块拆分：分别定义模块拆分：分别定义DivDiv的的CSSCSS样式；样式；v在网页中插入在网页中插入DivDiv标签，在标签，在DivDiv中填充网页内容；中填充网页内容；v总体调整：色彩及内容调整，适当修改总体调整：色彩及内容调整，适当修改CSSCSS样式。

样式5.2 5.2 使用CSS样式表v5.2.1 CSS5.2.1 CSS样式表概述样式表概述 1、样式表的使用样式表的使用 CSSCSS样式表的使用常用的方法有以下两种：样式表的使用常用的方法有以下两种： 页面内嵌法将样式表代码直接写在页面内嵌法将样式表代码直接写在HTMLHTML标签的标签的headhead区 外部链接法将样式表写在一个独立的后缀名为外部链接法将样式表写在一个独立的后缀名为CSSCSS文件中，在需要应用文件中，在需要应用CSSCSS样式的网页中链接该文件，样式的网页中链接该文件，在页面在页面和和之间用以下代码调用之间用以下代码调用" />5.2 5.2 使用CSS样式表2 2、、CSSCSS样式表语法样式表语法选择符选择符 { { 属性属性1 1：值：值1 1；属性；属性2 2：值：值2…… } 2…… } 参数说明：参数说明： 属性和属性值之间用冒号属性和属性值之间用冒号(:)(:)隔开，定义多个属性时，隔开，定义多个属性时，属性之间用分号属性之间用分号(;)(;)隔开。

隔开1. 1. 创建创建CSSCSS样式样式选择选择““窗口窗口””菜单｜菜单｜““CSSCSS样式样式””命令，打开命令，打开““CSSCSS样式样式””面板，单击右下角的面板，单击右下角的““新建新建CSSCSS规则规则””按钮，或选择按钮，或选择““文本文本””菜单｜菜单｜““CSSCSS样式样式””｜｜““新建新建””命令，弹出命令，弹出““新建新建CSSCSS规则规则””对话框对话框. . 5.2.2 在Dreamweaver中定义CSS5.2.2 在Dreamweaver中定义CSS选择器类型有以下三种：选择器类型有以下三种：（（1 1）） 类类 自定义自定义 CSS CSS 规则，它的特点是灵活多变，可以规则，它的特点是灵活多变，可以重复将样式应用于网页元素在应用时，它会在重复将样式应用于网页元素在应用时，它会在HTMLHTML标签标签内加入一个类（内加入一个类（classclass）的定久来规定标签中的格式比如）的定久来规定标签中的格式比如将类的样式将类的样式mystylemystyle定义于某个标题，那么代码为：定义于某个标题，那么代码为：

标题标题1 1应用自定义的样式应用自定义的样式

本都会立即更新，实现了批量快速更改格式的特点5.2.2 在Dreamweaver中定义CSS（（3 3）） 高级高级 在在CSS CSS 选择器中，它的功能最为强大，可以定义超链选择器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置（例如：接的特效，定义特定元素组合的格式设置（例如：body,table,tdbody,table,td，用逗号隔开），定义嵌套的样式（，用逗号隔开），定义嵌套的样式（td td imgimg　空格隔开），定义包含特定　空格隔开），定义包含特定 id id 属性的标签的格式属性的标签的格式设置定义的位置有以下三种情况：定义的位置有以下三种情况： •选择选择“仅为该文档仅为该文档”，此时，此时CSSCSS样式的代码会嵌套样式的代码会嵌套在网页在网页和和标签中•选择选择“新建样式表文件新建样式表文件”，则弹出，则弹出“保存样式表文保存样式表文件为件为”对话框，如图对话框，如图5.55.5所示，选择样式文件的存储所示，选择样式文件的存储路径和文件名，单击路径和文件名，单击“保存保存”按钮，将按钮，将CSSCSS样式代码样式代码单独存放在一个单独存放在一个CSSCSS文件。

文件•选择选择“已有的某已有的某CSSCSS文件文件”，将新建的，将新建的CSSCSS规则写入规则写入已有的已有的csscss文件中比如：选择定义在比如：选择定义在“仅对该文档仅对该文档”，单击，单击“确定确定”按钮后，弹出按钮后，弹出“H1H1的的CSSCSS规则定义规则定义”对话框，如图所对话框，如图所示，在对话框中进行各项的格式设置，然后单击示，在对话框中进行各项的格式设置，然后单击“确定确定”按钮2.2.编辑和删除编辑和删除CSSCSS样式样式 创建创建CSSCSS样式后，如果要修改样式后，如果要修改CSSCSS样式，在样式，在““CSSCSS样式样式””面板中，单击面板中，单击““CSSCSS样式样式””面板右下角面板右下角的的““编辑编辑””按钮，进入按钮，进入““CSSCSS规则定义规则定义””的对话框，的对话框，可进行修改可进行修改 某个某个CSSCSS样式不再需要时，在样式不再需要时，在““CSSCSS样式样式””面板面板中，首先选中某个样式，单击中，首先选中某个样式，单击CSSCSS样式面板右下角样式面板右下角的的““删除删除””按钮。

按钮5.3 CSS 样式的应用 【【例例5.65.6】】应用应用CSSCSS样式设计出图文混排效果，样式设计出图文混排效果，如图所示如图所示 此实例所涉及到的知识点是此实例所涉及到的知识点是CSSCSS样式的创建和样式的创建和应用，主要包括以下几个方面：应用，主要包括以下几个方面： 背景样式、文本及列表样式、方框与边框样式、背景样式、文本及列表样式、方框与边框样式、动态链接样式；动态链接样式； 建立单独的建立单独的CSSCSS文件，应用于多个网页文件，应用于多个网页5.3.1 样式表的应用实例1：背景样式 　　　的应用 在在【【例例5.65.6】】中，上方桔黄色的横条其实是重定义了中，上方桔黄色的横条其实是重定义了bodybody标签的网页背景图像，背景图像横向重复，网页元素标签的网页背景图像，背景图像横向重复，网页元素与页边距也进行了设置，其操作步骤如下：与页边距也进行了设置，其操作步骤如下： 步骤１步骤１ 单击单击“窗口窗口”菜单｜菜单｜“CSSCSS样式样式”命令，打开命令，打开“CSSCSS样式样式”面板，单击右下角的面板，单击右下角的“新建新建CSSCSS规则规则”按钮，按钮，弹出弹出“CSSCSS规则定义规则定义”的对话框，选择的对话框，选择“选择器类型选择器类型”为为“标签标签”，在，在“标签标签”下拉列表中选择下拉列表中选择bodybody，定义在：选，定义在：选择择“仅为该文档仅为该文档”，单击，单击“确定确定”按钮，弹出按钮，弹出 “bodybody的的CSSCSS规则定义规则定义”的对话框，的对话框，单击单击“背景背景”选项卡，设置背景图像为：选项卡，设置背景图像为：images/images/bg.gifbg.gif，单击，单击“重复重复”下拉列表，选择下拉列表，选择“横向重复横向重复”命令。

命令 步骤步骤2 2 设置页边距单击设置页边距单击“方框方框”选项卡，在边界中分选项卡，在边界中分别设置上、下均为别设置上、下均为5050像素，左右均为像素，左右均为100100像素5.3.2 5.3.2 样式表的实例应用样式表的实例应用2 2：文本及列：文本及列　　表的应用　　表的应用 在在【【例例5.65.6】】中，文本和列表都应用了中，文本和列表都应用了CSSCSS样式，分别样式，分别设置字体、段落、列表的相关属性第一行文本是标题设置字体、段落、列表的相关属性第一行文本是标题1 1（标签为（标签为H1H1），第二行文本是标题），第二行文本是标题2 2（标签为（标签为H2H2），正），正文部分用了列表（标签为文部分用了列表（标签为ULUL）1 1、字体的样式设置、字体的样式设置 在在““CSSCSS规则定义规则定义””对话框的对话框的““类型类型””选项卡中设置选项卡中设置2 2、文本段落的样式设置、文本段落的样式设置 在在““CSSCSS规则定义规则定义””对话框的对话框的““区块区块””选项卡，设置选项卡，设置3 3、列表的样式设置、列表的样式设置 类型：设置项目符号或编号的外观。

类型：设置项目符号或编号的外观 项目符号图像：指定图像替代项目符号的样式，美项目符号图像：指定图像替代项目符号的样式，美化项目符号化项目符号 重定义项目列表（标签为重定义项目列表（标签为UL)UL)5.3.3 样式表的实例应3：方框和边框　 样式的应用 在在【【例例5.65.6】】中，插入一幅图像，通过中，插入一幅图像，通过CSSCSS样式的应用，样式的应用，实现了图文混排的效果该实例中主要设置了方框的浮动实现了图文混排的效果该实例中主要设置了方框的浮动和边界及填充的距离，实现了图像与文本之间的环绕，还和边界及填充的距离，实现了图像与文本之间的环绕，还设置了边框，添加了一个虚线边框修饰图像这里首先定设置了边框，添加了一个虚线边框修饰图像这里首先定义了一个类的义了一个类的CSSCSS规则，然后将此类应用于某个图像上规则，然后将此类应用于某个图像上v 图像边距的设置图像边距的设置v 图像的边框的设置图像的边框的设置5.3.4 样式表的实例应用4：动态链接样式 简单的简单的CSSCSS链接样式可以在页面属性中的链接样式可以在页面属性中的““链接链接””选项卡中设置，选项卡中设置，5.15.1节中已经讲过。

节中已经讲过 在在【【例例5.65.6】】中，建立较为复杂的中，建立较为复杂的CSSCSS链接样链接样式，当鼠标经过链接文字时，文字颜色会变色、式，当鼠标经过链接文字时，文字颜色会变色、字体样式变粗、出现背景颜色、文字修饰有下划字体样式变粗、出现背景颜色、文字修饰有下划线等这里还讲解两个重要的知识点：如何建立线等这里还讲解两个重要的知识点：如何建立CSSCSS链接样式和如何调用外部链接样式和如何调用外部CSSCSS样式表1.1.建立链接建立链接CSSCSS样式样式 单击单击““CSSCSS样式样式””面板中的面板中的““新建新建CSSCSS规则规则””按钮，按钮，选择器类型：高级，单击选择器类型：高级，单击““选择器选择器””下拉列表，分别选下拉列表，分别选择择a:llinka:llink（（链接后效果）、链接后效果）、a:visiteda:visited（（访问后效果）、访问后效果）、a:hovera:hover（（鼠标经过效果），分别定义其样式鼠标经过效果），分别定义其样式2. 2. 调用调用CSSCSS样式文件样式文件 其它网页要应用刚才建立的其它网页要应用刚才建立的CSSCSS样式文件，如样式文件，如何调用呢？单击何调用呢？单击““CSSCSS样式样式””面板中的面板中的““附加样式附加样式表表””按钮，弹出按钮，弹出““链接外部样式表链接外部样式表””的对话框，的对话框，在在““文件文件/URL”/URL”文本框中输入外部文本框中输入外部CSSCSS文件路径和文件路径和文件名，添加为选择文件名，添加为选择““链接链接””选项，将新建的样选项，将新建的样式文件链接到此文件，如图所示。

式文件链接到此文件，如图所示 5.3.5 样式的实例5：滤镜效果的应用 CSSCSS滤镜并不是浏览器的插件，也不符合滤镜并不是浏览器的插件，也不符合CSSCSS标准，而标准，而是微软公司为增强浏览器功能而特意开发的并整合在是微软公司为增强浏览器功能而特意开发的并整合在IEIE浏浏览器中的一类功能集合由于浏览器览器中的一类功能集合由于浏览器IEIE有着广泛的使用范有着广泛的使用范围，因此围，因此CSSCSS滤镜也被广大设计者所喜爱滤镜也被广大设计者所喜爱　　　　 CSSCSS滤镜可以为样式控制的对象指定特殊效果滤镜可以为样式控制的对象指定特殊效果　　　　 ✿✿注意：注意：CSSCSS滤镜只能作用于有区域限制的对象，如表格、滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接作用于文字，所以把所需要单元格、图片等，而不能直接作用于文字，所以把所需要增加特效的文本事先放在单元格或层中，然后对单元格或增加特效的文本事先放在单元格或层中，然后对单元格或层应用层应用CSSCSS样式vAlpha—Alpha—透明效果透明效果vBlur—Blur—模糊效果模糊效果vChromaChroma——将指定的颜色设将指定的颜色设置成透明置成透明vDropshadowDropshadow——投影效果投影效果vFlipHFlipH——进行水平翻转进行水平翻转vFlipVFlipV－－进行垂直翻转进行垂直翻转vGlowGlow－－发光效果发光效果vGrayscaleGrayscale－－产生灰阶产生灰阶vInvertInvert－－反转底片效果反转底片效果vLightLight－－灯光投影灯光投影vMaskMask－－遮罩遮罩vShadowShadow－－阴影效果阴影效果vWaveWave－－水平与垂直波动效水平与垂直波动效果果vXrayXray－－设置设置X X光效果光效果5.3.6 CSS5.3.6 CSS样式进阶样式进阶　利用　利用CSSCSS＋＋DIVDIV进行网页布局的实例进行网页布局的实例 利用利用CSSCSS样式还可以代替表格进行网页布局，本小节讲解样式还可以代替表格进行网页布局，本小节讲解【【例例5.55.5】】如何利用如何利用DIVDIV标签和标签和CSSCSS样式的定义进行网页的排版。

样式的定义进行网页的排版制作过程如下：制作过程如下：1 1、分析架构，如图所示分析架构，如图所示2 2、模块拆分、模块拆分 一个总的一个总的DIVDIV标签，它包含了标签，它包含了4 4个个DIVDIV标签ContainerContainer最大最大的容器，将所有内容包含在内的容器，将所有内容包含在内WidthWidth：：778px778pxHeaderHeader网站头网站头部图标，包含了一幅广告横幅，部图标，包含了一幅广告横幅，WidthWidth：：778px778px，，Height110pxHeight110pxLeftnavLeftnav左侧导航条，左侧导航条，WidthWidth：：200200，浮动为左对齐浮动为左对齐ContentContent网网站的主要内容站的主要内容 Width: 480pxWidth: 480pxFooterFooter　网站底栏，包含版权　网站底栏，包含版权信息等 3.3.定义页面属性和定义特定定义页面属性和定义特定 Id Id 属性的属性的DIVDIV标签的标签的CSSCSS样式 4.4.插入网页元素和调整页面结构插入网页元素和调整页面结构 最后，保存网页，浏览网页效果。

最后，保存网页，浏览网页效果本 章 小 结 本章主要介绍了本章主要介绍了CSSCSS样式的创建与应用，通过样式的创建与应用，通过CSSCSS样式样式的使用，使得网页样式更加丰富多彩的使用，使得网页样式更加丰富多彩 1 1．．CSSCSS的概念：的概念： CSSCSS样式、样式的分类、样式、样式的分类、CSSCSS的语法的语法结构等结构等 2 2．．CSSCSS样式的创建样式的创建 3 3．．CSSCSS样式的应用样式的应用。