在网页中使用CSS样式Word格式文档下载.docx

在网页中使用CSS样式Word格式文档下载.docx

《在网页中使用CSS样式Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《在网页中使用CSS样式Word格式文档下载.docx（18页珍藏版）》请在冰豆网上搜索。

CSS样式为一组样式，它的属性在HTML标签中依次出现，并不显示在浏览器中。

CSS样式可以定义在HUE文档的标记里，也可以在外部附加文档中作为外加文件。

此外，一个样式表可以作用多个页面，乃至整个站点，因此具有更好的易用性和扩展性。

使用CSS技术除了可以在单独网页中应用一致的格式以外，对于大网站的格式设置和维护更具有重要意义。

将CSS样式定义到样式表文件中，然后在多个网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。

由于CSS具有以上这些优点，它已经成为一种应用非常广泛的网页设计技术，甚至可以说，如果不懂CSS技术就很难设计出专业化的网站。

10.1.2CSS样式的分类

DreamweaverMX可以定义几种不同类型的CSS样式，并且可以使用不同的方法将其应用在网页文档中。

通常有以下3种CSS样式。

（1）创建自定义样式（CustomCSSstyles）：

自定义CSS样式可以应用于任何文本。

若将自定义样式应用于整段文本，则会在该段文本的源代码中加入CLASS属性，例如PCLASS=“testStyle”；

若将自定义样式应用于一行文本，则在选择的文本源代码的两边插入包含了CLASS属性的SPAN标记。

（2）重定义HTML标签（HTMLtagstyles）：

HTML标签样式为HTML标识符重新定义格式化，如<

H3>

。

当重新定义格式化<

后，所有<

应用标识符的文本都会改变而应用新的样式。

（3）使用CSS选择器（CSSselectorstyles）：

CSS选择器样式重新定义了特殊的标记组以及包含特殊序列号（ID）属性标记。

如<

TD>

<

这样的标记组合表示在表格单元格中的文本应用二级标题；

而#testStyle应用于所有包含属性值ID=“testStyle”的标记中。

10.1.3CSS样式的应用方式

使用CSS的样式有以下几种方式。

（1）局部套用：

使用CSS语法定义HTML标签，这种方式应用的CSS样式只能影响该HTML标签。

（2）内联式：

将CSS语法写在文档头部的<

STYLE>

和<

/STYLE>

标签中，这种方式应用的CSS样式将影响整个页面。

（3）外联式：

将创建好的CSS样式保存为.css文件，在多个文档中链接此.css文件，而在文档中不会出现CSS语法。

当.css文件被修改时，所有链接此.css文件的页面将同时被更新。

10.1.4CSS样式的冲突

在同一个文本中应用两种或两种以上的CSS样式，这些样式会相互冲突产生不可预料的效果。

浏览器根据以下规则显示样式属性。

（1）如果在同一个文本中应用两种CSS样式，浏览器显示出两种样式中除冲突的属性之外的所有属性。

（2）如果在同一个文本中应用两种CSS样式相互冲突，浏览器显示出最里面的样式属性。

（3）如果存在直接冲突，自定义CSS样式的属性（应用CLASS属性的样式）将覆盖HTML标记样式的属性。

10.2使用CSS样式表面板

使用CSS样式设置面板可以创建和管理CSS样式。

通过下面的操作方法可以启用CSS样式表面板。

执行主菜单中的“窗口”→“CSS样式”命令。

在网页文档窗口的右侧，单击“设计”浮动面板的下拉三角形按钮。

按组合键Shift+F11键。

以上3种方法之一都可以打开CSS样式表面板，默认为“应用样式”视图，还可以切换到“编辑样式”视图，如图10-1所示。

图10-1CSS样式表面板

在CSS样式面板中可以进行下面的操作。

（1）在列表中显示当前网页文档中的CSS样式。

（2）单击该面板底部工具栏上的“附加样式表”按钮，将打开“链接外部样式表”对话框，链接或导入外部的CSS样式表。

（3）单击该面板底部工具栏上的“新建CSS样式”按钮，将打开“新建CSS样式”对话框，设置新建CSS样式表的类型。

（4）单击该面板底部工具栏上的“编辑样式表...”按钮，将打开“编辑样式表”对话框，设置CSS样式表的属性。

（5）单击该面板底部工具栏上的“删除CSS样式”按钮，将删除选定的CSS样式表，并删除应用该CSS样式表的格式。

此外，用鼠标右击CSS样式面板中的样式名称，从弹出的快捷菜单中选择相关命令，也可以完成上面的操作，如图10-2所示。

10.3新建CSS样式

上面介绍了CSS样式的类型、使用方式，以及操作CSS样式面板的基本方法。

下面将了解新建CSS样式的方法。

具体操作步骤如下。

（1）将光标插入点置于网页文档中的适当位置。

（2）打开“CSS样式表”设置面板，单击“新建CSS样式”按钮，打开“新建CSS样式”对话框，如图10-3所示。

图10-3“新建CSS样式”对话框

在“新建CSS样式”对话框中可以进行下列各项的设置。

①在“类型”区域中选择“创建自定义样式”选项，然后在“名称”下拉列表框中输入新建CSS样式的名称。

②在“类型”区域中选择“重定义HTML标签”选项，然后在“标签”下拉列表框中输入或从中选择一种HTML标签，如图10-4所示。

图10-4“重定义HTML标签”选项对话框

