网页制作培训教程第课.docVIP

网页制作培训教程第10课 第10课 用CSS样式规范网页元素 本课要点 具体要求 本课导读 上机练习 本课要点 创建CSS样式 应用外部样式表文件 具体要求 掌握CSS样式的创建与应用方法 熟悉CSS规则定义中各分类的作用 掌握外部样式表文件的创建方法 掌握附加并应用外部样式表文件的方法 本课导读 为了操作简便，在网页设计中常用CSS样式来控制文本、边框、背景和列表等的样式，创建的样式可以反复调用。CSS样式可以嵌入在当前文档的头部标签中，也可导出为外部样式表文件应用到其他文档中。 104.1 创建CSS样式 CSS指层叠样式表，它是Cascading Style Sheet的缩写。在制作网页时需要让整个网站的风格统一，但手动设置每个网页的格式将会非常麻烦，用CSS样式能快速完成网页文本格式的统一，有利于提高工作效率。 10.1 创建CSS样式 10.1.1 知识讲解 10.1.2 典型案例——在简介页中应用CSS样式 10.1.1 知识讲解 本节将认识【CSS样式】面板，介绍CSS样式的创建及应用方法。 10.1.1 知识讲解 1. 认识【CSS样式】面板 2. 创建CSS样式 3. 应用CSS样式 1. 认识【CSS样式】面板 选择【窗口】→【CSS样式】命令或按【Shift+F11】组合键，打开【CSS样式】面板，如下图所示。 2. 创建CSS样式 创建CSS样式的具体操作如下。 （1）在【CSS样式】面板中单击 按钮，打开如下图所示的【新建CSS规则】对话框，进行相应的设置。 2. 创建CSS样式 （2）在【新建CSS规则】对话框中单击 按钮或保存样式表文件后，打开如下图所示的对话框。 2. 创建CSS样式 （3）在【分类】列表框中选择分类，右侧显示对应的参数项，进行相应的设置。 （4）设置完成后，单击 按钮，定义的样式将显示在【CSS样式】面板中。 如果要修改样式，可以单击【CSS样式】面板底部的 按钮，打开【CSS规则定义】对话框；也可单击 或 按钮，在属性列表框中添加或修改样式属性。 3. 应用CSS样式 CSS样式的应用比较简单，在窗口中选中要应用CSS样式的对象，在对应的【属性】面板的【样式】或【类】下拉列表框中选择需要的样式即可。 10.1.2 典型案例——在简介页中应用CSS样式 案例目标 本案例将对jie1.html页面中的文本和链接设置并应用CSS样式，主要练习自定义CSS样式和使用选择器，完成后的效果如下图所示。 10.1.2 典型案例——在简介页中应用CSS样式 操作思路： （1）将jie1.html文档另存为jie2.html，以便应用样式。 （2）分别新建.tt1，.dot，a:link，a:hover，a:visited和a:active样式。 （3）应用.tt1和.dot样式。 操作步骤请老师参照软件讲解 10.1.2 典型案例——在简介页中应用CSS样式 案例小结 本案例给jie2.html文档应用了CSS样式，主要练习了自定义CSS样式和在选中【选择器类型】栏中的 单选按钮后设置链接及状态的样式。从本案例中可以看出，定义样式时必须明确所需定义的参数项，只有这样才能准确地对其进行设置。 10.2 应用外部样式表文件 外部样式表文件是指把文档中将要用到的CSS样式全部定义，并以文件的形式存储在站点中，以方便该站点各页面元素使用。 10.2 应用外部样式表文件 10.2.1 知识讲解 10.2.2 典型案例——给产品页添加外部样式 10.2.1 知识讲解 本节主要介绍创建及应用外部样式表文件的方法。 10.2.1 知识讲解 1. 创建外部样式表文件 2. 附加并应用外部样式表文件 1. 创建外部样式表文件 外部样式表文件有两种创建方法：一种是直接新建外部样式表文件，另一种是将当前文件中的样式导出为外部样式表文件。 新建外部样式表文件的具体操作如下： 1. 创建外部样式表文件 （1）在【新建CSS规则】对话框中，选中 单选按钮，在【名称】下拉列表框中输入样式名称（这里输入“.tt”），并选中下面的 单选按钮。 （2）单击 按钮，打开【保存样式表文件为】对话框，在【文件名】文本框中输入新建的样式表文件名称（这里输入“mycss”）。