网页设计与制作案例教程 教学配套课件 池同柱 第8章 应用CSS样式美化网页.pdfVIP

第8章 应用CSS样式美化网页 一、 CSS基础 CSS（Cascading Style sheets，层叠样式表）是一种制作 网页的新技术，主要用来指定布局、字体、颜色、背景以及其 他一些图文元素的格式。CSS现在已经为大多数的浏览器所支 持，成为网页设计必不可少的工具之一。使用CSS能够简化网页 的格式代码，加快下载显示的速度，也减少了需要上传的代码 数量，尤其是在设计者面对有数百个网页的站点时，大大减少 了重复劳动的工作量。 CSS样式一般分为内部样式表文件和外部样式表文件两种类 型。用内容样式表文件创建的样式只对当前文档起作用，外部 样式表文件保存在外部，但可以链接到当前文档中。外部样式 应用于多个文档，且生成专门的的*.css文件。 CSS样式最大的优点就是它能自动更新，当应用了CSS格式 后，如果不满意，仅修改CSS样式即可更改所有的应用。 二、创建和应用样式表 1.创建CSS样式 （1）选择“窗口”-“CSS样式”（快捷键为Shift+F11）命 令，打开“CSS样式”面板。 （2）单击“CSS样式”面板中的“新建规则样式”按钮，打 开“新建CSS样式”对话框。或者选择“文本”-“CSS 样 式”-“新建”，来打开“新建CSS样式”对话框，如图8-8 所示。 对话框中各项功能说明如下： 1）“类（可应用于任何标签）”，生成一个新的样式。制作 完毕后，可以在样式面板中看到制作完成的样式。在应用 的时候，首先在页面中选中对象，然后选择样式即可。 2）“标签（重新定义特定标签的外观）”：将现有的HTML标 签赋上样式。制作完毕后不需要选中对象就可以直接应用 到页面中。 3）“高级（ID、上下文选择器等）”：为具体某个标签组合或所 有包含特定ID属性的标签定义格式。在“选择器”文本框中输 入一个或多个HTML标签，或从弹出式菜单中选择一个标签。弹 了的菜单中提供的标签包含a:active、a:hover、 a:link、 a:visited。其中a:active表示超级链接文本被激活时显示样 式，a:hover表示光标移动到超级链接文本时显示样式，a:link 表示正常的未被访问过的超链接文本的显示样式，a:visited表 示被访问过的超链接文本的显示样式。 4）名称：指定CSS样式的名称。类名称必须以句点开头，并且可以 包含任何字母和数字组合（如，.myhead1）。如果没有输入开 头的句点，Dreamweaver 将自动输入它。 5）定义在：指定第一个选项“新建样式表文件”时所建立的CSS样 式以外部文件的方式存在，在其它文档中也可以应用该CSS样 式。指定第二个选项“仅对该文档”时所建立的CSS样式存在于 当前文档之中，只能应用于当前文档。 （3）单击“确定”按钮，弹出CSS规则定义对话框。 （4）在CSS规则定义对话框中设置相应的参数，单击“确定”即完 成CSS样式的建立。 2．应用CSS样式 (1)在文档中，选择要应用 CSS 样式的文本。 将插入点放在段落中以便将样式应用于整个段落。如果在 单个段落中选择一个文本范围，则 CSS 样式只影响所选范 围。若要指定要应用 CSS 样式的确切标签，请在位于“文 档”窗口左下角的标签选择器中选择标签。 (3)执行下列操作之一。  在“CSS 样式”面板（“窗口”-“CSS 样式”）中，选择 “所有”模式，右键单击要应用的样式名称，然后从上下文菜 单选择“应用”。  在文本属性检查器中，从“样式” 菜单中选择要应用的类样 式。  在“文档”窗口中，右键单击 (Windows) 或按住 Control 单 击 (Macintosh) 所选文本，在上下文菜单中选择“CSS 样 式”，然后选择要应用的样式。  打开“文本”-“CSS 样式”，在子菜单中选择要应用的样 式。 如果要应用的CSS样式为外部样式表（即其 他文档中定义的“新建样式表文件”），则需先 添加进外部样式表。具体方法为：在需应用外部 样式表的文档中，打开菜单“文本-CSS样式-附 加样式表”，弹出链接外部样式表对话框。点击 “浏览”按钮，选择需要链接到该文档的CSS样 式表（此处为redapple.css）；单击“确定”按 钮。