③在“类型”区域中选择“使用CSS选择器”选项，然后在“选择器”下拉列表框中输入一个或多个HTML标签，也可以从下拉列表框中选择一种状态。

如图10-5所示，共有以下4种状态。

图10-5“使用CSS选择器”选项对话框

a：

link：

超链接的正常显示状态。

visited：

已访问超链接的状态。

hover：

鼠标停留在超链接上时的状态。

active：

表示超链接有激活状态。

④在“定义在”区域中选择新建CSS样式的位置。

新建样式表文件：

用于创建外部的样式表。

仅对该文档：

将新建的CSS样式嵌入到当前网页文档中。

（3）单击“确定”按钮完成设置，同时打开“保存样式表文件为”对话框，如图10-6所示。

选择要保存的位置，指定文件名（默认的文件类型为.css），然后单击“保存”按钮。

图10-6“保存样式表文件为”对话框

（4）接着又弹出“CSS样式定义”对话框，如图10-7所示，可以定义CSS样式各项参数（具体方法见10.4节）。

图10-7“CSS样式定义”对话框

（5）在“CSS样式定义”对话框中设置完成后，单击“确定”按钮，生成CSS样式，并在CSS样式面板中显示刚刚创建的CSS样式。

10.4设置“CSS样式定义”对话框参数

通过设置“CSS样式定义”对话框，可以定义CSS样式表的格式化参数。

在该对话框左侧的“分类”列表框中选择不同的属性进行设置。

10.4.1定义CSS样式的“类型”（Type）属性

选择“CSS样式定义”对话框中“分类”列表中的“类型”选项，可以对CSS样式的“类型”属性进行设置，如图10-8所示。

图10-8定义CSS样式的“类型”属性

在该对话框中可以对“类型”属性进行如下设置。

（1）在“字体”下拉列表框中选择需要的字体。

（2）在“大小”下拉列表框中设置字体的大小。

可以选择参数值，也可以直接输入数值，并从其右侧的单位设置框中选择适合的参数值。

（3）在“样式”下拉列表框中设置字体的风格。

正常：

设置文本为正常字体。

斜体：

设置文本为斜体字体。

偏斜体：

设置文本为倾斜字体。

（4）在“行高”下拉列表框中设置文本的高度。

自动指定文本行的高度。

值：

直接输入参数值来设置文本行的高度，其右侧可以选择高度参数的单位。

（5）在“粗细”下拉列表框中设置字体的粗细。

可以从中选择相对的参数，如“粗体”：

也可以直接选择参数值，如“600”。

（6）在“变量”下拉列表框中设置文本的变形格式。

需要说明的是，InternetExplorer支持文本的变形格式，NetscapeNavigator不支持文本的变形格式。

（7）在“大小写”下拉列表框中设置文本中字母的格式。

首字母大写：

每个单词的第一个字母都要大写。

大写：

所有字母都为大写。

小写：

所有字母都为小写。

无：

字母保持原有的格式。

（8）在“修饰”选择域中设置文本的修饰形式。

下划线：

为文本添加下划线。

上划线：

为文本添加上划线。

删除线：

为文本添加删除线。

闪烁：

设置文本为闪烁。

无文本：

不需要任何修饰。

（9）在“颜色”调色板中可以为文本选择一种颜色。

10.4.2定义CSS样式的“背景”（Background）属性

选择“CSS样式定义”对话框中“分类”列表中的“背景”选项，可以对CSS样式的“背景”属性进行设置，如图10-9所示。

图10-9定义CSS样式的“背景”属性

在该对话框中可以对“背景”属性进行如下设置。

（1）在“背景颜色”调色板中可以为样式选择一种合适的背景色。

（2）在“背景图像”下拉列表框中选择或搜索所需的背景图像。

（3）在“重复”下拉列表框中选择背景图像的重复显示方式。

无重复：

只在应用样式的元素前端显示一次图像。

重复：

在应用样式的元素背景上的垂直和水平方向上重复显示图像。

横向重复：

在应用样式的元素背景上的水平方向上重复显示图像。

纵向重复：

在应用样式的元素背景上的垂直方向上重复显示图像。

（4）在“附件”下拉列表框中选择背景图像的显示形式。

固定：

背景图像固定在原始位置。

滚动：

背景图像以滚动的形式显示。

（5）在“水平位置”下拉列表框中选择背景图像相对于元素的水平位置。

左对齐：

背景图像相对于元素为左对齐。

右对齐：

背景图像相对于元素为右对齐。

居中：

背景图像相对于元素为居中对齐。

输入参数值用于确定背景图像在水平方向上相对于元素的位置。

（6）在“垂直位置”下拉列表框中选择背景图像相对于元素的垂直位置。

顶端：

背景图像与元素的顶部对齐。

底部：

背景图像与元素的底部对齐。

输入参数值用于确定背景图像在垂直方向上相对于元素的位置。

10.4.3定义CSS样式的“区块”（Block）属性

选择“CSS样式定义”对话框中“分类”列表中的“区块”选项，可以对CSS样式的“区块”属性进行设置，如图10-10所示。

图10-10定义CSS样式的“区块”属性

在该对话框中可以对“区块”属性进行如下设置。

（1）在“单词间距”下拉列表框中设置单词的间距。

有“正常”和“值”两种选项，若选择了“值”项，则可以在其右侧的下拉列表框中选择一个合适的单位。

（2）在“字母间距”下拉列表框中设置字符的问距。

有“正常”和“值