第9章样式表优秀课件.ppt

第9章样式表第1页，本讲稿共50页问题：问题：htmlhtml并没有严格地控制网页的格式和外观，仅定义了网页的并没有严格地控制网页的格式和外观，仅定义了网页的结构和个别要素的功能，而是让浏览器自己决定应该让各个结构和个别要素的功能，而是让浏览器自己决定应该让各个要素以何种形式显示，而各浏览器之间的不兼容，也会导致要素以何种形式显示，而各浏览器之间的不兼容，也会导致网页在文档结构与浏览器中显示不一致。有什么较好的办法网页在文档结构与浏览器中显示不一致。有什么较好的办法控制网页的格式和外观呢？控制网页的格式和外观呢？新课引入：新课引入：如果用如果用csscss控制网页的格式和外观，网页就能给人一种赏心悦控制网页的格式和外观，网页就能给人一种赏心悦目的感觉，同时字体的色彩变化也可以使网页变得更加生动目的感觉，同时字体的色彩变化也可以使网页变得更加生动活泼；而且活泼；而且csscss有良好的兼容性，语法易学易懂，有丰富的样有良好的兼容性，语法易学易懂，有丰富的样式效果。式效果。dw dw提供的提供的csscss样式面板可以快速地创建、修改和删样式面板可以快速地创建、修改和删除样式。本章将详细讲解除样式。本章将详细讲解csscss样式表的应用。样式表的应用。第2页，本讲稿共50页9.1css9.1css基础基础1.css1.css样式表的基本概念样式表的基本概念stylestyle样式：样式：控制文档中某一文本区域外观的一组格式属性。控制文档中某一文本区域外观的一组格式属性。cascading cascading：表示向同一个元素应用多种样式的能力。表示向同一个元素应用多种样式的能力。csscss（cascadingcascadingstylestylesheetssheets）：）：指一个包含样式和格式指一个包含样式和格式规范的文本文件，它们可以精确控制规范的文本文件，它们可以精确控制 Web Web 页面内容的外观，页面内容的外观，而且一次可控制若干个文档的所有样式。而且一次可控制若干个文档的所有样式。样式属性一旦改变，样式属性一旦改变，应用该样式的文本也随着改变。应用该样式的文本也随着改变。CssCss可以改变的性质有：字可以改变的性质有：字体、字号、文字间的空间、对齐属性、列表、颜色、背景、体、字号、文字间的空间、对齐属性、列表、颜色、背景、边距、定位、特效、鼠标经过等。边距、定位、特效、鼠标经过等。第3页，本讲稿共50页v为什么称样式表为层叠的呢？为什么称样式表为层叠的呢？打一个不很准确的比喻：如我们评价一个人，需要听取大家打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心的说很有责任心.，这样通过这些意见的，这样通过这些意见的“层叠层叠”，就可大体地知道这个人的品质。即使是同样的标志，就可大体地知道这个人的品质。即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着也可以通过层叠使它们显示出不同的特性来，随着学习的深入，大家会发现层叠的具体含义及一些妙学习的深入，大家会发现层叠的具体含义及一些妙用的。用的。第4页，本讲稿共50页2.css2.css的的5 5个优点：个优点：A A、通用兼容。、通用兼容。防止文字大小因浏览器的设置而改变，影响页面布局。防止文字大小因浏览器的设置而改变，影响页面布局。B B、便于对网页整体风格进行控制。、便于对网页整体风格进行控制。C C、网页提速。、网页提速。格式和内容分开，提高网页内容和格式的设置速度。页格式和内容分开，提高网页内容和格式的设置速度。页面内容位于自身的文档中，而定义该内容表现形式的面内容位于自身的文档中，而定义该内容表现形式的csscss规则可以位于自规则可以位于自身文档的身文档的headhead标签之内（即内部的标签之内（即内部的csscss规则），也可以位于另一个文件中规则），也可以位于另一个文件中（即外部的（即外部的csscss规则）。规则）。D D、方便美化页面。、方便美化页面。更好的控制页面外观，由精确的布局定位到特定的字体更好的控制页面外观，由精确的布局定位到特定的字体和文本样式。能为页面提供更多的效果，也许这些效果仅使用和文本样式。能为页面提供更多的效果，也许这些效果仅使用htmlhtml根本无法根本无法控制。控制。E E、便于批量更新。、便于批量更新。当当csscss的样式被更新或被修改后，所有应的样式被更新或被修改后，所有应 用了该样用了该样式的文档都会被自动更新。式的文档都会被自动更新。大型网站（大型网站（163163、263263、sohusohu等）的内容和各种网页文等）的内容和各种网页文本较繁多，通过使用本较繁多，通过使用csscss就可以快速准确地对整个站点或多数页面的字体和格式进就可以快速准确地对整个站点或多数页面的字体和格式进行定义和更改。行定义和更改。第5页，本讲稿共50页3.css3.css面板面板打开打开csscss面板的面板的3 3种种方法：方法：通过窗口通过窗口csscss样式样式shift+f11shift+f11单击属性检查器中的单击属性检查器中的“csscss”按钮按钮两种模式介绍两种模式介绍当前模式：显示当前文档中所选内容的当前模式：显示当前文档中所选内容的csscss属性属性所有模式：显示当前文档中定义的规则和所有模式：显示当前文档中定义的规则和附加到当前文档的样式表中定义的所有规附加到当前文档的样式表中定义的所有规则的列表。则的列表。第6页，本讲稿共50页v下部的各个按钮简介。下部的各个按钮简介。vcsscss面板的功能：面板的功能：在在CSSCSS样式面板中可以查看与当前文档相关联的样式样式面板中可以查看与当前文档相关联的样式定义以及样式的层次结构。定义以及样式的层次结构。可以使用可以使用CSSCSS样式面板附加外部样式面板附加外部CSSCSS样式表，创建、编样式表，创建、编辑和删除辑和删除CSSCSS样式。样式。注意：注意：由于由于csscss可以直观的管理可以直观的管理csscss。adobeadobe建议用建议用csscss面板作为面板作为创建和编辑创建和编辑csscss的主要工具。的主要工具。用户可以自己创建层叠样式表，用户可以自己创建层叠样式表，还可以还可以dwdw附带的层叠样式表附带的层叠样式表 第7页，本讲稿共50页4.4.样式表类型（理解即可）样式表类型（理解即可）选择器有三种（常见）类型，可以创建选择器有三种（常见）类型，可以创建4 4种不同选择器类型的种不同选择器类型的样式：样式：（1 1）自定义）自定义csscss规则（类样式）：可以将定义的样式应用于规则（类样式）：可以将定义的样式应用于任何文本块或文本区域。文本块应用后在标签上添加一个任何文本块或文本区域。文本块应用后在标签上添加一个classclass属性属性；文本区域应用后，包含；文本区域应用后，包含classclass属性属性的的spanspan标签就会标签就会被该文本围住。被该文本围住。所有类样式（也叫自定义样式）名均以点（所有类样式（也叫自定义样式）名均以点（.）开头，可以是字母与）开头，可以是字母与数字的组合，但数字的组合，但.之后必须是字母；如果没有输入该点，则之后必须是字母；如果没有输入该点，则DWDW会自动会自动添加上。添加上。（2 2）htmlhtml标签样式表：用来重新定义特定标签的格式。在一个已经标签样式表：用来重新定义特定标签的格式。在一个已经链接的链接的csscss样式表里重定义标签时可能会改变页面布局，应小心使用。样式表里重定义标签时可能会改变页面布局，应小心使用。第8页，本讲稿共50页（3 3）对于高级样式（也称）对于高级样式（也称IDID、伪类选择器）、伪类选择器）n当为当为IDID选择器（也称标识选择符）时，是指为某个标签组选择器（也称标识选择符）时，是指为某个标签组合或所有包含特定合或所有包含特定IDID属性属性的标签定义格式。的标签定义格式。给这类选择器取名字给这类选择器取名字时必须以时必须以#号开头，标识它是一个号开头，标识它是一个IDID选择器类型，每个该类的样式只选择器类型，每个该类的样式只能在同一个网页中应用一次；能在同一个网页中应用一次；n当选中伪类选择器时，可以在当选中伪类选择器时，可以在“选择器选择器”下拉列表中选择需要下拉列表中选择需要的伪类选择器。的伪类选择器。dwdw系统系统提供的伪类选择器包括提供的伪类选择器包括 a:active a:active、a:hovera:hover、a:link a:link 和和 a:visited a:visited四种；四种；a:link a:link 设定正常（默认）状态下链接文字的样式。设定正常（默认）状态下链接文字的样式。a:activea:active 设定鼠标单击时链接文字设定鼠标单击时链接文字(选中超链接选中超链接)的的外观。外观。a:visited a:visited 设定访问过的链接的外观。设定访问过的链接的外观。a:hovera:hover 设定鼠标设定鼠标移至移至链接文字之上时文字的外观。链接文字之上时文字的外观。例如下面的超级链接效果：例如下面的超级链接效果：第9页，本讲稿共50页5.5.样式表的代码书写格式和特性：样式表的代码书写格式和特性：书写格式：书写格式：选择器声明块 1；声明块 2；.声明块 n；BodyBody font-family font-family：arialarial；font-style font-style：italicitalic Pfont-familyPfont-family：couriercourier；font-style font-style：normanorma；corlorcorlor：#FF9900#FF9900；样式表的特性：样式表的特性：层叠性和继承性。如上面示例中，正文中所有文本的属性将是arialarial和和italicitalic，所有段落文本是，所有段落文本是couriercourier、normalnormal和和#FF9900#FF9900。第10页，本讲稿共50页6 6：层叠样式表的特异功能和扩展名：层叠样式表的特异功能和扩展名u网页中的文档页面和格式都是通过网页中的文档页面和格式都是通过HTMLHTML标记设置，不能满标记设置，不能满足更多样式的需求时，就要用到足更多样式的需求时，就要用到csscss样式表来完成。样式表来完成。自定义列表项目符号；自定义列表项目符号；制定不同的大小和单位（像素和点数等），通过制定不同的大小和单位（像素和点数等），通过csscss样式和以样式和以像素为单位设置字体大小，可以确保文本以相同的方式在多个像素为单位设置字体大小，可以确保文本以相同的方式在多个浏览器中显示网页布局和外观；浏览器中显示网页布局和外观；还可以控制网页中块级别元素的格式和定位，如设置边框、边还可以控制网页中块级别元素的格式和定位，如设置边框、边距、其它文本周围的浮动文本等。距、其它文本周围的浮动文本等。CssCss样式表在样式表在IE4.0IE4.0及及NC4.0NC4.0以上的浏览器中均可支持。以上的浏览器中均可支持。u外部外部csscss样式表的扩展名是样式表的扩展名是.css.css，需要保存在站点的，需要保存在站点的commoncommon文件夹中。文件夹中。第11页，本讲稿共50页9.2 CSS9.2 CSS规则设置详解规则设置详解在在“规则对话框规则对话框”中，我们可以通过类型、背景、区块、方中，我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来美化我们的页面。框、边框、列表、定位和扩展项的设置，来美化我们的页面。在定义某个在定义某个CSSCSS样式时，不需要对每一个项都进行设置，需样式时，不需要对每一个项都进行设置，需要什么效果，就选择相应的项进行设置。要什么效果，就选择相应的项进行设置。1 1、文本样式的设置、文本样式的设置 在在“CSSCSS规则定义规则定义”对话框中，默认显示的就是对文本进行对话框中，默认显示的就是对文本进行设置的设置的“类型类型”项。主要设置文字的字体、大小、颜色、项。主要设置文字的字体、大小、颜色、粗细、样式、变体、行高、大小写、修饰、颜色等，主要粗细、样式、变体、行高、大小写、修饰、颜色等，主要用来设置文本的样式。用来设置文本的样式。注意：文本大小以像素为单位可以有效地防止浏览器破坏文本。注意：文本大小以像素为单位可以有效地防止浏览器破坏文本。实例链接实例链接第12页，本讲稿共50页2 2、背景样式的设置、背景样式的设置 在在“背景背景”属性中可以设置背景颜色，背景图像，重复属性中可以设置背景颜色，背景图像，重复（默认设置），水平位置，垂直位置，附件（背景图像（默认设置），水平位置，垂直位置，附件（背景图像是在原始位置还是随内容一起滚动）等属性。是在原始位置还是随内容一起滚动）等属性。一般对一般对BODYBODY（页面）、（页面）、TABLE TABLE（表格）、（表格）、DIV DIV（区域）的（区域）的设置。设置。在在HTMLHTML中，中，背景只能使用单一的色彩或利用图像水平垂背景只能使用单一的色彩或利用图像水平垂直方向的平铺直方向的平铺。使用。使用CSSCSS之后，有了更加灵活的设置。之后，有了更加灵活的设置。在在CSSCSS规则定义规则定义”对话框左侧选择对话框左侧选择“背景背景”项，可以在右边项，可以在右边区域设置区域设置CSSCSS样式的背景格式。样式的背景格式。实例链接实例链接第13页，本讲稿共50页3 3、区块样式设置、区块样式设置 在在“区块区块”属性中可以设置单词间距，字幕间距，垂直对齐，文属性中可以设置单词间距，字幕间距，垂直对齐，文本对齐，文字缩进，空格，显示等属性，主要用来设置文字之间的本对齐，文字缩进，空格，显示等属性，主要用来设置文字之间的间距。间距。实例链接实例链接4 4、边框样式设置、边框样式设置 ：定义元素周围的边框效果。定义元素周围的边框效果。在在“边框边框”属性属性中可以设置样式，宽度，颜色等属性。（中可以设置样式，宽度，颜色等属性。（多用于表格或层多用于表格或层）。）。实例链接实例链接第14页，本讲稿共50页5 5、方框样式的设置、方框样式的设置 ：用于控制元素在页面上的放置方式。用于控制元素在页面上的放置方式。前面我们设置过图像的前面我们设置过图像的大小大小、设置图像水平和垂直方向上、设置图像水平和垂直方向上的的空白区域空白区域、设置图像是否有、设置图像是否有文字环绕效果文字环绕效果等，方框设置进一等，方框设置进一步完善、丰富了这些设置。步完善、丰富了这些设置。u宽、高：用于定义元素的大小。定义的对象多为表格、图片宽、高：用于定义元素的大小。定义的对象多为表格、图片和和APAP元素（也叫层）。元素（也叫层）。u浮动浮动:设置其它元素设置其它元素(文本、文本、divdiv、表格等、表格等)在哪个边围绕元素浮动，在哪个边围绕元素浮动，其它元素按通常的方式环绕在浮动文字的周围。设置为左，则左边其它元素按通常的方式环绕在浮动文字的周围。设置为左，则左边不允许有其它元素，设置为无，则左右都不允许有其它元素。不允许有其它元素，设置为无，则左右都不允许有其它元素。u清楚清楚:定义元素的哪一边不允许有层定义元素的哪一边不允许有层.如果出现在被清楚的那如果出现在被清楚的那一边一边,则则(带清楚设置带清楚设置)元素移到该层的下方。可选值为左、右元素移到该层的下方。可选值为左、右对齐、两者和无。对齐、两者和无。u边界边界:指定一个元素的边框与另一个元素的间距。指定一个元素的边框与另一个元素的间距。u填充填充:指定元素内容与元素边框的间距。指定元素内容与元素边框的间距。第15页，本讲稿共50页6 6、列表样式设置：、列表样式设置：CSSCSS中有关列表的设置丰富了中有关列表的设置丰富了列表的外观，可列表的外观，可以为项目符号指定自定义图像以为项目符号指定自定义图像。在。在“CSSCSS规则定义规则定义”对话框左侧选对话框左侧选择择“列表列表”项，可以在右边区域设置列表的项，可以在右边区域设置列表的类型、项目符号图像、位类型、项目符号图像、位置等置等格式。格式。u外部外部:设置列表项文本是否换行和缩进。设置列表项文本是否换行和缩进。u内部内部:设置文本是否换行到左边距。设置文本是否换行到左边距。u实例链接实例链接7 7、定位样式设置、定位样式设置 “定位定位”项实际上是对层的设置项实际上是对层的设置，在在“定位定位”属性中可以设属性中可以设置类型、宽、高、显示、置类型、宽、高、显示、Z Z轴、溢位、置入、裁切等。轴、溢位、置入、裁切等。但是因为但是因为DWDW提供了可视化的层制作功能，所以此项设置在实际操作中几乎不会使用。提供了可视化的层制作功能，所以此项设置在实际操作中几乎不会使用。第16页，本讲稿共50页8 8、扩展样式的设置、扩展样式的设置 CSSCSS样式还可以实现一些扩展功能，这些功能集中在扩展面样式还可以实现一些扩展功能，这些功能集中在扩展面板上。这个面板主要包括板上。这个面板主要包括3 3种效果：分页、光标和过滤器。在种效果：分页、光标和过滤器。在CSSCSS规则定义规则定义”对话框左侧选择对话框左侧选择“扩展扩展”项，可以在右边区域项，可以在右边区域设置设置CSSCSS样式的扩展格式。样式的扩展格式。分页：通过样式来为网页添加分页符号。分页：通过样式来为网页添加分页符号。允许用户指定在允许用户指定在某元素前或后进行分页。分页的概念是打印网页种的内容时在某某元素前或后进行分页。分页的概念是打印网页种的内容时在某指定的位置停止，然后将接下来的内容继续打印在下一页纸上。指定的位置停止，然后将接下来的内容继续打印在下一页纸上。第17页，本讲稿共50页光标：通过样式改变鼠标形状，鼠标放置于被此项设置修饰的区域上光标：通过样式改变鼠标形状，鼠标放置于被此项设置修饰的区域上时，形状会发生改变。时，形状会发生改变。具体的形状包括：具体的形状包括：HandHand（手）、（手）、crosshaircrosshair（交叉十字）、（交叉十字）、texttext（文本选择符号）、（文本选择符号）、waitwait（WindowsWindows的沙漏形状）、的沙漏形状）、defaultdefault（默认的鼠标形状）、（默认的鼠标形状）、helphelp（带问号的鼠标）、（带问号的鼠标）、e-resizee-resize（向东的箭头）、（向东的箭头）、ne-ne-resizeresize（指向东北方的箭头）、（指向东北方的箭头）、n-resizen-resize（向北的箭头）、（向北的箭头）、nw-nw-resizeresize（指向西北的箭头）、（指向西北的箭头）、w-resizew-resize（向西的箭头）、（向西的箭头）、sw-sw-resizeresize（向西南的箭头）、（向西南的箭头）、s-resizes-resize（向南的箭头）、（向南的箭头）、se-se-resizeresize（向东南的箭头）、（向东南的箭头）、autoauto（正常鼠标）。）（正常鼠标）。）第18页，本讲稿共50页过滤器：过滤器：使用使用CSSCSS语言实现过滤器（滤镜）效果。单击语言实现过滤器（滤镜）效果。单击“过滤器过滤器”下下拉列表框旁的按钮，可以看见有多种滤镜效果可供选择。拉列表框旁的按钮，可以看见有多种滤镜效果可供选择。滤镜效果滤镜效果 描述描述 Alpha Alpha 设置透明效果设置透明效果 Blru Blru 设置模糊效果设置模糊效果 Chroma Chroma 把指定的颜色设置为透明把指定的颜色设置为透明 DropShadow DropShadow 设置投射阴影设置投射阴影 FlipH FlipH 水平反转水平反转 FlipV FlipV 垂直反转垂直反转 Glow Glow 为对象的外边界增加光效为对象的外边界增加光效 Grayscale Grayscale 降低图片的彩色度降低图片的彩色度 第19页，本讲稿共50页Invert Invert 将色彩、饱和度以及亮度值完全反转建将色彩、饱和度以及亮度值完全反转建 立底片效果立底片效果 Light Light 设置灯光投影效果设置灯光投影效果 Mask Mask 设置遮罩效果，设置遮罩效果，Color Color 指定遮罩的颜色指定遮罩的颜色 Shadow Shadow 设置阴影效果设置阴影效果 Wave Wave 设置水平方向和垂直设置水平方向和垂直 方向的波动效果方向的波动效果 Xray Xray 设置设置X X光照效果光照效果 实例链接实例链接 第20页，本讲稿共50页1.1.在在DreamweaverDreamweaver中的创建中的创建CSSCSS在在“页面属性页面属性”中设置中设置.切换到切换到“代码代码”视图，可以看到对视图，可以看到对“页面属性页面属性”进行的进行的设置，变成了一段设置，变成了一段CSSCSS样式代码，嵌在文档头样式代码，嵌在文档头之间之间 9.39.3创建新的创建新的CSSCSS规则规则第21页，本讲稿共50页2 2、文本编辑、文本编辑Dreamweaver 8Dreamweaver 8在属性检查器中增加了在属性检查器中增加了“样式样式”选项，选项，这一选项的功能是在设计页面时进行添加字体、设这一选项的功能是在设计页面时进行添加字体、设置颜色、大小等样式操作时，置颜色、大小等样式操作时，“样式样式”中套用样式；中套用样式；如果套用的如果套用的CSSCSS样式不是文字，而是表格，同样可以在属样式不是文字，而是表格，同样可以在属性面板中设置性面板中设置CSSCSS。在属性面板中都有一个类别（。在属性面板中都有一个类别（ClassClass），），在这里就可以设计表格的在这里就可以设计表格的CSSCSS样式。样式。3 3、CSSCSS样式面板样式面板【CSSCSS样式】面板集成在【样式】面板集成在【CSSCSS】面板组中，在此面板中可以】面板组中，在此面板中可以方便地进行方便地进行CSSCSS样式的添加、编辑、查看属性和删除等样式样式的添加、编辑、查看属性和删除等样式的管理。的管理。AdobeAdobe公司建议使用该方法。公司建议使用该方法。第22页，本讲稿共50页使用使用csscss样式面板创建样式面板创建csscss的具体步骤是：的具体步骤是：选中菜单选中菜单“窗口窗口”“CSSCSS样式样式”。打开。打开CSSCSS样式面板。样式面板。单击单击“CSSCSS样式样式”面板右下角的面板右下角的“新建新建CSSCSS规则规则”按钮，打按钮，打开开“新建新建CSSCSS规则规则”对话框。对话框。第23页，本讲稿共50页为新建为新建CSSCSS样式选择所需的选择器类型，并根据相应的命名规则样式选择所需的选择器类型，并根据相应的命名规则为该样式取一个名字。为该样式取一个名字。在在“定义在定义在”区域选择定义的样式位置，可以是区域选择定义的样式位置，可以是“新建样式新建样式表文件表文件”或或“仅对该文档仅对该文档”。单击。单击“确定确定”按钮，如果选按钮，如果选择了择了“新建样式表文件新建样式表文件”选项，会弹出选项，会弹出“保存样式表文件保存样式表文件为为”对话框，给样式表命名，保存后，回弹出对话框，给样式表命名，保存后，回弹出“CSSCSS规则规则定义定义”对话框。如果选择了对话框。如果选择了“仅对该文档仅对该文档”，则单击，则单击“确确定定”后，直接弹出后，直接弹出“CSSCSS规则定义规则定义”，在其中设置，在其中设置CSSCSS样样式。式。CSSCSS规则定义对话框中设置规则定义对话框中设置CSSCSS规则定义。规则定义。主要分为类型、主要分为类型、背景、区块、方框、边框、列表、定位和扩展背景、区块、方框、边框、列表、定位和扩展8 8项。每个项。每个选项都可以对所选标签做不同方面的定义，可以根据需要选项都可以对所选标签做不同方面的定义，可以根据需要设定。定义完毕后，单击设定。定义完毕后，单击“确定确定”按钮，完成创建按钮，完成创建CSSCSS样式。样式。第24页，本讲稿共50页9.49.4应用应用CSSCSS样式样式9.4.19.4.1各种样式表的应用各种样式表的应用1.1.应用自定义应用自定义CSSCSS样式，有下列样式，有下列3 3种方法：种方法：（1 1）.使用右键快捷菜单。鼠标右键在网页中被选中的元素，在弹出的快捷菜单使用右键快捷菜单。鼠标右键在网页中被选中的元素，在弹出的快捷菜单中选择中选择“CSSCSS样式样式”，在其子菜单中选择需要的自定义样式。，在其子菜单中选择需要的自定义样式。（2 2）.使用属性面板的使用属性面板的“样式样式”列表，选择应用特定的样式。列表，选择应用特定的样式。（3 3）.使用使用“标签选择器标签选择器”选择样式，先在状态栏上选择标签，然后右击，在弹出的选择样式，先在状态栏上选择标签，然后右击，在弹出的快捷菜单中选择设置类，选择已定义好的一个样式就可以了。快捷菜单中选择设置类，选择已定义好的一个样式就可以了。2.2.对于对于htmlhtml标签样式和高级样式，定义仅对该文档后，会自动应用标签样式和高级样式，定义仅对该文档后，会自动应用到相应的文档中。到相应的文档中。在设置超级链接的显示样式时就要使用高级样式。标签在设置超级链接的显示样式时就要使用高级样式。标签是指超链接，当设置完是指超链接，当设置完CSS样式后，整个页面中所有的该种样式后，整个页面中所有的该种标签全部被标签全部被CSS样式所渲染。样式所渲染。第25页，本讲稿共50页 问题：如何设置个别链接的问题：如何设置个别链接的CSS样式？具体操作方法：样式？具体操作方法：在类型中选择在类型中选择“高级样式高级样式”，选择器中选择，选择器中选择“a:linka:link”，把，把插入点放在插入点放在a a后面。后面。在在a a后面输入后面输入.名称，实例中输入名称，实例中输入.love.love。定义样式。定义好的样式在样式面板中显示出来。定义样式。定义好的样式在样式面板中显示出来。选择一个链接。右击后选择样式名称，样式就应用到所选择一个链接。右击后选择样式名称，样式就应用到所选链接。选链接。继续以同一个名称定义其它链接状态。个别链接的继续以同一个名称定义其它链接状态。个别链接的CSSCSS样式样式就做好了。就做好了。使用这种方法可以做出多个不同的链接样式。使用这种方法可以做出多个不同的链接样式。第26页，本讲稿共50页3.3.对于外部的对于外部的csscss样式表：样式表：在样式面板中选择附件样式表按钮，打开在样式面板中选择附件样式表按钮，打开“链接外部样式表链接外部样式表”对话对话框，可以链接外部的框，可以链接外部的CSSCSS样式文件。样式文件。“文件文件/URL/URL”设置外部样式表设置外部样式表文件的路径，可以单击浏览按钮，在浏览窗口中找到文件的路径，可以单击浏览按钮，在浏览窗口中找到commoncommon文件文件夹中的样式表文件。夹中的样式表文件。“添加为添加为”选择选择“链接链接”，这是，这是IEIE和和NetscapeNetscape两种浏览器都支持的导入方式。若选择两种浏览器都支持的导入方式。若选择“导入导入”只有只有NetscapeNetscape浏览器支持。设置完毕后单击浏览器支持。设置完毕后单击“确定确定”按钮，按钮，CSSCSS文件即文件即被导入到当前页面。被导入到当前页面。4.4.清除样式清除样式:选中要清除样式的对象选中要清除样式的对象,设置成设置成“无无”样式即可。样式即可。5.5.使用范例使用范例csscss样式表样式表 在样式面板中选择附件样式表按钮，在弹出的对话框中选择范例在样式面板中选择附件样式表按钮，在弹出的对话框中选择范例样式表即可。样式表即可。9.4.2应用举例应用举例（参看课本（参看课本p131-139p131-139示例）示例）1.课堂实例课堂实例用用CSS格式化文本格式化文本第27页，本讲稿共50页2.2.课堂实例课堂实例用用CSSCSS控制表格控制表格v通过通过CSSCSS可以非常方便地设置表格样式。下面将通过可以非常方便地设置表格样式。下面将通过CSSCSS制作边框为黑色细实线，表格内部边框为灰色虚线制作边框为黑色细实线，表格内部边框为灰色虚线的表格。的表格。（1 1）控制表格边框）控制表格边框（2 2）左上角的单元格边框）左上角的单元格边框（3 3）右下角的单元格边框）右下角的单元格边框第28页，本讲稿共50页3.3.用用CSSCSS控制列表控制列表 在默认状态下，有两种形式列表形式，在默认状态下，有两种形式列表形式，即圆点和阿拉伯数字。制作时，只即圆点和阿拉伯数字。制作时，只要在【属性】面板中直接选择相应要在【属性】面板中直接选择相应的设置按钮即可。但是，如果想利的设置按钮即可。但是，如果想利用镂空的圆形或者方形、漂亮图标用镂空的圆形或者方形、漂亮图标来编排列表项目，就要利用来编排列表项目，就要利用CSSCSS样式样式表来定义。表来定义。简要步骤：简要步骤：建立段落列表建立段落列表用用CSSCSS自定义段落列表自定义段落列表第29页，本讲稿共50页 4.4.用用CSSCSS控制背景控制背景 背景可以用于很多页面元素，比如表格、表格的单元格、页面、背景可以用于很多页面元素，比如表格、表格的单元格、页面、层等，都可以有自己的背景图片，一般在【属性】检查器中也层等，都可以有自己的背景图片，一般在【属性】检查器中也能进行背景的设置，但是如果使用能进行背景的设置，但是如果使用CSSCSS进行背景图片的设置，进行背景图片的设置，选项可以更加丰富，而且能够反复使用。选项可以更加丰富，而且能够反复使用。简要步骤：简要步骤：建立标签选择器样式建立标签选择器样式设置背景图片、页面大小和页边距效果设置背景图片、页面大小和页边距效果使用标签选择器样式使用标签选择器样式第30页，本讲稿共50页5.5.用用CSSCSS控制区块控制区块 CSS CSS“区块区块”规则的设置内容包括段落内文字的、字体、规则的设置内容包括段落内文字的、字体、字号、字体颜色、对齐方式、首行缩进、字符间距等，运用于字号、字体颜色、对齐方式、首行缩进、字符间距等，运用于图片的图片的“区块区块”规则还可以控制图片和文本的对齐方式。规则还可以控制图片和文本的对齐方式。简要步骤：简要步骤：创建创建CSSCSS规则规则应用应用CSSCSS规则到文本或图片规则到文本或图片第31页，本讲稿共50页6.CSS6.CSS样式滤镜的应用样式滤镜的应用 CSS CSS提供了滤镜功能，在制作网页的时候，即使不用图片，提供了滤镜功能，在制作网页的时候，即使不用图片，通过通过CSSCSS滤镜，只需简单的操作，也同样可以使网页中的文滤镜，只需简单的操作，也同样可以使网页中的文字、图片或者按钮鲜艳无比，充满生气，从而增强了自己字、图片或者按钮鲜艳无比，充满生气，从而增强了自己网页的视觉效果。网页的视觉效果。实例实例1 1：为网页设置渐变效果：为网页设置渐变效果在网页中插入一幅图象，选择该图象，在在网页中插入一幅图象，选择该图象，在CSSCSS样式窗口中新建样式，选样式窗口中新建样式，选择类型为标签，在标签中选择择类型为标签，在标签中选择imgimg，进入样式定义窗口选择扩展，在，进入样式定义窗口选择扩展，在选择器中选择选择器中选择alpha,alpha,进行参数的设置。进行参数的设置。opacity=100,finishopacity=30,style=2,startx=50,starty=50,finishx=5opacity=100,finishopacity=30,style=2,startx=50,starty=50,finishx=500,finishy=500)00,finishy=500)设置好后，按设置好后，按F12F12键进行预览。键进行预览。第32页，本讲稿共50页例例2 2：BlurBlur滤镜产生像被风吹一样的滤镜产生像被风吹一样的模糊效果。模糊效果。BlurBlur滤镜参数设置：滤镜参数设置：Blur(Add=?,Blur(Add=?,Direction=?,Direction=?,Strength=?)Strength=?)当滤镜用于图片时当滤镜用于图片时Add取取0 0，用于文字时，用于文字时Add取取1 1。Direction=?Direction=?”模糊方向，以模糊方向，以4545度为单度为单位改变，位改变，“0 0”为垂直向上，为垂直向上，“4545”向右上，向右上，“9090”水平向右，水平向右，“135135”向向右下，以依次改变。这里我们设置右下，以依次改变。这里我们设置Direction=90Direction=90。StrengthStrength代表模糊移动值，单位为像素。我们代表模糊移动值，单位为像素。我们设置设置Strength=180Strength=180。第33页，本讲稿共50页9.9.设置动态链接样式举例。设置动态链接样式举例。在设置时候，必须按照在设置时候，必须按照a:link a:link、a:visited a:visited、a:hover a:hover、a:active a:active的顺序进行设置，否则不会出现预期的设置的顺序进行设置，否则不会出现预期的设置效果，效果，a:activea:active可以不设置。可以不设置。第34页，本讲稿共50页8.综合应用举例第35页，本讲稿共50页9.5 9.5 编辑编辑CSSCSS规则和规则和CSSCSS样式样式v编辑编辑CSSCSS规则：在样式面板中直接双击进行修改。规则：在样式面板中直接双击进行修改。v编辑编辑CSSCSS样式：在样式列表中样式：在样式列表中选中需要编辑的规则的名称，直选中需要编辑的规则的名称，直接单击接单击“编辑样式编辑样式”按钮，在弹出的按钮，在弹出的“CSSCSS规则定义规则定义”对话框中修对话框中修改相应的设置。编辑完成后单击改相应的设置。编辑完成后单击“确定确定”按钮，按钮，CSSCSS样式的一个样样式的一个样式就编辑完成了，还可以再继续编辑该样式表中的其它样式，式就编辑完成了，还可以再继续编辑该样式表中的其它样式，继而完成样式表的修改。继而完成样式表的修改。9.6 CSS9.6 CSS样式的三种存放方式样式的三种存放方式（1 1）直接插入）直接插入 （叫内部标签）：（叫内部标签）：在每个在每个htmlhtml标签后写标签后写CSSCSS属性，该属性，该类样式表不需要单独保存。类样式表不需要单独保存。table style=第36页，本讲稿共50页（2 2）嵌样式）嵌样式 （也叫嵌入式）：也叫嵌入式）：位于位于htmlhtml文件头（文件头（标标签）的签）的stylestyle标签内。在创建该类样式表时，选择标签内。在创建该类样式表时，选择“仅对该文档仅对该文档”，也不需要保存，仅需要取个名字即可创建。，也不需要保存，仅需要取个名字即可创建。应用样式应用样式第37页，本讲稿共50页（3 3）链接到已创建的外部文件）链接到已创建的外部文件.css.css（统一风格）：（统一风格）：这类样这类样式表是单独存在的非式表是单独存在的非htmlhtml文件，在创建该类样式表时，选文件，在创建该类样式表时，选择择“新建样式表文件新建样式表文件”，需对该类样式表进行保存操作，且要，需对该类样式表进行保存操作，且要保存在站点的保存在站点的commoncommon文件夹中。在文件夹中。在htmlhtml的的中引中引用。用。link Rel=第38页，本讲稿共50页9.7 9.7 课堂实例课堂实例表格表格CSSCSS布局布局 表格CSS布局可以使设计的网页结构更加合理，更便于维护和更改网页的样式，但是从本质上讲，这种布局网页的方式只是从传统的网页设计技术到符合Web2.0