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

1、CSS样式为一组样式，它的属性在HTML标签中依次出现，并不显示在浏览器中。CSS样式可以定义在HUE文档的标记里，也可以在外部附加文档中作为外加文件。此外，一个样式表可以作用多个页面，乃至整个站点，因此具有更好的易用性和扩展性。使用CSS技术除了可以在单独网页中应用一致的格式以外，对于大网站的格式设置和维护更具有重要意义。将CSS样式定义到样式表文件中，然后在多个网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。由于CSS具有以上这些优点，它已经成为一种应用非常广泛的网页设计技

2、术，甚至可以说，如果不懂CSS技术就很难设计出专业化的网站。10.1.2 CSS样式的分类Dreamweaver MX可以定义几种不同类型的CSS样式，并且可以使用不同的方法将其应用在网页文档中。通常有以下3种CSS样式。（1）创建自定义样式（Custom CSS styles）：自定义CSS样式可以应用于任何文本。若将自定义样式应用于整段文本，则会在该段文本的源代码中加入CLASS属性，例如PCLASS=“testStyle”；若将自定义样式应用于一行文本，则在选择的文本源代码的两边插入包含了CLASS属性的SPAN标记。（2）重定义HTML标签（HTML tag styles）：HTML标

3、签样式为HTML标识符重新定义格式化，如。当重新定义格式化后，所有应用标识符的文本都会改变而应用新的样式。（3）使用CSS选择器（CSS selector styles）：CSS选择器样式重新定义了特殊的标记组以及包含特殊序列号（ID）属性标记。如这样的标记组合表示在表格单元格中的文本应用二级标题；而#testStyle应用于所有包含属性值ID=“testStyle”的标记中。10.1.3 CSS样式的应用方式使用CSS的样式有以下几种方式。（1）局部套用：使用CSS语法定义HTML标签，这种方式应用的CSS样式只能影响该HTML标签。（2）内联式：将CSS语法写在文档头部的和标签中，这种方式

4、应用的CSS样式将影响整个页面。（3）外联式：将创建好的CSS样式保存为.css文件，在多个文档中链接此.css文件，而在文档中不会出现CSS语法。当.css文件被修改时，所有链接此.css文件的页面将同时被更新。10.1.4 CSS样式的冲突在同一个文本中应用两种或两种以上的CSS样式，这些样式会相互冲突产生不可预料的效果。浏览器根据以下规则显示样式属性。（1）如果在同一个文本中应用两种CSS样式，浏览器显示出两种样式中除冲突的属性之外的所有属性。（2）如果在同一个文本中应用两种CSS样式相互冲突，浏览器显示出最里面的样式属性。（3）如果存在直接冲突，自定义CSS样式的属性（应用CLASS属

5、性的样式）将覆盖HTML标记样式的属性。10.2 使用CSS样式表面板使用CSS样式设置面板可以创建和管理CSS样式。通过下面的操作方法可以启用CSS样式表面板。执行主菜单中的“窗口”“CSS样式”命令。在网页文档窗口的右侧，单击“设计”浮动面板的下拉三角形按钮。按组合键Shift+F11键。以上3种方法之一都可以打开CSS样式表面板，默认为“应用样式”视图，还可以切换到“编辑样式”视图，如图10-1所示。 图10-1 CSS样式表面板在CSS样式面板中可以进行下面的操作。（1）在列表中显示当前网页文档中的CSS样式。（2）单击该面板底部工具栏上的“附加样式表”按钮，将打开“链接外部样式表”对

6、话框，链接或导入外部的CSS样式表。（3）单击该面板底部工具栏上的“新建CSS样式”按钮，将打开“新建CSS样式”对话框，设置新建CSS样式表的类型。（4）单击该面板底部工具栏上的“编辑样式表.”按钮，将打开“编辑样式表”对话框，设置CSS样式表的属性。（5）单击该面板底部工具栏上的“删除CSS样式”按钮，将删除选定的CSS样式表，并删除应用该CSS样式表的格式。此外，用鼠标右击CSS样式面板中的样式名称，从弹出的快捷菜单中选择相关命令，也可以完成上面的操作，如图10-2所示。10.3 新建CSS样式上面介绍了CSS样式的类型、使用方式，以及操作CSS样式面板的基本方法。下面将了解新建CSS样

7、式的方法。具体操作步骤如下。（1）将光标插入点置于网页文档中的适当位置。（2）打开“CSS样式表”设置面板，单击“新建CSS样式”按钮，打开“新建CSS样式”对话框，如图10-3所示。图10-3 “新建CSS样式”对话框在“新建CSS样式”对话框中可以进行下列各项的设置。在“类型”区域中选择“创建自定义样式”选项，然后在“名称”下拉列表框中输入新建CSS样式的名称。在“类型”区域中选择“重定义HTML标签”选项，然后在“标签”下拉列表框中输入或从中选择一种HTML标签，如图10-4所示。图10-4 “重定义HTML标签”选项对话框在“类型”区域中选择“使用CSS选择器”选项，然后在“选择器”下

