当前位置:文档之家› 网页制作-层叠样式

网页制作-层叠样式


外部样式表的链接、导入和编辑步骤如下。 外部样式表的链接、导入和编辑步骤如下。 页面。 (1) 新建一个 ) 新建一个Web 页面。 样式】 样式】 (2)【窗口】|【CSS样式】命令,打开【CSS样式】面板。 ) 窗口】 【 样式 命令,打开【 样式 面板。 (3) 单击面板右上角的快捷菜单按钮,在弹出的快捷菜单 ) 单击面板右上角的快捷菜单按钮, 中选择【附加样式表】命令,打开【链接外部样式表】 中选择【附加样式表】命令,打开【链接外部样式表】对话 框。 (4) 在【文件 文件/URL】文本框中输入要链接或导入的样式表 ) 】 文件的路径和名称,或单击【浏览】按钮,在打开的【 文件的路径和名称,或单击【浏览】按钮,在打开的【选择 样式表文件】对话框中,选择要链接的CSS样式表文件。 样式表文件。 样式表文件】对话框中,选择要链接的 样式表文件
利用CSS样式表可自动格式化网页文档,可将CSS 样式表可自动格式化网页文档,可将 利用 样式表可自动格式化网页文档 样式表直接存储在网页文档中 也可以将CSS样式表定 样式表直接存储在网页文档中,也可以将 样式表定 义在网页文档之外,然后将它链接到多个文档中。当 义在网页文档之外 然后将它链接到多个文档中。 CSS样式表被修改后,使用 样式表被修改后, 样式表被修改后 使用CSS样式表的网页文档格式 样式表的网页文档格式 也都将自动更新。 也都将自动更新。 自动更新 CSS样式表与 样式表与HTML样式相比,它的优势在于能够 样式相比, 样式表与 样式相比 同时控制多个文档的格式。另外,CSS样式表能够控制 同时控制多个文档的格式。另外, 样式表能够控制 大多数常用的文本格式属性,如字体、尺寸、 大多数常用的文本格式属性,如字体、尺寸、对齐方式 文本格式属性 还可以控制位置、特殊效果、鼠标翻转等很多 等,还可以控制位置、特殊效果、鼠标翻转等很多 HTML样式不能控制的属性。 样式不能控制的属性。 样式不能控制的属性
设置选择器类型
CSS选择符有类选择符和标识 选择符有类选择符和 选择符有类选择符 选择符两种 两种。 选择符两种。 类选择符以英文句点( ) 类选择符以英文句点(.)开头 英文句点 英文井号( 而标识选择符以英文井号 ,而标识选择符以英文井号(# )开头。 开头。
1. 类选择符 2. 用CSS重新定义 重新定义HTML标签 重新定义 标签 S重新定义 重新定义HTML标签 重新定义 标签
创建CSS样式时,在“新建CSS规则”对话框中,将 创建 样式时, 新建 规则”对话框中, 样式时 规则 选择器类型”设置为“标签( “选择器类型”设置为“标签(重新定义特定标签的外 重新定义HTML标签的外观的功能。 标签的外观的功能 可以实现用 观)”,可以实现用CSS重新定义 重新定义 标签的外观的功能。

——以p标签为例,用CSS重新定义 以 标签为例 标签为例, 重新定义HTML标签的外观。 标签的外观。 重新定义 标签的外观 1.修改HTML标签 .修改 标签<p></p> 标签 2.设置p标签的属性 .设置 标签的属性
3. 标识选择符或者伪类
标识选择符, 标识选择符,即ID—————
CSS选择符有类选择符和标识选择符两种。 选择符有类选择符和标识选择符两种。 选择符有类选择符和标识选择符两种 类选择符以英文句点(.)开头,类选择符用在不止一个 类选择符以英文句点( )开头,类选择符用在不止一个 符以英文句点 的元素上, 的元素上, 标识选择符以英文井号( )开头, 标识选择符以英文井号(#)开头,标识选择符又可以 称为ID选择符 这种选择符样式只能用在一个元素上。 选择符, 一个元素上 称为 选择符,这种选择符样式只能用在一个元素上。 简单的理解——那些只会在页面中出现一次的元素应该用 来表 那些只会在页面中出现一次的元素应该用id来表 简单的理解 那些只会在页面中出现一次的元素应该用 比如页头( ),导航菜单 示。比如页头(header), 页尾(footer),导航菜单(main), 页尾( ),导航菜单( menu)等。 )
a:link 超级链接的正常状态,没有任何动作的时候。 超级链接的正常状态,没有任何动作的时候。 a:visited 访问过的超级链接状态。 访问过的超级链接状态。 a:hover 光标指向超级链接的状态。 光标指向超级链接的状态。 a:active 选中超级链接状态。 选中超级链接状态。
6.2.2 外部样式表的链接、导入和编辑 外部样式表的链接、 若要对样式表修改,可以打开含有该CSS样式表的 样式表的 若要对样式表修改,可以打开含有该 含有该 样式表 附加外部CSS样式表, 样式表, 网页文档,或在当前网页文档中附加外部 网页文档,或在当前网页文档中附加外部 样式表 此时在当前的网页文档中能够完成CSS样式的复制、删 样式的复制、 此时在当前的网页文档中能够完成 样式的复制 添加、修改和保存等操作。另外, 除、添加、修改和保存等操作。另外,也可以导出当前 网页文档中存在的所有样式表,使它们成为外部独立的 网页文档中存在的所有样式表,使它们成为外部独立的 CSS样式表。 样式表。 样式表 当设计者创建了外部的 外部的CSS样式表文件后,并将其存 样式表文件后 当设计者创建了外部的 样式表文件后, 储为CSS样式表文件,此时在本地网站中就存在了一个 样式表文件, 储为 样式表文件 独立的通用的CSS样式表文件。然后每个用该样式格式 样式表文件。 独立的通用的 样式表文件 化的网页文档都可以与这个CSS样式表建立一种链接。 样式表建立一种链接 化的网页文档都可以与这个 样式表建立一种链接。 此样式表文件一经修改, 此样式表文件一经修改,网站中所有链接到此样式表的 网页都会发生相应的更新。这样就利用CSS样式表实现 样式表实现 网页都会发生相应的更新。这样就利用 了对多个网页文档的进行批量修改的操作。 了对多个网页文档的进行批量修改的操作。
标识选择符或者伪类_伪类 标识选择符或者伪类 伪类 网页中的文本上建立超级链接后, 例:—— 网页中的文本上建立超级链接后,文字就 会变成蓝色,同时还出现下划线,这是HTML默认的 会变成蓝色,同时还出现下划线,这是 默认的 超级链接外观。如果想改变超级链接的默认外观, 超级链接外观。如果想改变超级链接的默认外观,可 以利用CSS样式进行处理。 样式进行处理。 以利用 样式进行处理 1.创建超级链接 . 2.用CSS样式重新定义超级链接的外观 . 样式重新定义超级链接的外观
定义在】 (4) 在【定义在】选项组的下 ) 拉列表框中,选择当前要创建的 拉列表框中, 样式定义在哪个样式表中。 样式定义在哪个样式表中。可以 是定义在新的样式表文件中, 是定义在新的样式表文件中,也 可以是将CSS样式定义在某个已 样式定义在某个已 可以是将 经创建好的样式表文件中。 经创建好的样式表文件中。
(5) 单击【确定】按钮,完成外部样 ) 单击【确定】按钮, 式表的链接(或导入)。 式表的链接(或导入)。 要对外部样式表修改时, 要对外部样式表修改时,先选中 CSS样表,单击【CSS样式】面板右 样表, 样式】 样表 单击【 样式 上角的快捷菜单按钮, 上角的快捷菜单按钮,在弹出的快捷菜 单中选择【编辑】命令,或单击面板右 单中选择【编辑】命令, 下角【编辑样式】按钮。 下角【编辑样式】按钮。
6.1 层叠样式表概述
样式是预先定义好的、格式化文档的工具。 样式是预先定义好的、格式化文档的工具。在 前面已经介绍过HTML,用HTML可一次完成多种 前面已经介绍过 , 可一次完成多种 格式化操作任务。但是, 格式化操作任务。但是,HTML样式的不足之处 样式的不足之处 在控制网页的外观上受到较多的限制。 是,在控制网页的外观上受到较多的限制。 本节中介绍的层叠样式表( 本节中介绍的层叠样式表(Cascading Style Sheets, 以下简称 以下简称CSS样式表)是由 样式表) ( 样式表 是由W3C(Word Wide Web Consortium)组织批准的一种网页元 ) 素定义规则, 素定义规则,是一种可以对网页文档内容进行精确 格式化控制的工具。 格式化控制的工具。
设置CSS规则名称 设置CSS规则名称 CSS
设置CSS 设置CSS 规则定义在文 档内还是定义 在外部CSS CSS文 在外部CSS文 件中
1. 类选择符_创建类选择符步骤如下: 创建类选择符步骤如下: 样式】 样式】 (1)【窗口】|【CSS样式】命令,打开【CSS样式】面板。 ) 窗口】 【 样式 命令,打开【 样式 面板。 样式】 (2) 单击【CSS样式】面板右上角的快捷菜单按钮,在弹 ) 单击【 样式 面板右上角的快捷菜单按钮, 出的快捷菜单中,选择 新建CSS样式】命令,或单击浮动面 选择【 样式】 出的快捷菜单中 选择【新建 样式 命令, 板右下方的【新建样式】按钮,打开【新建CSS样式】对话 样式】 板右下方的【新建样式】按钮,打开【新建 样式 框。 选择器类型】 (3) 在【选择器类型】中: ) 选中【 选中【类(可应用于任 何标签) 单选按钮后, 何标签)】单选按钮后,可 名称】 在【名称】下拉列表框中输 入样式的名称, 入样式的名称,该名称必须 开始, 以“.”开始,确认后便可以 开始 创建一个应用于文本范围和 选择区域的Class属性的样式; 属性的样式; 选择区域的 属性的样式
6.2 层叠样式表的创建与编辑 在Dreamweaver 8中,单击网页编辑窗口中状态栏右 中 下角的按钮,或选择【窗口】 【 样式】 下角的按钮,或选择【窗口】|【CSS样式】命令,还可以 样式 命令, 单击【设计】浮动面板组的【 样式】 单击【设计】浮动面板组的【CSS样式】选项卡,便可打 样式 选项卡, 样式】 开【CSS样式】面板。 样式 面板。
若要创建 仅仅作用于当前 文档的新样式, 文档的新样式, 可选中【 可选中【仅对该 文档】单选按钮。 文档】单选按钮。
套用样式表的方法主要有: 套用样式表的方法主要有:
1.在“属性”面板应用样式 属性” 2.利用【标签选择器】选择样式 利用【标签选择器】 3.利用CSS面板套用样式 利用CSS面板套用样式 CSS 4.使用右键快捷菜单
相关主题