资源描述：
《实验3 层叠样式表css的应用刘财进》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、实验3层叠样式表CSS的应用姓名：刘财进学号：6100411185班级：网工111班一、实验目的1、掌握页面加载CSS的三种方式；2、掌握CSS美化页面的技巧；3、了解运用CSS统一站点风格的技巧；4、掌握使用Frontpage或者Dreamweaver制作以及应用CSS的技术。二、实验内容1、页面加载CSS的三种方式。通过制作一个网页，其中用到三种CSS的加载方式，来掌握页面应用CSS的技术。2、应用CSS美化网页统一站点风格。制作两种风格的样式表，一种应用到站点主页，一种应用到站点栏目页面。三、实验要求1、实验前简单
2、设计出网站页面的色彩风格，要求主页使用一种风格，其它子栏目使用另一种风格，并围绕所设定的风格，准备所需的素材；2、理解外部样式表、嵌入式样式表以及内联式样式的概念；3、本实验建立在实验二的基础上，必须事先将实验二制作的站点页面准备妥当。四、实验环境硬件环境：PC微机软件环境：Windows操作系统、文本编辑器（Notepad、editplus等）或者Frontpage或者Dreamweaver五、实验步骤1、进入XXX_yy站点目录，创建test子目录。2、在test子目录下，新建一个页面css3.htm，在该页面中插入
3、一个3行1列的表格，其中表格的第一行输入文字“应用外部样式”，第二行输入文字“应用嵌入式样式”，第三行输入文字“应用内联式样式”。3、在test子目录下，新建一个外部样式表文件style.css，该样式表中定义一个名为firststyle的类选择符，其样式为字体黑体、24磅、色彩#CC0000、段落格式居中、背景色#ECECEC。将css3.htm页面中表格第一行单元格应用style.css外部样式表中的样式firststyle。1、接下来在css3.htm页面中加入嵌入式样式表，该样式表中定义一个名为secondsty
4、le的类选择符，其样式可以参照firststyle来自行设计，但注意不能一样。将css3.htm页面中表格第二行的单元格应用嵌入式样式表中的样式secondstyle；2、最后，对于css3.htm页面中表格第三行的单元格应用内联式样式，其样式参照前面自行设计，但注意不能一样。图3-1css3.htm参考效果图3、在XXX_yy站点目录下，将准备好的素材拷贝到images子目录。4、打开站点主页index.htm，在页面中加入嵌入式样式表，样式表中定义的内容必须包括网页的背景色、背景图片（可选）和前景色，表格单元格的各种
5、样式定义，超链接不同状态时的样式，其它样式（如滚动条）依据自己喜好选择，所定义的样式则依据所设计的主页风格，最后根据需要修改部分页面代码，使得页面能够应用这些样式。5、新建一个外部样式表文件cata.css，该样式表将依据所设计的栏目页面风格来定义样式，样式表所要定义的内容参照上一条中的规定，并最终将该样式应用于各个栏目页面。6、浏览主页、栏目页面，观察结果。六、实验代码css3.htm代码：样式</p><p>6、表的应用.secondstyle{font-family:"隶书";font-size:36pt;color:blue;text-align:left;background-color:#FFFF00;}应用外部样式7、tr>
应用嵌入式样式
应用内联式样式
