网页制作培训教程第课

《网页制作培训教程第课》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页制作培训教程第10课第10课用CSS样式规范网页元素本课要点具体要求本课导读上机练习本课要点创建CSS样式应用外部样式表文件具体要求掌握CSS样式的创建与应用方法熟悉CSS规则定义中各分类的作用掌握外部样式表文件的创建方法掌握附加并应用外部样式表文件的方法本课导读为了操作简便，在网页设计中常用CSS样式来控制文本、边框、背景和列表等的样式，创建的样式可以反复调用。CSS样式可以嵌入在当前文档的头部标签中，也可导出为外部样式表文件应用到其他文档中。104>>.1创建CSS样式CSS指层叠样式表，它是CascadingStyleSheet的缩

2、写。在制作网页时需要让整个网站的风格统一，但手动设置每个网页的格式将会非常麻烦，用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样式】面板，如下图所示

3、。2>.创建CSS样式创建CSS样式的具体操作如下。（1）在【CSS样式】面板中单击按钮，打开如下图所示的【新建CSS规则】对话框，进行相应的设置。2>.创建CSS样式（2）在【新建CSS规则】对话框中单击按钮或保存样式表文件后，打开如下图所示的对话框。2>.创建CSS样式（3）在【分类】列表框中选择分类，右侧显示对应的参数项，进行相应的设置。（4）设置完成后，单击按钮，定义的样式将显示在【CSS样式】面板中。如果要修改样式，可以单击【CSS样式】面板底部的按钮，打开【CSS规则定义】对话框；也可单击或按钮，在属性列表框中添加或修改样式属性。

4、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，

5、a:visited和a:active样式。（3）应用>.tt1和>.dot样式。操作步骤请老师参照软件讲解10>.1>.2典型案例——在简介页中应用CSS样式案例小结本案例给jie2>.html文档应用了CSS样式，主要练习了自定义CSS样式和在选中【选择器类型】栏中的单选按钮后设置链接及状态的样式。从本案例中可以看出，定义样式时必须明确所需定义的参数项，只有这样才能准确地对其进行设置。10>.2应用外部样式表文件外部样式表文件是指把文档中将要用到的CSS样式全部定义，并以文件的形式存储在站点中，以方便该站点各页面元素使用。10>.2应用外部

6、样式表文件10>.2>.1知识讲解10>.2>.2典型案例——给产品页添加外部样式10>.2>.1知识讲解本节主要介绍创建及应用外部样式表文件的方法。10>.2>.1知识讲解1>.创建外部样式表文件2>.附加并应用外部样式表文件1>.创建外部样式表文件外部样式表文件有两种创建方法：一种是直接新建外部样式表文件，另一种是将当前文件中的样式导出为外部样式表文件。新建外部样式表文件的具体操作如下：1>.创建外部样式表文件（1）在【新建CSS规则】对话框中，选中单选按钮，在【名称】下拉列表框中输入样式名称（这里输入“>.tt”），并选中下面的单选按钮

7、。（2）单击按钮，打开【保存样式表文件为】对话框，在【文件名】文本框中输入新建的样式表文件名称（这里输入“mycss”）。1>.创建外部样式表文件（3）单击按钮，在打开的【>.tt的CSS规则定义】对话框中按10>.1节中介绍的样式定义方法进行设置，然后单击按钮，mycss>.css样式表文件中的>.tt样式就显示在【CSS样式】面板中了。（4）要在样式表文件中增加样式，可打开【新建CSS规则】对话框，在【定义在】项后的下拉列表框中选择【mycss】样式表，并按新建样式的方法建立其他样式。1>.创建外部样式表文件如果要将嵌套在其他文件中的CS

8、S样式创建为外部样式表文件，那么可以采用导出的方法，其具体操作如下：（1）打开要导出样式的文件，选择【文本】→【CSS样式】→【导出】命令，打开【导出样式为CSS文