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

《网页设计与制作案例教程 教学课件 作者 池同柱第8章 应用CSS样式美化网页.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章应用CSS样式美化网页一、CSS基础CSS（CascadingStylesheets，层叠样式表）是一种制作网页的新技术，主要用来指定布局、字体、颜色、背景以及其他一些图文元素的格式。CSS现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，尤其是在设计者面对有数百个网页的站点时，大大减少了重复劳动的工作量。CSS样式一般分为内部样式表文件和外部样式表文件两种类型。用内容样式表文件创建的样式只对当前文档起作用，外部样式表文件保存在外部，但可以链接到当前文档中。

2、外部样式应用于多个文档，且生成专门的的*.css文件。CSS样式最大的优点就是它能自动更新，当应用了CSS格式后，如果不满意，仅修改CSS样式即可更改所有的应用。1.创建CSS样式（1）选择“窗口”-“CSS样式”（快捷键为Shift+F11）命令，打开“CSS样式”面板。（2）单击“CSS样式”面板中的“新建规则样式”按钮，打开“新建CSS样式”对话框。或者选择“文本”-“CSS样式”-“新建”，来打开“新建CSS样式”对话框，如图8-8所示。对话框中各项功能说明如下：1）“类（可应用于任何标签）”，生成一个新的样式。制作完毕后，可以在样式面板中看到制作完

3、成的样式。在应用的时候，首先在页面中选中对象，然后选择样式即可。2）“标签（重新定义特定标签的外观）”：将现有的HTML标签赋上样式。制作完毕后不需要选中对象就可以直接应用到页面中。二、创建和应用样式表3）“高级（ID、上下文选择器等）”：为具体某个标签组合或所有包含特定ID属性的标签定义格式。在“选择器”文本框中输入一个或多个HTML标签，或从弹出式菜单中选择一个标签。弹了的菜单中提供的标签包含a:active、a:hover、a:link、a:visited。其中a:active表示超级链接文本被激活时显示样式，a:hover表示光标移动到超级链接文本时

4、显示样式，a:link表示正常的未被访问过的超链接文本的显示样式，a:visited表示被访问过的超链接文本的显示样式。4）名称：指定CSS样式的名称。类名称必须以句点开头，并且可以包含任何字母和数字组合（如，.myhead1）。如果没有输入开头的句点，Dreamweaver将自动输入它。5）定义在：指定第一个选项“新建样式表文件”时所建立的CSS样式以外部文件的方式存在，在其它文档中也可以应用该CSS样式。指定第二个选项“仅对该文档”时所建立的CSS样式存在于当前文档之中，只能应用于当前文档。（3）单击“确定”按钮，弹出CSS规则定义对话框。（4）在CSS

5、规则定义对话框中设置相应的参数，单击“确定”即完成CSS样式的建立。2．应用CSS样式(1)在文档中，选择要应用CSS样式的文本。将插入点放在段落中以便将样式应用于整个段落。如果在单个段落中选择一个文本范围，则CSS样式只影响所选范围。若要指定要应用CSS样式的确切标签，请在位于“文档”窗口左下角的标签选择器中选择标签。(3)执行下列操作之一。在“CSS样式”面板（“窗口”-“CSS样式”）中，选择“所有”模式，右键单击要应用的样式名称，然后从上下文菜单选择“应用”。在文本属性检查器中，从“样式”菜单中选择要应用的类样式。在“文档”窗口中，右键单击(Wind

6、ows)或按住Control单击(Macintosh)所选文本，在上下文菜单中选择“CSS样式”，然后选择要应用的样式。打开“文本”-“CSS样式”，在子菜单中选择要应用的样式。如果要应用的CSS样式为外部样式表（即其他文档中定义的“新建样式表文件”），则需先添加进外部样式表。具体方法为：在需应用外部样式表的文档中，打开菜单“文本-CSS样式-附加样式表”，弹出链接外部样式表对话框。点击“浏览”按钮，选择需要链接到该文档的CSS样式表（此处为redapple.css）；单击“确定”按钮。此时在“文本—CSS样式”的子菜单中，可以看到刚刚链接进来的redapp

7、le样式。在该文档中可以直接应用redapple样式。3.重命名样式在“CSS样式”面板中，右键单击要重命名的CSS类样式，然后选择“重命名类”。或者：通过从“CSS样式”面板选项菜单中选择“重命名类”来重命名类。在“重命名类”对话框中，确保要重命名的类是在“重命名类”弹出菜单中选择的类。在“新建名称”文本框中，输入新类的新名称，然后单击“确定”。4.从选定内容删除CSS样式(1)选择要从中删除样式的对象或文本。(2)在文本属性检查器（“窗口”-“属性”）中，从“样式”弹出菜单中选择“无”。5.编辑CSS样式CSS样式表通常包含一个或多个规则。可以使用“CS

8、S样式”面板编辑CSS样式表中的各个规则，如果您喜欢