网页制作基础教程 第2版 教学课件 作者 邓振杰 第10章.ppt

《网页制作基础教程 第2版 教学课件 作者 邓振杰 第10章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、本章学习目标10.1CSS样式的分类及应用方式10.2使用CSS样式表面板10.3新建CSS样式10.4设置“CSS规则定义”对话框参数10.5自定义CSS样式10.6链接外部CSS样式10.7编辑CSS样式10.8复制CSS样式10.9导出CSS样式10.10CSS样式转化为HTML标签第10章　在网页中使用CSS样式本章学习目标●CSS样式的分类及应用方式。●使用CSS样式表面板。●建立CSS样式表。●自定义CSS样式。●链接外部CSS样式。●复制CSS样式和导出CSS样式。第10章　在网页中使用C

2、SS样式10.1CSS样式的分类及应用方式10.1.1CSS样式表概述使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色、背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。CSS样式为一组样式，它的属性在HTML标签中依次出现，并不显示在浏览器中。CSS样式可以定义在HTML文档的标记里，也可以在外部附加文档中作为外加文件。此外，一个样式表可以作用多个页面，乃至整个站点，因此具有更好的易用性和扩展性。使用CSS技术除了可以在单独网页中应用一致的格式以外，对于大网站

3、的格式设置和维护更具有重要意义。10.1CSS样式的分类及应用方式10.1.2CSS样式的分类DreamweaverCS3可以定义几种不同类型的CSS样式，并且可以使用不同的方法将其应用在网页文档中。通常有以下3种CSS样式。（1）自定义CSS样式（CustomCSSstyles）：也称为“类样式”，可以应用于任何文本。（2）重定义HTML标签（HTMLtagstyles）：HTML标签样式为HTML标识符重新定义格式化。（3）CSS选择器规则（CSSselectorstyles）：CSS选择器样式重新

4、定义了特殊的标记组以及包含特殊序列号（ID）属性标记。10.1CSS样式的分类及应用方式10.1.3CSS样式的应用方式使用CSS的样式有以下几种方式。（1）局部套用：使用CSS语法定义HTML标签，这种方式应用的CSS样式只能影响该HTML标签。（2）内联式：将CSS语法写在文档头部的标签中，这种方式应用的CSS样式将影响整个页面。（3）外联式：将创建好的CSS样式保存为.css文件，在多个文档中链接此.css文件，而在文档中不会出现CSS语法。当.css文件被修改时，

5、所有链接此.css文件的页面将同时被更新10.1CSS样式的分类及应用方式10.1.4CSS样式的冲突在同一个文本中应用两种或两种以上的CSS样式，这些样式会相互冲突产生不可预料的效果。浏览器根据以下规则显示样式属性。（1）如果在同一个文本中应用两种CSS样式，浏览器显示出两种样式中除冲突的属性之外的所有属性。（2）如果在同一个文本中应用两种CSS样式相互冲突，浏览器显示出最里面的样式属性。（3）如果存在直接冲突，自定义CSS样式的属性（应用CLASS属性的样式）将覆盖HTML标记样式的属性。10.2使

6、用CSS样式表面板使用CSS样式设置面板可以创建和管理CSS样式。通过下面的操作方法可以启用CSS样式表面板。●执行主菜单中的“窗口”→“CSS样式”命令。●按组合键“Shift＋F11”键。●单击网页属性面板中的“CSS”按钮。10.2使用CSS样式表面板在CSS样式面板中可以进行下面的操作。（1）在列表中显示当前网页文档中的CSS样式。（2）单击该面板底部工具栏上的“附加样式表”按钮，将打开“链接外部样式表”对话框，链接或导入外部的CSS样式表。（3）单击该面板底部工具栏上的“新建CSS规则”按钮，

7、将打开“新建CSS规则”对话框，设置新建CSS样式表的规则。（4）单击该面板底部工具栏上的“编辑样式”按钮，将打开一个对话框，在该对话框中可以编辑当前文档或外部样式表中的样式。（5）单击该面板底部工具栏上的“删除CSS样式”按钮，将删除选定的CSS样式表，并删除应用该CSS样式表的格式。10.3新建CSS样式新建CSS样式的方法，具体操作步骤如下。（1）将光标插入点置于网页文档中的适当位置。（2）执行以下操作之一打开“新建CSS规则”对话框，在“CSS样式”面板中，单击面板右下侧中的“新建CSS规则”按

8、钮。选择“文本”→“CSS样式”→“新建”命令。（3）单击“确定”按钮完成设置，同时打开“保存样式表文件为”对话框。选择要保存的位置，指定文件名（默认的文件类型为.css），然后单击“保存”按钮。（4）接着又弹出“CSS规则定义”对话框，可以定义CSS样式各项参数。（5）在“CSS规则定义”对话框中设置完成后，单击“确定”按钮，生成CSS样式，并在CSS样式面板中显示刚刚创建的CSS样式。10.4设置“CSS规则定义”对话框参数10.4.1