8、拉列表框中输入一个或多个HTML标签，也可以从下拉列表框中选择一种状态。如图10-5所示，共有以下4种状态。图10-5 “使用CSS选择器”选项对话框a：link：超链接的正常显示状态。visited：已访问超链接的状态。hover：鼠标停留在超链接上时的状态。active：表示超链接有激活状态。在“定义在”区域中选择新建CSS样式的位置。新建样式表文件：用于创建外部的样式表。仅对该文档：将新建的CSS样式嵌入到当前网页文档中。（3）单击“确定”按钮完成设置，同时打开“保存样式表文件为”对话框，如图10-6所示。选择要保存的位置，指定文件名（默认的文件类型为.css），然后单击“保存”按钮。图

9、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样式定义”对话框中“分类”列表中的“类型”选项，可以对CS

10、S样式的“类型”属性进行设置，如图10-8所示。图10-8 定义CSS样式的“类型”属性在该对话框中可以对“类型”属性进行如下设置。（1）在“字体”下拉列表框中选择需要的字体。（2）在“大小”下拉列表框中设置字体的大小。可以选择参数值，也可以直接输入数值，并从其右侧的单位设置框中选择适合的参数值。（3）在“样式”下拉列表框中设置字体的风格。正常：设置文本为正常字体。斜体：设置文本为斜体字体。偏斜体：设置文本为倾斜字体。（4）在“行高”下拉列表框中设置文本的高度。自动指定文本行的高度。值：直接输入参数值来设置文本行的高度，其右侧可以选择高度参数的单位。（5）在“粗细”下拉列表框中设置字体的粗细。

11、可以从中选择相对的参数，如“粗体”：也可以直接选择参数值，如“600”。（6）在“变量”下拉列表框中设置文本的变形格式。需要说明的是，Internet Explorer支持文本的变形格式，Netscape Navigator不支持文本的变形格式。（7）在“大小写”下拉列表框中设置文本中字母的格式。首字母大写：每个单词的第一个字母都要大写。大写：所有字母都为大写。小写：所有字母都为小写。无：字母保持原有的格式。（8）在“修饰”选择域中设置文本的修饰形式。下划线：为文本添加下划线。上划线：为文本添加上划线。删除线：为文本添加删除线。闪烁：设置文本为闪烁。无文本：不需要任何修饰。（9）在“颜色”调色

12、板中可以为文本选择一种颜色。10.4.2 定义CSS样式的“背景”（Background ）属性选择“CSS样式定义”对话框中“分类”列表中的“背景”选项，可以对CSS样式的“背景”属性进行设置，如图10-9所示。图10-9 定义CSS样式的“背景”属性在该对话框中可以对“背景”属性进行如下设置。（1）在“背景颜色”调色板中可以为样式选择一种合适的背景色。（2）在“背景图像”下拉列表框中选择或搜索所需的背景图像。（3）在“重复”下拉列表框中选择背景图像的重复显示方式。无重复：只在应用样式的元素前端显示一次图像。重复：在应用样式的元素背景上的垂直和水平方向上重复显示图像。横向重复：在应用样式的元

13、素背景上的水平方向上重复显示图像。纵向重复：在应用样式的元素背景上的垂直方向上重复显示图像。（4）在“附件”下拉列表框中选择背景图像的显示形式。固定：背景图像固定在原始位置。滚动：背景图像以滚动的形式显示。（5）在“水平位置”下拉列表框中选择背景图像相对于元素的水平位置。左对齐：背景图像相对于元素为左对齐。右对齐：背景图像相对于元素为右对齐。居中：背景图像相对于元素为居中对齐。输入参数值用于确定背景图像在水平方向上相对于元素的位置。（6）在“垂直位置”下拉列表框中选择背景图像相对于元素的垂直位置。顶端：背景图像与元素的顶部对齐。底部：背景图像与元素的底部对齐。输入参数值用于确定背景图像在垂直方向上相对于元素的位置。10.4.3 定义CSS样式的“区块”（Block）属性选择“CSS样式定义”对话框中“分类”列表中的“区块”选项，可以对CSS样式的“区块”属性进行设置，如图10-10所示。图10-10 定义CSS样式的“区块”属性在该对话框中可以对“区块”属性进行如下设置。（1）在“单词间距”下拉列表框中设置单词的间距。有“正常”和“值”两种选项，若选择了“值”项，则可以在其右侧的下拉列表框中选择一个合适的单位。（2）在“字母间距”下拉列表框中设置字符的问距。有“正常”和“值