第8章 应用CSS样式美化网页.ppt

第8章应用CSS样式美化网页
一、 CSS基础
CSS(Cascading Style sheets,层叠样式表)是一种制作网页的新技术,主要用来指定布局、字体、颜色、背景以及其他一些图文元素的格式。CSS现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,尤其是在设计者面对有数百个网页的站点时,大大减少了重复劳动的工作量。
CSS样式一般分为内部样式表文件和外部样式表文件两种类型。用内容样式表文件创建的样式只对当前文档起作用,外部样式表文件保存在外部,但可以链接到当前文档中。外部样式应用于多个文档,且生成专门的的*.css文件。
CSS样式最大的优点就是它能自动更新,当应用了CSS格式后,如果不满意,仅修改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样式的建立。

(1)在文档中,选择要应用 CSS 样式的文本。
将插入点放在段落中以便将样式应用于整个段落。如果在单个段落中选择一个文本范围,则 CSS 样式只影响所选范围。若要指定要应用 CSS 样式的确切标签,请在位于“文档”窗口左下角的标签选择器中选择标签。
(3)执行下列操作之一。
在“CSS 样式”面板(“窗口”-“CSS 样式”)中,选择“所有”模式,右键单击要应用的样式名称,然后从上下文菜单选择“应用”。
在文本属性检查器中,从“样式”菜单中选择要应用的类样式。
在“文档”窗口中,右键单击(Windows) 或按住 Control 单击(Macintosh) 所选文本,在上下文菜单中选择“CSS 样式”,然后选择要应用的样式。
打开“文本”-“CSS 样式”,在子菜单中选择要应用的样式。
如果要应用的CSS样式为外部样式表(即其他文档中定义的“新建样式表文件”),则需先添加进外部样式表。具体方法为:在需应用外部样式表的文档中,打开菜单“文本-CSS样式-附加样式表”,弹出链接外部样式表对话框。点击“浏览”按钮,选择需要链接到该文档的CSS样式表();单击“确定”按钮。此时在“文本—CSS样式”的子菜单中,可以看到刚刚链接进来的redapple样式。在该文档中可以直接应用redapple样式。

在“CSS 样式”面板中,右键单击要重命名的 CSS 类样式,然后选择“重命名类”。或者:通过从“CSS 样式”面板选项菜单中选择“重命名类”来重命名类。
在“重命名类”对话框中,确保要重命名的类是在“重命名类”弹出菜单中选择的类。
在“新建名称”文本框中,输入新类的新名称,然后单击“确定”。

(1)选择要从中删除样式的对象或文本。
(2)在文本属性检查器(“窗口”-“属性”)中,从“样式”弹出菜单