css实验报告.docVIP

西安郵電學院????实验目的 熟练掌握css的常用属性，并应用在设计中。使得网页设计内容更加丰富 二、????实验内容 了解CSS的属性 使用不同的方法（HTML属性，JavaScript，CSS）为页面底版设置颜色 在不同位置设置CSS（直接写在控件中，另外设置样式表），取得相同的结果 修改控件中字体的尺寸和颜色 利用CSS设置菜单（展开和隐藏效果） 设计与实现过程 用html设置页面底板颜色： html headtitle使用BODY属性设置页面颜色/title/head body bgcolor=#FF0000”页面颜色为红色/body /html 2、用JavaScript设置页面底板颜色： html headtitle使用JavaScript设置页面颜色/title/head body script language=”javascript” document.bgColor = “FF0000”; /script页面颜色为红色/body /html 3、用CSS设置页面底板颜色： html headtitle使用CSS设置页面颜色/title/head body style=”background-color: #ff0000;”页面颜色为红色/body /html 以上三种设置效果均为如下所示： 4、在不同位置设置css； （1）在控件中： html headtitle使用CSS设置页面颜色/title/head body style=”background-color: #ff0000;”CSS直接写在控件属性中/body /html （2）另外设置样式表： Style-name{ Background-color:#00FF00 } 5、修改控件中字体的尺寸和颜色： html headtitle默认控件中字体的尺寸和颜色/title /head bodyfont size=20姓名：/fontinput type=”textfield” value=”杨晓玉” /body /html 设置前： html headtitle修改控件中字体的尺寸和颜色/title style input{ font-size: 20; color: #00ff00; font-family: 宋体; font-weight: bold; } /style /head bodyfont size=20姓名：/fontinput type=textfield value=杨晓玉 /body /html 设置后： 6、设置控件属性： 设置前：（font size=+2姓名;/font） 设置后：（style type=text/css .STYLE1 { font-family: 宋体; font-size: 20px; } style input{ font-size: 20; color: #00ff00; font-family: 宋体; font-weight: bold; } /style /style） 7、隐藏： 展开： 设计技巧及体会 利用css来设置使得编辑更加简单，不会有繁琐的代码，使得设置更加方便 用div+css也有许多好处使得设计简单方便，节省资源 实验设计的效果与每一部分的属性设计关系很大，要熟练掌握设计步骤与过程才能达到所要求的效果。