CSS样式表模板表单的应用

《CSS样式表模板表单的应用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章CSS样式表、模板、表单4.1CSS4.2模板4.3表单北京化工大学北方学院信息学院教研室样式是预先定义好的、格式化文档的工具。本节中介绍的层叠样式表（CascadingStyleSheets,以下简称CSS样式表）是由W3C（WordWideWebConsortium）组织批准的一种网页元素定义规则，是一种可以对网页文档内容进行精确格式化控制的工具。利用CSS样式表可自动格式化网页文档，可将CSS样式表直接存储在网页文档中，也可以将CSS样式表定义在网页文档之外，然后将它链接到多个文档中。当

2、CSS样式表被修改后，使用CSS样式表的网页文档格式也都将自动更新。CSS样式表能够控制大多数常用的文本格式属性，如字体、尺寸、对齐方式等，还可以控制位置、特殊效果、鼠标翻转等很多HTML样式不能控制的属性4.1.1层叠样式表概述北京化工大学北方学院信息学院教研室在Dreamweaver8中，选择【窗口】

3、【CSS样式】命令，或者按组合键Shift+F11，也可以单击【属性】面板的【CSS】按钮，就可以打开【CSS样式】面板，如图7-1所示。使用【CSS样式】面板可以完成查看、创建、编辑和删除CSS

4、样式的操作，并且可以将外部样式表附加到当前网页文档，完成格式化网页文档的操作。在【CSS样式】面板下方左下角有【类别】视图、【列表】视图和【设置属性】视图3个按钮，右下角有4个对CSS样式进行操作的按钮，这些按钮的作用如下。4.1.2层叠样式表的创建与编辑北京化工大学北方学院信息学院教研室图4-1【CSS样式】面板北京化工大学北方学院信息学院教研室【类别】视图：Dreamweaver支持的CSS属性分为8个类别，字体、背景、区块、边框、方框、列表、定位和扩展。每个类别的属性都包含在一个列表中，可以

5、单击类别名称旁边的加号或减号按钮，展开或折叠这个类别。【列表】视图：按字母顺序显示Dreamweaver所支持的所有CSS属性。【设置属性】视图：仅显示那些已设置的CSS属性。附加样式：单击此按钮，可选择一个外部样式表文件，并将其链接或导入到当前文档。新建样式：单击此按钮，可打开新建样式对话框，新建一个样式。编辑样式：单击此按钮，可打开编辑样式对话框，编辑制定的样式。删除样式：选中列表中的样式后，单击此按钮可删除该样式。北京化工大学北方学院信息学院教研室新建一个CSS样式，该样式的存放方式有3种。

6、如果仅作用于当前网页文档的CSS样式，则与网页文件一起保存。存放在某个已建好的外部CSS样式表文件中。应先附加该样式表文件，然后将新建的CSS样式存放其中。存放在一个新建的CSS样式表文件中。应先新建该样式表文件，然后将新建的CSS样式存放其中。4.1.3创建层叠样式和层叠样式表北京化工大学北方学院信息学院教研室在【CSS样式】面板中，设计者可以创建CSS样式，在一个CSS样式表文件中可以包含一个或多个CSS样式。创建CSS样式和CSS样式表的操作步骤如下：（1）选择【窗口】

7、【CSS样式】命令

8、，打开【CSS样式】面板。（2）单击【CSS样式】面板右上角的快捷菜单按钮，在弹出的快捷菜单中,选择【新建样式】命令，或单击浮动面板右下方的【新建样式】按钮，打开【新建CSS规则】对话框，如图4-2所示。北京化工大学北方学院信息学院教研室图4-2【新建CSS规则】对话框北京化工大学北方学院信息学院教研室（3）在【选择器类型】选项组中，选择要定制的CSS样式类型单选项。该选项组中3个选项的意义如下：选中【类（可应用于任何标签）】单选项后，可在【名称】下拉列表框中输入样式的名称，该名称必须以“.”开始，

9、确认后便可以创建一个应用于文本范围和选择区域的Class属性的样式。选中【标签（重新定义定义特定标签的外观）】单选项后，则可在【标签】下拉列表框中输入一个HTML标记，或从下拉列表框中选择一个标记，这样便可以重新定义定制的HTML标记的格式，如图4-3所示。北京化工大学北方学院信息学院教研室图4-3选择重定义HTML标签后的对话框北京化工大学北方学院信息学院教研室选中【高级(ID、伪类选择器等)】单选项后，则可为特殊的标签组合或含有特定ID属性的标签定义样式。在【选择器】文本框中输入一个选择器的标签

10、，或从【选择器】下拉列表中选择一个标签，如图7-4所示。如果要创建一个新样式，应选中【类（可应用于任何标签）】单选项后，在【名称】下拉列表框中输入新样式的名称。（4）在【定义在】选项组的下拉列表中，选择当前要创建的CSS样式定义在那个样式表文件中。可以是定义在新的样式表文件中，也可以是将CSS样式定义在某个已经创建好的样式表文件中。北京化工大学北方学院信息学院教研室图4-4选择【使用CSS选择器】后的对话框北京化工大学北方学院信息学院教研室若要创建仅仅作用于当前文档的