《第5章CSS样式.ppt》由会员分享，可在线阅读，更多相关《第5章CSS样式.ppt（69页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第5章章CSS样式表样式表学习目标：学习目标：CSS样式表是样式表是Dreamweaver中的重点和难点，通过中的重点和难点，通过本章的学习，大家要理解本章的学习，大家要理解CSS样式表的作用。掌握如样式表的作用。掌握如何建立何建立CSS样式表，如何运用样式表，如何运用CSS样式表，如何设置样式表，如何设置CSS样式表的各项属性。样式表的各项属性。1v5.1 CSS样式表样式表 5.1.1 CSS样式表简介样式表简介 5.1.2 【CSS】样式表样式表v5.2 链接和创建样式表链接和创建样式表 5.2.1 链接外部样式表文件链接外部样式表文件 5.2.2 创建新的创建新的CSS样式样式 5.
2、2.3 应用类样式应用类样式 5.2.4 编辑样式编辑样式v5.3 CSS样式的属性设置样式的属性设置 5.3.1 设置类型属性设置类型属性 5.3.2 设置背景属性设置背景属性 5.3.3 设置区块属性设置区块属性 5.3.4 设置方框属性设置方框属性 5.3.5 设置边框属性设置边框属性 5.3.6 设置列表属性设置列表属性 5.3.7 设置定位属性设置定位属性 5.3.8 设置扩展属性设置扩展属性v5.4 CSS样式中的过滤器样式中的过滤器v5.5 样式表的运用举例样式表的运用举例第第5章章CSS样式表样式表25.1 CSS样式表样式表 5.1.1 CSS样式表简介 5.1.2 【CSS
3、】样式表3 5.1.1 CSS样式表简介 什么是什么是CSS样式表？样式表？CSS是是“Cascading Style Sheet”缩写，通常译为缩写，通常译为“层叠样式表层叠样式表”或或“级联样式表级联样式表”。1998年年5月月12日，日，CSS2成成为了为了W3C（国际互联网联盟）的新标准。同时国际互联网联盟）的新标准。同时W3C Core Styles（国际互联网联盟核心样式）国际互联网联盟核心样式）、CSS2 Validation Service（样式表校验服样式表校验服务）以及务）以及CSS Test Suite（样式表测试组件）样式表测试组件）宣布成立。宣布成立。4 我们使用我们
4、使用HTML语言设计网页，但设计的页面在语言设计网页，但设计的页面在浏览器中显示时和预期的效果往往有所差异，而且使浏览器中显示时和预期的效果往往有所差异，而且使用不同的浏览器、不同的分辨率，效果又有不同。例用不同的浏览器、不同的分辨率，效果又有不同。例如用如用Microsoft Internet Explorer浏览器打开第七章浏览器打开第七章创建的文件创建的文件“index.htm”，在在IE菜单中选择菜单中选择【查看查看】/【文字大小文字大小】/【最大最大】命令，页面的布局就完成命令，页面的布局就完成混乱了。所以单纯用混乱了。所以单纯用HTML标签来描述网页元素是不标签来描述网页元素是不够
5、的，因为够的，因为HTML标签本身有一定的局限性。标签本身有一定的局限性。5.1.1 CSS样式表简介55.1.1 CSS样式表简介vCSS样式表可以解决这些问题，使页面完全按照设计者的构想样式表可以解决这些问题，使页面完全按照设计者的构想显示。使用样式表可以对网页元素精确定位，轻易地控制文字、显示。使用样式表可以对网页元素精确定位，轻易地控制文字、图片、表格等各种对象，对于不同的浏览器，不同的分辨率，图片、表格等各种对象，对于不同的浏览器，不同的分辨率，网页的整体效果都不会改变。网页的整体效果都不会改变。v我们以前在设计制作网页时，网页的内容与格式控制是交错在我们以前在设计制作网页时，网页的
6、内容与格式控制是交错在一起的，这样做的缺点是不方便网页的修改，不利于整个站点一起的，这样做的缺点是不方便网页的修改，不利于整个站点的风格的统一，网站的维护工作量很大。的风格的统一，网站的维护工作量很大。v解决这个问题的方法是，把网页的内容与格式控制分开处理。解决这个问题的方法是，把网页的内容与格式控制分开处理。使得网页可以光由内容构成，而格式控制工作由使得网页可以光由内容构成，而格式控制工作由CSS样式表来样式表来完成。这样做的好处在于：完成。这样做的好处在于：v简化网页的格式代码，外部的样式表还会被浏览器保存在缓存简化网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度
7、，也减少了需要上传的代码数量。里，加快了下载显示的速度，也减少了需要上传的代码数量。v只要修改只要修改CSS样式表文件，就可以改变整个站点的风格特色。样式表文件，就可以改变整个站点的风格特色。这对于维护、修改大型网站显得格外重要。避免了一个个地修这对于维护、修改大型网站显得格外重要。避免了一个个地修改网页，大大减少了重复劳动。改网页，大大减少了重复劳动。65.1.1 CSS样式表简介v可以重新定义可以重新定义HTML语言中的标签，弥补语言中的标签，弥补HTML语言中规格的不足，可以储存成独立语言中规格的不足，可以储存成独立文件，不仅可以应用于文件，不仅可以应用于HTML语言，还可应语言，还可应
8、用于用于XML语言与语言与JAVAscript中，且大多数浏中，且大多数浏览器都支持，览器都支持，CSS作为网页内容格式技术，作为网页内容格式技术，已成为网页学习者必备的技术之一。已成为网页学习者必备的技术之一。75.1.1 CSS样式表简介vCSS样式表的样式表的功能非常强大，一般可以归纳为以下几功能非常强大，一般可以归纳为以下几点：点：v可以精确地控制网页中各种元素的位置。尽量使它们可以精确地控制网页中各种元素的位置。尽量使它们不受浏览器类型、分辨率的影响。不受浏览器类型、分辨率的影响。v可以保证网站整体风格的统一，方便网站的修改和维可以保证网站整体风格的统一，方便网站的修改和维护。护。v
9、减少网页代码的冗余，加快网站上传和下载的速度。减少网页代码的冗余，加快网站上传和下载的速度。v可以为网页中的各种元素设置一些特殊的风格，例如；可以为网页中的各种元素设置一些特殊的风格，例如；虚线的边框，文本块的缩进，不同的背景等。虚线的边框，文本块的缩进，不同的背景等。v可以为网页中的元素设置各种过滤器，从而产生诸如可以为网页中的元素设置各种过滤器，从而产生诸如阴影、辉光、模糊和透明等效果，而这些效果以前只阴影、辉光、模糊和透明等效果，而这些效果以前只有在一些图像处理软件中才能实现。有在一些图像处理软件中才能实现。85.1.2 【CSS】样式表 选择选择Dreamweaver MX 2004主
10、菜单中的主菜单中的【窗口窗口】/【CSS样式样式】命令，打开命令，打开【CSS样式样式】面板，面板，如图如图5-1所示。在所示。在【设计设计】面板中有两个选项，一个面板中有两个选项，一个是是CSS样式，另一个是层。样式，另一个是层。【CSS样式样式】面板窗口分左右两栏，左边是已定面板窗口分左右两栏，左边是已定义的样式，右边是该样式的具体设置。在窗口的底义的样式，右边是该样式的具体设置。在窗口的底部排列有几个快捷按钮，它们分别是：部排列有几个快捷按钮，它们分别是：v附加样式表附加样式表v新建样式表新建样式表v编辑样式表编辑样式表v删除样式表删除样式表95.2 链接和创建样式表链接和创建样式表 5
11、.2.1创建新的创建新的CSS样式样式 5.2.2链接外部样式表文件链接外部样式表文件 5.2.3 应用类样式应用类样式 5.2.4 编辑样式编辑样式105.2.1 创建新的CSS样式v除了可以使用现成的样式文件外，我们也可除了可以使用现成的样式文件外，我们也可以自己创建样式文件。以自己创建样式文件。Dreamweaver MX 2004会根椐设计者的选择，自动编辑生成样会根椐设计者的选择，自动编辑生成样式文件，操作非常简单。具体步骤如下：式文件，操作非常简单。具体步骤如下：v打开打开【CSS样式样式】面板，单击面板，单击【CSS样式样式】面板底部的按钮，打开面板底部的按钮，打开【新建新建CS
12、S样式样式】对对话框，如图话框，如图5-5所示。所示。115.2.1 创建新的CSS样式 其中其中【选择器类型选择器类型】有以下有以下3种单选框：种单选框：v【类（可应用于任何标签）类（可应用于任何标签）】：可以将自定义的样式：可以将自定义的样式应用于任何文本。如果将自定义样式用于整段文本，应用于任何文本。如果将自定义样式用于整段文本，会在会在HTML源代码中加入源代码中加入CLASS属性，例如：属性，例如：；如果将样式用于一行或选定文如果将样式用于一行或选定文本，会在选定文本的源代码前后加入包含了本，会在选定文本的源代码前后加入包含了CLASS属属性的性的SPAN标记，例如：标记，例如：。1
13、25.2.1 创建新的CSS样式v【标签（重新定义特定标签外观）标签（重新定义特定标签外观）】：该选项可以对某一具体标：该选项可以对某一具体标签进行重新定义。可以直接输入一个签进行重新定义。可以直接输入一个HTML标签，也可以从弹出标签，也可以从弹出的下拉菜单选择。例如：当重新创建或修改的下拉菜单选择。例如：当重新创建或修改HR的的CSS样式时，样式时，文档中用文档中用HR标签的地方都会自动更新。在一个已链接好的标签的地方都会自动更新。在一个已链接好的CSS样式表里重定义标签应小心，因为这样做有可能会改变许多样式表里重定义标签应小心，因为这样做有可能会改变许多页面的布局。例如，如果对页面的布局
14、。例如，如果对“TABLE”标签进行重新定义，就会影标签进行重新定义，就会影响到其他使用表格的页面布局。响到其他使用表格的页面布局。v【高级（高级（ID、上下文选择器等）上下文选择器等）】：可以定义特殊的标签组合：可以定义特殊的标签组合（如（如“td h2”表示只要在表格单元中出现表示只要在表格单元中出现“h2”标题就应用该样标题就应用该样式）以及包含特殊序列号（式）以及包含特殊序列号（ID）的标记属性（如的标记属性（如“#myStyle”表表示所有属性之中有一对示所有属性之中有一对“ID=#myStyle”的标签都应用该样式）。的标签都应用该样式）。135.2.1 创建新的CSS样式 在在【
15、高级高级】选项中，有四种给定的组选项中，有四种给定的组合样式，分别是合样式，分别是a:active（活动链接），活动链接），a:hover（当前链接），当前链接），a:link（链接），链接），a:visited（访问过的链接）。通过对这访问过的链接）。通过对这几种样式的定义，可以制作出富有特色几种样式的定义，可以制作出富有特色的超级链接，例如，给链接去掉下划线，的超级链接，例如，给链接去掉下划线，对链接的各种状态设置不同颜色等。对链接的各种状态设置不同颜色等。145.2.1 创建新的CSS样式在在CSS中使用如下格式来创建样式单中使用如下格式来创建样式单:.选择符选择符属性属性1:属性值属性
16、值1;属性属性2:属性值属性值2选择符选择符:可以是可以是HTML中的任意标签或样式名中的任意标签或样式名属性属性:为用于控制元素各种特性为用于控制元素各种特性,如显示属性、字体属性如显示属性、字体属性和文本属性等。和文本属性等。15例如：例如：.font font-family:幼圆幼圆;font-size:10pt;font-style:normal;line-height:normal;font-weight:bolder;font-variant:normal;text-transform:none;color:#006666;letter-spacing:normal;text-al
17、ign:center;text-indent:2pt;vertical-align:middle;word-spacing:30pt;white-space:normal;5.2.1 创建新的CSS样式165.2.2 链接外部样式表文件v如果已经定义了样式文件，则在如果已经定义了样式文件，则在【定义在定义在】选项中，选项中，可以选择下拉列表中已存在的样式文件，如图可以选择下拉列表中已存在的样式文件，如图5-10所示。这样操作表示将新的内容添加到该样式文件所示。这样操作表示将新的内容添加到该样式文件中。以文件形式存在的样式表可以通过链接形式引中。以文件形式存在的样式表可以通过链接形式引用。例如，
18、运用样式表文件用。例如，运用样式表文件mycss.css，则在则在标签中引用代码为：标签中引用代码为：v 17 5.2.2 链接外部样式表文件v样式表是一个包含样式规则的文本文件，它样式表是一个包含样式规则的文本文件，它的扩展名为的扩展名为*.CSS。它可分为它可分为2种类型。一种种类型。一种是用户自己创建的样式文件，称为内部样式是用户自己创建的样式文件，称为内部样式表；另一种是外部样式表文件，即把现成的表；另一种是外部样式表文件，即把现成的样式表文件链接到页面，直接使用它进行格样式表文件链接到页面，直接使用它进行格式控制。编辑外部样式表将会影响到所有链式控制。编辑外部样式表将会影响到所有链接
19、引用它的文件。我们先讲后一种情况。接引用它的文件。我们先讲后一种情况。185.2.2 链接外部样式表文件链接到一个外部样式表的操作方法如下：链接到一个外部样式表的操作方法如下：v选择选择【窗口窗口】/【CSS样式样式】命令，打开命令，打开【CSS样式样式】面板。面板。v在在【CSS样式样式】面板中单击右下角的面板中单击右下角的【附加样式表附加样式表】按钮，打开按钮，打开【链接外部样式表链接外部样式表】对话框。如图对话框。如图5-2所示。所示。v在在【文件文件/URL】文本框中输入外部样式表的文件名，文本框中输入外部样式表的文件名，或单击或单击【浏览浏览】按钮，打开按钮，打开【选择样式表文件选择
20、样式表文件】对对话框，如图话框，如图5-3所示，在对话框中选择外部样式表文件。所示，在对话框中选择外部样式表文件。195.2.2 链接外部样式表文件v【添加为添加为】的方式有两种：一种为的方式有两种：一种为【链接链接】Link；一种是一种是【导入导入】Import。这两种方式这两种方式的作用都是把外部样式引用到当前文档，但的作用都是把外部样式引用到当前文档，但链接标记可提供更多的功能，而且支持的浏链接标记可提供更多的功能，而且支持的浏览器更多。览器更多。v单击单击【确定确定】按钮。这时在按钮。这时在【CSS样式样式】面面板中可看到刚链接进来的外部样式文件。同板中可看到刚链接进来的外部样式文件。
21、同时，该样式文件的内容已自动运用到当前文时，该样式文件的内容已自动运用到当前文档。档。205.2.2 链接外部样式表文件 在在Dreamweaver MX 2004中，预先创建了一中，预先创建了一些现成的样式文件，我们可以把它链接在当前文档，些现成的样式文件，我们可以把它链接在当前文档，直接使用，可以快速进行格式控制。具体操作如下：直接使用，可以快速进行格式控制。具体操作如下：v选择选择【窗口窗口】/【CSS样式样式】命令，打开命令，打开【CSS样样式式】面板。面板。v在在【CSS样式样式】面板中单击右下角的面板中单击右下角的【附加样式表附加样式表】按钮，打开按钮，打开【链接外部样式表链接外部
22、样式表】对话框。对话框。v单击对话框中的单击对话框中的【范例样式表范例样式表】，打开，打开【范例样式范例样式表表】对话框，如图对话框，如图5-4所示。所示。215.2.2 链接外部样式表文件v一共有二十三种预先设置好的样式，选择其中一种，一共有二十三种预先设置好的样式，选择其中一种，例如：基本：例如：基本：Arial，该样式对该样式对body，td，th标签重标签重新进行定义。新进行定义。v指定样式表的指定样式表的【保存位置保存位置】，】，Dreamweaver MX 2004会自动把样式文件保存到网站的会自动把样式文件保存到网站的CSS目录下，目录下，若网站没有若网站没有CSS子目录，子目录
23、，Dreamweaver MX 2004会自动建立。会自动建立。v单击单击【确定确定】按钮。在按钮。在【CSS样式样式】面板中出现了面板中出现了该样式表，同时，该样式表文件已自动应用到当前该样式表，同时，该样式表文件已自动应用到当前文档。文档。225.2.3 应用类样式v直接通过直接通过【属性属性】面板以手工给文本设置格式，也面板以手工给文本设置格式，也会生成样式，该样式只对当前文档起作用。这种操会生成样式，该样式只对当前文档起作用。这种操作会自动在作会自动在【属性属性】面板的面板的【样式样式】文本框中生成文本框中生成新样式，名称分别为新样式，名称分别为Style1，Style2等，切换到等，
24、切换到代码视图，在代码视图，在中可以看到样式中可以看到样式文件的内容。文件的内容。v要想使用样式文件来控制段落或文本的格式，应先要想使用样式文件来控制段落或文本的格式，应先把所有手工设置的样式删除，这样做是为了避免产把所有手工设置的样式删除，这样做是为了避免产生冲突并导致意想不到的结果。生冲突并导致意想不到的结果。v尽管可以不受限制地在尽管可以不受限制地在Dreamweaver中设置中设置CSS2规范所定义的所有样式，但并不表示所有设置属性规范所定义的所有样式，但并不表示所有设置属性都会表现出来，有些属性浏览器还不支持，甚至相都会表现出来，有些属性浏览器还不支持，甚至相同的属性在同的属性在Mi
25、crosoft Internet Explorer 4.0和和Netscape Navigator 4.0中表现是不同的。中表现是不同的。235.2.3 应用类样式 在新建在新建CSS样式时，样式时，【标签标签】样式和样式和【高级高级】样式样式定义好后，会直接格式化当前文档对应的标签。而类定义好后，会直接格式化当前文档对应的标签。而类样式可以应用于文档的任何文本，所以类样式的应用样式可以应用于文档的任何文本，所以类样式的应用和前两者有所不同。具体操作如下：和前两者有所不同。具体操作如下：v选定要应用选定要应用CSS样式的文本。样式的文本。v在在【属性属性】面板中单击面板中单击【样式样式】下拉列
26、表，其中列出下拉列表，其中列出了所有可用的样式，选中需要的样式即可。了所有可用的样式，选中需要的样式即可。v标签样式和高级样式不会出现在标签样式和高级样式不会出现在【属性属性】面板的面板的【样样式式】列表中，因为它们不能应用于普通对象。列表中，因为它们不能应用于普通对象。v对相同文本应用两个以上的样式，可能会产生冲突，对相同文本应用两个以上的样式，可能会产生冲突，这时浏览器会根椐以下原则应用样式属性：这时浏览器会根椐以下原则应用样式属性：v如果两个样式应用于相同文本，则浏览器显示两个样如果两个样式应用于相同文本，则浏览器显示两个样式的所有属性（冲突属性除外）。冲突属性是指那些式的所有属性（冲突
27、属性除外）。冲突属性是指那些无法统一的属性，例如：一个样式指定文本颜色为红无法统一的属性，例如：一个样式指定文本颜色为红色，另一个样式由指定文本颜色为绿色色，另一个样式由指定文本颜色为绿色.245.2.3 应用类样式 如果应用于相同文本的属性产生冲突，一般遵循一下原则：v 1.就近原则；v 2.CSS优先于HTML；255.2.4 编辑样式 CSS样式建立好后，可以进行修改。在样式建立好后，可以进行修改。在Dreamweaver MX 2004中对样式的修改非常方便，中对样式的修改非常方便，有几种方法可以实现对样式表的修改。有几种方法可以实现对样式表的修改。v方法一：打开方法一：打开【CSS样
28、式样式】面板，选中一个样式文件，面板，选中一个样式文件，双击，则该样式文件以文本形式打开，可直接在文件双击，则该样式文件以文本形式打开，可直接在文件中修改。中修改。v方法二：打开方法二：打开【CSS样式样式】面板，选中一个已定义好面板，选中一个已定义好的的CSS标签，单击面板底部的编辑样式按钮，会弹出标签，单击面板底部的编辑样式按钮，会弹出如图如图5-11所示对话框，在这里对样式重新进行设置。所示对话框，在这里对样式重新进行设置。26v方法三：打开方法三：打开【CSS样式样式】面板，选中一个样式文面板，选中一个样式文件，单击面板底部的编辑样式按钮，会弹出如图件，单击面板底部的编辑样式按钮，会弹
29、出如图5-12所示对话框，在这里可附加样式、新建样式、编所示对话框，在这里可附加样式、新建样式、编辑样式、重命名、重制、删除样式。辑样式、重命名、重制、删除样式。v方法四：选择方法四：选择【窗口窗口】/【标签检查器标签检查器】，打开，打开【标标签检查器签检查器】面板，在面板，在【CSS样式样式】面板中选中一个面板中选中一个样式，则样式，则【标签检查器标签检查器】面板变为面板变为【规则规则】面板，面板，它有两个选项卡，一个是它有两个选项卡，一个是【显示类别视图显示类别视图】，一个，一个是是【显示列表视图显示列表视图】，如图，如图5-13 a，5-13 b所示。所示。在两种视图中都可直接修改。在两
30、种视图中都可直接修改。5.2.4 编辑样式275.3 CSS样式的属性设置样式的属性设置 5.3.1 设置类型属性设置类型属性 5.3.2 设置背景属性设置背景属性 5.3.3 设置区块属性设置区块属性 5.3.4 设置方框属性设置方框属性 5.3.5 设置边框属性设置边框属性 5.3.6 设置列表属性设置列表属性 5.3.7 设置定位属性设置定位属性 5.3.8 设置扩展属性设置扩展属性285.3 CSS样式的属性设置样式的属性设置v前面介绍了的如何建立前面介绍了的如何建立CSS样式表、编辑样式表、样式表、编辑样式表、运用样式表等操作，现在我们来介绍运用样式表等操作，现在我们来介绍CSS样式
31、表的样式表的属性。属性。vDreamweaver MX 2004把样式表的属性分为把样式表的属性分为8类，类，在在【新建新建CSS样式样式】对话框中单击对话框中单击【确定确定】按钮，按钮，可以打开可以打开【.unnamed1的的CSS样式定义样式定义】对话框，对话框，如图如图5-14所示。在所示。在【分类分类】列表中共有列表中共有8 个选项：个选项：【类型类型】、【】、【背景背景】、【】、【区块区块】、【】、【方框方框】、【】、【边边框框】、【】、【列表列表】、【】、【定位定位】、【】、【扩展扩展】，下面来一，下面来一 一介绍。一介绍。295.3.1 设置类型属性v【类型类型】属性主要是对网页
32、中的文本的字体、大小、颜色等属性主要是对网页中的文本的字体、大小、颜色等风格进行设置。风格进行设置。v【字体字体】：属性名为：属性名为“font-family”，从下拉列表中选择字从下拉列表中选择字体，也可以选择体，也可以选择【编辑字体列表编辑字体列表】选项，自定义字体列表。选项，自定义字体列表。v【大小大小】：属性名：属性名“fontsize”，设置字体的字号，单位常设置字体的字号，单位常用像素。用像素。v【粗细粗细】：属性名：属性名“font-weight”，用于设置字体的粗细效用于设置字体的粗细效果。有果。有【正常正常】（】（normal）、【）、【粗体粗体】（】（bold）、【）、【特
33、粗特粗】（】（bolder）、【）、【细体细体】（】（light）和具体粗细值等选项，和具体粗细值等选项，【正常正常】等于等于400，【，【粗细粗细】等于等于700。v【样式样式】：属性名：属性名“font-style”，用于设置字体的风格。有用于设置字体的风格。有【正常正常】（】（normal）、【）、【斜休斜休】（】（italic）、【）、【偏斜体偏斜体】（oblique）3个选项。个选项。v【变量变量】：属性名：属性名“font-variant”，包括正常和小型大写字包括正常和小型大写字母。母。305.3.1 设置类型属性v【行高行高】：属性名：属性名“font-height”，文本所在
34、行的行高。选择文本所在行的行高。选择【正常正常】选项，将自动计算字体的行高；否则，可以输入一个选项，将自动计算字体的行高；否则，可以输入一个精确值并选择其计算单位。常用单位是像素。精确值并选择其计算单位。常用单位是像素。v【大小写大小写】：属性名：属性名“text-transform”，指定字母大小写规则。指定字母大小写规则。有有【首写字母大写首写字母大写】（】（capitalize）、【）、【大写大写】（】（uppercase）、）、【小写小写】（】（lowercase）、【）、【无】（无】（none）4个选项。个选项。v【修饰修饰】：属性名：属性名“text-decoration”，用于控
35、制链接文本的用于控制链接文本的显示形态，有显示形态，有【下划线下划线】（】（underline）、【）、【上划线上划线】（overline）、【）、【删除线删除线】（】（line-through）、【）、【闪烁闪烁】（blink）、【）、【无】（无】（none）5种修饰方式。种修饰方式。v【颜色颜色】：属性名：属性名“color”，用于设置字体的颜色用于设置字体的颜色 31例如：定义了一个类样式例如：定义了一个类样式.unnamed1，内容为：内容为：.unnamed1font-family:方正舒体方正舒体;font-size:36px;font-style:italic;font-weig
36、ht:bold;color:#FF0000;5.3.1 设置类型属性325.3.2 设置背景属性 在在CSS样式定义对话框的样式定义对话框的【分类分类】列表中列表中选择选择【背景背景】选项，如图选项，如图5-15所示。该选项所示。该选项的主要功能是在网页的元素后面添加的背景的主要功能是在网页的元素后面添加的背景色或背景图像。各属性的意义如下：色或背景图像。各属性的意义如下：335.3.2 设置背景属性v【背景颜色背景颜色】：属性名：属性名“background-color”，用于设置元用于设置元素的背景颜色。素的背景颜色。v【背景图像背景图像】：属性名：属性名“background-image
37、”，给网页元素给网页元素设置背景图像。设置背景图像。v【重复重复】：属性名：属性名“background-repeat”，用于控制背景图用于控制背景图像的平铺方式。包括以下几个选项（属性值）：像的平铺方式。包括以下几个选项（属性值）：v【不重复不重复】（】（no-repeat）：）：图像不平铺。图像不平铺。v【重复重复】（】（repeat）:图像沿水平及垂直方向重复排列。图像沿水平及垂直方向重复排列。v【横向重复横向重复】（】（repeat-x）:图像沿水平方向平铺。图像沿水平方向平铺。v【纵向重复纵向重复】（】（repeat-y）:图像沿垂直方向平铺图像沿垂直方向平铺345.3.2 设置背景
38、属性v【附件附件】：属性名（：属性名（background-attachment），），选择选择【固定固定】选项（选项（fixed），），背景将不随滚动条的拖支而改变；背景将不随滚动条的拖支而改变；选择选择【滚动滚动】选项（选项（scroll），），背景将随滚动条而滚动。背景将随滚动条而滚动。v【水平位置水平位置】：属性名：属性名“background-position”，用来确定用来确定背景图像的水平排列方式。包括背景图像的水平排列方式。包括【左对齐左对齐】（】（left）、【）、【右右对齐对齐】（】（right）、【）、【居中对齐居中对齐】（】（center）、【）、【值】值】（value
39、）等选项。等选项。v【垂直位置垂直位置】：属性名：属性名“background-position”，用来确定用来确定背景图像的垂直排列方式。包括背景图像的垂直排列方式。包括【顶部顶部】（】（top）、【）、【居中居中】（】（center）、【）、【底部底部】（】（bottom）、【）、【值】（值】（value）等等选项。选项。355.3.3 设置区块属性 在在CSS样式定义对话框的样式定义对话框的【分类分类】列表中列表中选择选择【区块区块】选项，如图选项，如图5-16所示。区块是所示。区块是指网页中的文本、图像、层等元素。该选项指网页中的文本、图像、层等元素。该选项的主要用来控制区块的间距、对
40、齐方式和文的主要用来控制区块的间距、对齐方式和文字缩进等。各属性的意义如下：字缩进等。各属性的意义如下：365.3.3 设置区块属性v单词间距：属性名单词间距：属性名“word-spacing”，控制单词之间的距离。控制单词之间的距离。有有【正常正常】（】（normal）和【值】（和【值】（value）两种。两种。v字母间距：属性名字母间距：属性名“letter-spacing”，控制字符之间的距控制字符之间的距离。有离。有【正常正常】（】（normal）和【值】（和【值】（value）两种。两种。v垂直对齐：属性名垂直对齐：属性名“vertical-align”，用于控制元素相对用于控制元素
41、相对其母体元素的垂直位置。共有其母体元素的垂直位置。共有5个选项。例如：选择个选项。例如：选择【基线基线】（】（baseline），），则元素的基准线同母体元素的基准线对齐；则元素的基准线同母体元素的基准线对齐；选择选择【下标下标】（】（sub），），则元素以下标的形式显示；则元素以下标的形式显示；【上标上标】（】（super），），元素将以上标的形式出现元素将以上标的形式出现；【；【顶部顶部】（top），），元素的顶部与母体元素的顶部对齐。元素的顶部与母体元素的顶部对齐。v文本对齐：属性名文本对齐：属性名“text-align”，用于指定文本的水平对用于指定文本的水平对齐方式。共有齐方式。共
42、有【左对齐左对齐】（】（left）、【）、【居中对齐居中对齐】（center）、【）、【右对齐右对齐】（】（right）、【）、【两端对齐两端对齐】（justify）4个选项。个选项。375.3.3 设置区块属性v文字缩进：属性名文字缩进：属性名“text-indent”，用于指定文本用于指定文本块中首行的缩进距离。块中首行的缩进距离。v空格：属性名空格：属性名“white-space”，指定空格的处理方指定空格的处理方式。在式。在HTML文档中，从键盘输入的空格是无效的。文档中，从键盘输入的空格是无效的。要输入空格，只有插入空格的代码要输入空格，只有插入空格的代码“ ”，或或者是用
43、预定义格式标签者是用预定义格式标签，把空格保留。该属把空格保留。该属性有性有3个选项：个选项：【正常正常】、【】、【保留保留】、【】、【不换行不换行】。v显示：属性名显示：属性名“display”，用于设置区块的显示方用于设置区块的显示方式。式。385.3.4 设置方框属性 CSS将网页中所有的块元素都看作是包含将网页中所有的块元素都看作是包含在一个方框中，对方框的设置包括方框的宽在一个方框中，对方框的设置包括方框的宽度、高度，块元素与方框的距离，方框的边度、高度，块元素与方框的距离，方框的边界等。在界等。在CSS样式定义对话框的样式定义对话框的【分类分类】列列表中选择表中选择【方框方框】选项
44、，如图选项，如图5-17所示。所示。395.3.4 设置方框属性v【宽】【宽】：属性名：属性名“width”，设定方框的宽度。设定方框的宽度。v【高】【高】：属性名：属性名“height”，设定方框的高度。设定方框的高度。v【浮动浮动】：属性名：属性名“float”，用于设置块元素的浮用于设置块元素的浮动效果。动效果。v【清除清除】：属性名：属性名“clear”，用于清除设置的浮动用于清除设置的浮动效果。效果。v【填充填充】：属性名：属性名“margin”，用于设置块元素与用于设置块元素与边框的距离。包含边框的距离。包含【上】、【右】、【下】、【左【上】、【右】、【下】、【左】4项。项。405
45、.3.4 设置方框属性v【上】【上】：（：（margin-top）控制上边距的宽度控制上边距的宽度.v【右】【右】：（：（margin-right）控制右边距的宽度控制右边距的宽度.v【下】【下】：（：（margin-bottom）控制下边距的宽度控制下边距的宽度.v【左】【左】：（：（margin-left）控制左边距的宽度控制左边距的宽度.v【边界边界】：属性名：属性名“padding”，用于控制块元素与其他元用于控制块元素与其他元素之间的距离。也有素之间的距离。也有4个选项。个选项。v【上】【上】：（：（padding-top）控制上边界的宽度控制上边界的宽度.v【右】【右】：（：（pa
46、dding-right）控制右边界的宽度控制右边界的宽度.v【下】【下】：（：（padding-bottom）控制下边界的宽度控制下边界的宽度.v【左】【左】：（：（padding-left）控制左边界的宽度控制左边界的宽度.415.3.5 设置边框属性 在在CSS样式定义对话框的样式定义对话框的【分类分类】列表中选择列表中选择【边框边框】选选项，如图项，如图5-23所示。该选项主要用来定义边框的。所示。该选项主要用来定义边框的。v【样式【样式】：属性名：属性名“border-style”，用于设定边框线的样式。用于设定边框线的样式。包括包括【上】、【右】、【下】、【左】【上】、【右】、【下】
47、、【左】4个选项。每个选项又个选项。每个选项又有以下有以下5 个子选项：个子选项：v【无】（【无】（none）：）：没有边框线；没有边框线；【点划线点划线】（】（dotted）：）：边边框线为短线；框线为短线；【虚线虚线】（】（dashed）：）：边框线为点线；边框线为点线；【实线实线】（】（solid）：）：边框线为实线；边框线为实线；【双线双线】（】（double）：）：边框线边框线为双线；为双线；【槽状槽状】（】（groove）：）：边框线为槽状；边框线为槽状；【脊状脊状】（ridge）：）：边框线为脊状。和槽状相反。边框线为脊状。和槽状相反。【凹陷凹陷】（inset）；【）；【凸出凸出
48、】（】（outset）。）。v宽度：属性名宽度：属性名“border-width”，用于设定边框线的宽度，有用于设定边框线的宽度，有【细】、【中】、【粗】、【值】【细】、【中】、【粗】、【值】4个选项。个选项。v颜色：属性名颜色：属性名“border-color”，用于设置边框线的颜色。用于设置边框线的颜色。v例如：我们把文件例如：我们把文件“fangkuang.htm”的边框线设置为虚线，的边框线设置为虚线，宽度为宽度为1像素，蓝色。选定类样式像素，蓝色。选定类样式.aa，编辑，重新设置编辑，重新设置【边边框框】属性，如图属性，如图5-24所示。查看效果。所示。查看效果。425.3.6 设置
49、列表属性 在在CSS样式定义对话框的样式定义对话框的【分类分类】列表框中选择列表框中选择【列表列表】选项，如图选项，如图5-25所示。该选项是主要用来定义列表属性。所示。该选项是主要用来定义列表属性。v【类型类型】：属性名：属性名“list-style-type”，指定项目符号或编指定项目符号或编号的外观。号的外观。v【项目符号图像项目符号图像】：属性名：属性名“list-style-image”，用于指用于指定自定义符号的图像，既可以直接输入文件名，也可以单击定自定义符号的图像，既可以直接输入文件名，也可以单击【浏览浏览】按钮，浏览并选择合适的图像文件。按钮，浏览并选择合适的图像文件。v【位
50、置位置】：属性名：属性名“list-style-position”，用于决定列表用于决定列表项换行时缩进还是边缘对齐。要缩进时，选择项换行时缩进还是边缘对齐。要缩进时，选择【外】【外】选项；选项；要边缘对齐，则选择要边缘对齐，则选择【内】【内】选项。选项。435.3.7 设置定位属性 在在CSS样式定义对话框的样式定义对话框的【分类分类】列表框列表框中选择中选择【定位定位】选项，如图选项，如图5-26所示。该选所示。该选项是主要用来精确定位层位置。项是主要用来精确定位层位置。445.3.7 设置定位属性v【类型类型】：属性名：属性名“position”，用于选择层定位的方式，用于选择层定位的方