第8章使用样式ppt课件.ppt
,第8章 使用样式,1 什么是 CSS 样式 CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。CSS 样式表中的层叠是指多个 CSS 样式表可以同时应用于同一个页面或网页中的同一元素，浏览器根据 CSS 标准中定义的层叠规则来决定哪一种样式优先，优先的样式将覆盖其他样式。,一、 CSS 样式概述,CSS 样式表是由一系列样式选择器和 CSS 属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，从而大大增强了网页的格式化能力。 除了功能强大这个优点外，使用 CSS 样式的另一优点是可以使用同一个样式表对整个站点的具有相同性质的网页进行格式修饰，当需要更改这些页面的样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，从而大简化了格式化的工作。,在 Dreamweaver 中 CSS 样式的类型包括以下几种： 类样式它在网页中定义了一个 CSS 样式属性集，当页面中的对象引用该样式后，所定义的 CSS 属性应用到页面中的文本范围或文本块。此类样式是应用最为广泛的一种样式类型。（因可自由定义所需的样式）, 重新定义 HTML 标签样式该类样式只能对 HTML 标签重新定义，样式的名字只能选择，不能修改，不能输入新的名字，否则无效。例如，创建或更改 H1 标签（对应于段落格式中的“标题 1”）的 CSS 样式时，网页中的所有使用 H1 标签设置了该格式的文本都能立即被更新。 高级（CSS 选择器），该类样式可以定义网页中的超链接效果，同样样式的名字也只能选择，不能修改。 其中：a:link设定未点击链接时的外观; a:visited设定点击链接后的外观; a:hover设定鼠标移动到链接上时的外观; a:active设定链接获得焦点时的外观。例如，可以使超链接文字在各种状态下均无下划线，并且当鼠标悬停时文字颜色由蓝色变为红色等。设定后，本页面的所有超链接均会按所设定的外观来显示。,在网站中使用 CSS 样式的方式与 HTML 样式相同，需要先创建 CSS 样式，然后在应用到网页或整个网站中。 1使用“CSS 样式”面板 在网站或网页中创建和应用 CSS 样式时，需要使用“CSS 样式”面板。选择“窗口”菜单中的“CSS 样式”命令或按【Shift + F11】键，可以打开“CSS 样式”面板。,二、 创建和应用 CSS 样式,在文档窗口中，class 类样式将出现在 “CSS 样式面板”中，如图8.5 所示。而对于创建的其他两种样式，将直接包含在网页代码或 CSS 外部样式表中，而不会显示在“CSS 样式”面板。,图8.5 CSS 样式面板,2创建 CSS 样式 在文档中要创建 CSS 样式，首先将“CSS 样式”面板打开，然后执行以下步骤。 （1）在 CSS 样式面板中，单击“新建 CSS 样式”按钮 ，打开“新建 CSS 样式”对话框，如图8.6 所示。,图8.6 “新建CSS 样式”对话框,（2）在“新建 CSS 样式”对话框中进行如下设置：如果选择“创建自定义样式（class）”样式类型，则在“名称”文本框中输入样式名称；如果选择“重定义HTML 标签”或“使用 CSS 选择器”样式类型，则在“名称”文本框中选择相应的样式名称。,（3）在“定义在”框中选择，如果选择“新建样式表文件”选项，如果曾经定义过样式表文件，则可以从列表中选择一个文件；如果选择“仅对该文档”单选按钮，表示样式将直接定义在当前文档中。,（4）单击“确定”按钮，如果选择“新建样式表文件”选项，则打开“保存样式表文件”对话框，进行保存设置即可后弹出“样式名称的CSS 样式定义”对话框；则直接弹出“样式名称的 CSS 样式定义”对话框，如图8.7 所示。,图8.7 “CSS 样式定义”对话框,（5）用户可以在“分类”列表框中选择 8 种 CSS 样式属性，Dreamweaver 选择相应属性分类后则在对话框右部会显示相应的选项，可以根据需要设置。 （6）最后单击“确定”按钮，则样式定义完毕。,在文档窗口，不论是内部样式还是外部样式表文件，对于出现在“CSS 样式”面板中的自定义 class 类样式，应首先选取要应用样式的文本、段落或其他对象，然后单击面板中的样式图标或样式名称。如果要取消样式，选取对象后，单击面板中的“无 CSS 样式”选项即可。 对于 “使用 CSS 选择器”样式，网页自动应用该样式而无须用户指定。,三、应用CSS样式,本实例定义一种网页中常用的正文样式，效果为“文字大小 16 px，行高 120%，首行缩进两个字符”，制作步骤如下。 （1）打开一个包含段落文本的文档，确保打开“CSS 样式”面板，单击“新建 CSS 样式”按钮 ，打开“新建CSS样式”对话框，在“名称”文本框中输入样式名称“test”，在“类型”选项中选择“创建自定义样式（class）（M）”单选按钮，选择“仅对该文档”单选按钮，设置完成后单击“确定”按钮。,四、自定义CSS样式实例,（2）在打开的“.test 的CSS 样式定义”对话框（参见图8.7）中，设置字体为“宋体”、大小为 16 像素（px）、行高为 120%。 （3）然后在“分类”列表框中选择“区块”选项，如图8.8 所示，设置文字缩进为 32 像素（相当于两个字符），单击“确定”按钮，则新建的“test”样式出现在“CSS 样式”面板中。,图8.8 定义区块属性,（4）在文档窗口中选择取要应用样式的文本，然后在单击“test”样式，即可应用该样式。,本实例定义一种常见的效果，即网页中的所有超链接都没有下划线，制作步骤如下。 （1）打开一个包含有超链接的文档，确保打开“CSS 样式”面板，单击“新建 CSS 样式”按钮 ，打开“新建 CSS 样式”对话框，在“类型”框内选择“重新定义 HTML 标签（R）”选项，然后在“名称”框内选择 a 标签（即超链接标签），选择“仅对该文档”选项，单击“确定”按钮。,五、重新定义 HTML 标签样式实例,（2）在打开“a 的 CSS 定义”对话框中的“修饰”选项中选择“无”，如图8.7所示，单击“确定”按钮。 （3）此时样式被自动应用，网页中的所有超链接都没有下划线。,本实例将继续上一实例，使得当用户鼠标指针移动到超链接上时，添加下划线效果，制作步骤如下。 （1）打开刚才制作重新定义HTML 标签样式的文档，单击“新建 CSS 样式”按钮 ，打开“新建 CSS 样式”对话框，在“类型”框内选择“使用 CSS 选择器（U）”单选按钮，然后在“名称”下接列表中选择“a:hover”选择器，选择“仅对该文档”单选按钮，单击“确定”按钮。,六、 CSS 选择器样式实例,（2）在打开“a:hover的 CSS 定义”对话框中的“修饰”选项中选择“下划线”，如图8.7所示，单击“确定”按钮。 （3）此时样式被自动应用，网页中的超链接没有下划线，当访问者鼠标指针移动到超链接文字上时出现下划线。,
