实验二CSS样式的应用.doc

《实验二CSS样式的应用.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实验二_CSS样式的应用————————————————————————————————作者：————————————————————————————————日期：实验二CSS样式的应用一、实验目的：1．掌握CSS样式的语法规则；2．掌握CSS样式的类选择器的使用；3．掌握CSS样式表的定义位置；4．重点培养应用CSS样式的能力。二、基本知识1．CSS有语法规则选择器{属性1：值1；属性2：值2；……属性n：值n}2．CSS的定义位置（1）放在网页的头部内部，因为其就在网页内定义，故而叫做“内

2、部样式表”，注意这样的样式定义只能被本网页使用，别的网页是不能用到的，结构如下：（2）将所有的样式放在网页之外的单独的文件中，因为其位居网页之外，故而叫做“外部样式表”，这样的样式可以被不同的网页导入或链接，可以被多个网页使用，真正实现内容与表现的分离，代码重用性高，便于网站风格的统一。Sty.css文件内容如下：（注意，样式表文件内只有各个样式，不能有HTML标记）选择器{……}选择器{……

3、}选择器{……}那么网页在使用外部样式表时，需要把外部样式表文件链接（导入）到当前使用样式的网页，链接标记也应放在内的任意位置，代码如下：这样就可以使用样式表文件中定义的各种样式了。（3）CSS样式属性略三、实验内容1．给定网页完成如图2-1所示的CSS样式设置.建立一个CSS外部样式表文件（名为style1.css,保存在站点目录下），对CSS文件夹中CSSZDY1.HTM网页文件设置格式：具

4、体要求如下：1）给整个网页设置如下图的“电脑”（CSSimagespageback.jpg）背景，要求滚屏时，背景固定;2）文字与表格td之间有5px填充；3）超级链接：样式为link为白色，无下划线，hover为黄色，有下划线；4）除列表文本中文字“大小”为14px，“行高”为23px外；其余文字“大小”为12px,段落中首行“缩进”两个汉字。5）未作要求的结合下图完成。图2-1CSS样式网页3．完成百度知网“七夕节”网页样式的定义及应用，要求样式设置要合理，注意CSS样式的重用性，及网页内样式的归类。目的在于培

5、养学生网页制作的CSS设计与制作能力。