1、本章主要内容本章主要内容HTMLHTML样式样式5 5 样式表样式表CSSCSS样式样式HTMLHTML样式与样式与CSSCSS样式样式HTMLHTML样式元素是指由样式元素是指由HTMLHTML提供的设计页面显示样式的元素，提供的设计页面显示样式的元素，如如fontfont、物理类和逻辑类元素等。、物理类和逻辑类元素等。CSSCSS样式样式CSS(CascadingCSS(Cascading Style Sheet)Style Sheet)层叠式样式表，是国际组织层叠式样式表，是国际组织W3CW3C制制定的扩展定的扩展HTMLHTML功能的标准，功能的标准，CSSCSS样式广泛适用于文本、图
2、形等样式广泛适用于文本、图形等网页元素的格式化工作，方便网页的制作和维护，还能产生半透网页元素的格式化工作，方便网页的制作和维护，还能产生半透明图像等特殊效果。明图像等特殊效果。“窗口窗口/CSS样式样式”命令命令CSSCSS的另一个特点是它的灵活性。有了的另一个特点是它的灵活性。有了CSSCSS，人们不必再把繁杂的样式，人们不必再把繁杂的样式定义编写在文档结构中，可以将所有有关于文档的样式指定内容全部分定义编写在文档结构中，可以将所有有关于文档的样式指定内容全部分脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供HTMLHTM
3、L调用。在设计网站时，可以将站点上所有的网页风格都使用一个调用。在设计网站时，可以将站点上所有的网页风格都使用一个CSSCSS文件进行控制，只要修改这个文件进行控制，只要修改这个CSSCSS文件中相应的行，那么整个站点文件中相应的行，那么整个站点的所有页面都会随之发生变动。的所有页面都会随之发生变动。CSSCSS样式的特点样式的特点CSSCSS是是Cascading Style SheetsCascading Style Sheets（层叠样式表单）的简称。是（层叠样式表单）的简称。是W3CW3C在在19961996年底推出的一项年底推出的一项WebWeb网络规范，现在的网络规范，现在的IEI
4、E和和NetscapeNetscape浏览器都支浏览器都支持这项技术，它已经广泛地应用到持这项技术，它已经广泛地应用到WebWeb网页中。网页中。CSSCSS的最大特点是强大的格式控制能力。它弥补了的最大特点是强大的格式控制能力。它弥补了HTMLHTML在控制网页的格在控制网页的格式方面的不足，除了支持式方面的不足，除了支持HTMLHTML原有的颜色、字体、背景等样式外，原有的颜色、字体、背景等样式外，CSSCSS还可以控制字符间距、填充距、大小写等多达还可以控制字符间距、填充距、大小写等多达5050个左右的样式，显示出个左右的样式，显示出了强大的格式控制能力。在网页设计中使用了强大的格式控制
5、能力。在网页设计中使用CSS,CSS,可以使页面的字体变得可以使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。更漂亮，更容易编排，使页面真正赏心悦目。（1）嵌入式样式表）嵌入式样式表所谓嵌入式层叠样式表，就是将样式表嵌入到文档中，它放在文档的头所谓嵌入式层叠样式表，就是将样式表嵌入到文档中，它放在文档的头部部head元素中。创建嵌入式层叠样式表使用元素中。创建嵌入式层叠样式表使用HTML提供的提供的style元素，元素，其语法如下：其语法如下：style中所包含的样式规则由若干条样式规则组成，并且放在注释标记中，中所包含的样式规则由若干条样式规则组成，并且放在注释标记中，当济览器不支持
6、层叠样式表时，可以忽略样式表。当济览器不支持层叠样式表时，可以忽略样式表。创建和使用样式表创建和使用样式表样式表是由样式规则组成的，创建样式表就是按照页面设计要样式表是由样式规则组成的，创建样式表就是按照页面设计要求将若干个样式规则组织在一起。求将若干个样式规则组织在一起。用用style元素创建样式表元素创建样式表【例例5.13】嵌入文档中的嵌入文档中的css样式表范例。样式表范例。在文档的头部嵌入样式表，可供整个文档使用，但有时仅对某个元素设在文档的头部嵌入样式表，可供整个文档使用，但有时仅对某个元素设置显示样式时，可用元素的属性置显示样式时，可用元素的属性style来创建这个元素的样式规则
7、。来创建这个元素的样式规则。例如：例如：行内样式表行内样式表 (2)行内样式表行内样式表外部样式表是将样式表以文件的形式存储，其文件的扩展中为外部样式表是将样式表以文件的形式存储，其文件的扩展中为.css，样式，样式表文件中只包含样式规则，这种样式表可以提供给多个文档使用。表文件中只包含样式规则，这种样式表可以提供给多个文档使用。(3)外部样式表外部样式表style.css文件内容：文件内容：Pfont-size:12pt;color:black;H1font-size;20pt;LIfont-size:12pt;color:red;a:linkcolor:blue;text-decorati
8、on:none;a:activecolor:red;text-decoration:none;a:visitedcolor:green;text-decoration:none;a:hovercolor:red;text-decoration:underline;例如下面的样式规则，通过文字编辑后保存名为例如下面的样式规则，通过文字编辑后保存名为style.css文件就文件就是一个外部样式表。是一个外部样式表。DreamweaverDreamweaver 中创建样式表的方法中创建样式表的方法（1）从“窗口”菜单中选择“CSS样式”命令或从浮动面板中单击“设计”菜单，弹出如右图所示的设计样式面板
9、。选择CSS样式中的“应用样式”并单击图中所示的“新建CSS样式”按钮，弹出“新建CSS样式”对话框，如下图所示。（2）若选择）若选择“创建自定义样式（创建自定义样式（class）”，在，在“名称名称”栏中需栏中需要填入类名，如要填入类名，如mystyle;若选择若选择“重定义重定义HTML标签标签”，在，在“名名称称”栏中需要填入栏中需要填入HTML的元素名；若选择的元素名；若选择“使用使用CSS选择器选择器”，在在“名称名称”栏中需要填入伪类名。栏中需要填入伪类名。CSS样式表可定义在样式表文件中或在内嵌式样式表中。选择样式表可定义在样式表文件中或在内嵌式样式表中。选择“新建样式表文件新建
10、样式表文件”并单击并单击“确定确定”按钮后，弹出保存文件对话按钮后，弹出保存文件对话框，为框，为CSS样式表文件名以及保存位置进行指定；选择样式表文件名以及保存位置进行指定；选择“仅对该仅对该文档文档”项，为文档定义内嵌式样式表。项，为文档定义内嵌式样式表。（3）在弹出的样式定义框中可分别定义八大类规则。如选）在弹出的样式定义框中可分别定义八大类规则。如选择择“类型类型”，可定义，可定义font、text和和color等属性，如图所示；等属性，如图所示；选择选择“定位定位”，可定义，可定义position、visibility、Z-index、width、height、left、top 等属性
11、。等属性。（4）单击样式定义框中的）单击样式定义框中的“确定确定”或或“应用应用”按钮，按钮，所定义的样式存储在样式表文件中或嵌入到文档中。所定义的样式存储在样式表文件中或嵌入到文档中。链接样式表是使用外部样式表的方法之一。链接样式表是使用外部样式表的方法之一。HTML提供提供了链接外部文件的元素养了链接外部文件的元素养link，使用时必须将链接信息加入，使用时必须将链接信息加入到到标记内。标记内。link链接样式表的语法为：链接样式表的语法为：备注：备注：href属性值是要链接的外部样式表文件的地址；属性值是要链接的外部样式表文件的地址；type属性值指出了链接文件的类型。属性值指出了链接文
12、件的类型。使用样式表使用样式表由于内嵌式样式表和行内样式表与控制显示的元素在同一个文档之中，由于内嵌式样式表和行内样式表与控制显示的元素在同一个文档之中，样式表定义后可直接使用。而对外部样式表来说，使用时必须先将外样式表定义后可直接使用。而对外部样式表来说，使用时必须先将外部样式表文件导入文档。部样式表文件导入文档。HTML提供了两种方法：用提供了两种方法：用link元素链接样式元素链接样式表和用表和用import来输入样式表。来输入样式表。链接外部样式表链接外部样式表例如：例如：输入样式表与链接样式表类似输入样式表与链接样式表类似,它是使用外部样式表的另一种方法它是使用外部样式表的另一种方法
13、,也是内也是内嵌式样式表的扩展嵌式样式表的扩展.输入样式表使用输入样式表使用import,并且要放在并且要放在内内,其方法为其方法为:import UTL（filename of css）；）；例如：例如：import url(hompage.css)；import url(stylel.css)pfont-family：宋体；：宋体；font-size:12pt;.tdstylefont-size:9px;background-color:#aa3366;输入外部样式表输入外部样式表设置设置CSS样式表格式参数样式表格式参数从从“编辑编辑”菜单中选择菜单中选择“参数选择参数选择”，弹出，弹出
14、“参数选择参数选择”框，然后从框，然后从“分分类类”列表中选择列表中选择“CSS样式样式”，设置要应用的，设置要应用的CSS样式选项：样式选项：（1）当选择）当选择“使用速记使用速记”时，可使时，可使Dreamweaver MX以速记形式编写以速记形式编写CSS样式属样式属（2）选）选“当编辑当编辑CSS样式时使用速记样式时使用速记”时，可控制时，可控制Dreamweaver MX是否是否以速记形式重新编写现有样式；选择以速记形式重新编写现有样式；选择“如果原来使用速记如果原来使用速记”使使Dreamweaver MX将所有样式保留原样；选择将所有样式保留原样；选择“依据以上设置依据以上设置”
15、使使Dreamweaver MX以速记以速记形式重新为形式重新为“使用速记使用速记”中选择的属性编写样式。中选择的属性编写样式。管理样式表管理样式表在在Dreamweaver MX中可对中可对CSS样式表格式参数进行设置，对已样式表格式参数进行设置，对已存在的存在的CSS样式表进行编辑、复制、删除、转换为样式表进行编辑、复制、删除、转换为XHTML或或HTML标记等操作。标记等操作。修改样式修改样式 要修改已有的样式，操作步骤如下：要修改已有的样式，操作步骤如下：A.在在“CSS 样式样式”面板中，单击面板中，单击“编辑样式编辑样式”单选按钮查看当前文档中的样式。单选按钮查看当前文档中的样式。
16、B.单击要修改的样式以选中它，然后执行下列操作之一：单击要修改的样式以选中它，然后执行下列操作之一：1.双击所选样式。双击所选样式。2.右击或按住右击或按住 Ctrl 键并单击，然后选择键并单击，然后选择“编辑编辑”。3.单击位于单击位于“CSS 样式样式”面板底部的面板底部的“编辑样式表编辑样式表”按钮按钮。“CSS 样式定义样式定义”对话框随即打开，即可对所选样式进行修改。对话框随即打开，即可对所选样式进行修改。编辑编辑CSS样式样式对已有的样式，经常需要进行修改、删除、复制等操作，这些操作都可以通对已有的样式，经常需要进行修改、删除、复制等操作，这些操作都可以通过过“CSS 样式样式”面
17、板对话框来完成。其操作步骤如下：面板对话框来完成。其操作步骤如下：删除样式删除样式 要删除已有的样式，操作步骤如下：要删除已有的样式，操作步骤如下：A.在在“CSS 样式样式”面板中，单击面板中，单击“编辑样式编辑样式”单选按钮查看当前文档单选按钮查看当前文档中的样式。中的样式。B.单击要删除的样式以选中它，然后执行下列操作之一：单击要删除的样式以选中它，然后执行下列操作之一：右击或按住右击或按住 Ctrl 键并单击，然后选择键并单击，然后选择“删除删除”命令。命令。单击位于单击位于“CSS 样式样式”面板底部的面板底部的“删除删除CSS样式样式”按钮按钮。即可删除所选样式。即可删除所选样式。
18、复制样式复制样式 要复制已有的样式，操作步骤如下：要复制已有的样式，操作步骤如下：A.在在“CSS 样式样式”面板中，单击面板中，单击“编辑样式编辑样式”单选按钮查看当前文档中的单选按钮查看当前文档中的样式。样式。B.单击要复制的样式以选中它，右击或按住单击要复制的样式以选中它，右击或按住 Ctrl 键并单击，然后选择键并单击，然后选择“复复制制”命令，则弹出命令，则弹出“复制复制CSS样式样式”的对话框，如图的对话框，如图5.64所示。所示。图图5.64 “复制复制CSS样式样式”对话框对话框C.输入要复制的样式名称后，单击输入要复制的样式名称后，单击“确定确定”，则完成所选样式的，则完成所
19、选样式的复制。复制。CSS样式样式嵌入式样式表嵌入式样式表:对某个具体的网页定义的样式对某个具体的网页定义的样式,它的表现它的表现形式是直接将样式插入到网页的形式是直接将样式插入到网页的HTML代码中，不出代码中，不出现在样式表面板中现在样式表面板中,定义的样式自动应用到网页中。定义的样式自动应用到网页中。外部样式表：将外部样式表：将CSS样式保存为单独的一个样式保存为单独的一个文件文件(.css)，网页中可以创建对某个现成样式网页中可以创建对某个现成样式表的链接，而且多个网页可以使用同一个样表的链接，而且多个网页可以使用同一个样式表的样式式表的样式.局部应用样式表：也是对某个具体的网页定义的样式局部应用样式表：也是对某个具体的网页定义的样式,定义的样式显示在样式表面板中定义的样式显示在样式表面板中,可以选择某段文本或可以选择某段文本或图像使用所定义的样式。图像使用所定义的样式。去除超链接的下划线去除超链接的下划线选择新建选择新建CSS样样式命令式命令嵌入式样式表嵌入式样式表直接将样式插直接将样式插入到网页的入到网页的HTML代码中代码中定义文字样式定义文字样式局部应用样式表局部应用样式表选择选择“导出样式表导出样式表”命命令，导出为外部样式表，令，导出为外部样式表，在其它的网页中可应用在其它的网页中可应用此样式表的样式此样式表的样式
