实验2朱ㄓ頲ss.doc

南京信息工程大学 Web技术与应用 实验(实习)报告实验(实习)名称 CSS样式表 实验(实习)日期 2016.10.31 得分 指导老师 马瑞 系 计算机与软件学院 专业 软件工程 班级 14软工（专转本）姓名 朱建宇 学号 20148308007 一、实验目的1、掌握CSS的定义及应用。2、掌握CSS样式的语法规则；3、掌握CSS样式表的定义位置；4、掌握CSS样式表的引用的几种方式 二、 实验内容与步骤1、 比较在html文件中使用CSS样式前后的变化。（1）将以下文件在记事本中保存，以.html存盘。CSS标记1CSS标记的正文内容1CSS标记2CSS标记的正文内容2CSS标记3CSS标记的正文内容3CSS标记4CSS标记的正文内容4练习：将以上h标题改为红色。保存后刷新。CSS标记1CSS标记的正文内容1CSS标记2CSS标记的正文内容2CSS标记3CSS标记的正文内容3CSS标记4CSS标记的正文内容4（2）将以上文件打开，利用链接方式使用CSS样式表（选择符定义为标记选择符组）改写上面代码。 自己给出改写后代码练习：将上面h2标题改为红色、幼圆字体。比较CSS的优势。无标题文档#h2color:red;font-family:幼圆；CSS标记1CSS标记的正文内容1CSS标记2CSS标记的正文内容2CSS标记3CSS标记的正文内容3CSS标记4CSS标记的正文内容4参考书中2.3.6节css样式属性，完成下面任务2、利用span标签完成Google公司的Logo设计要求如下：（1）使用嵌入式引入CSS样式表。（2）使用类选择器定义元素。（3）通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px字体；第二个字母“o”设置为红色、加粗、60px字体；第三个字母“o”设置为黄色、加粗、60px字体；第四个字母“g”设置为蓝色、加粗、60px字体。（4）剩余字母“le”按默认样式输出。代码：.a1color:#00F;font-weight:bold;font-size:60px.a2color:#F00;font-weight:bold;font-size:60px.a3color:#FF0;font-weight:bold;font-size:60px.a4color:#00F;font-weight:bold;font-size:60pxGoogle截图：3、请做出网页效果如下图所示：要求如下：（1）设置所有文本为微软雅黑、14像素、黑色字体。（2）“新浪”、“新浪网”为红色字体，“博客首页”为蓝色字体，网址及日期为绿色字体。（3）设置标题为18像素、左对齐、下划线的效果。当鼠标移到超链接的文字上显示十字型光标（属性值：crosshair）。访问后超链接的格式为颜色：绿色，无下划线。（4）设置文本“-百度快照-评价”为灰色、下划线的效果。代码：bodyfont-family:微软雅黑;color:#000;font-size:14px.b1color:#F00/*红色*/.b2color:#00F/*红色*/.b3color:#0F0/*绿色*/.b4font-size:18px;text-decoration:underline;cursor:crosshair/*下划线*/.b5font-size:20px;.b6color:#666;font-size:14px;text-decoration:underline/*下划线*/ 新浪 博客首页 新浪网 新浪网博客频道是全中国最主流，最具人气的博客频道。拥有最耀眼的娱乐明星博客、最知性的名人博客、最动人的情感博客、最自我的草根博客。 /2014-07-07 -百度快照评价截图：4、请做出网页效果如下图所示。要求如下：（1）设置标题“春天”为16像素、红色、加粗、居中、下划线的效果。（2）设置所有文本为宋体、12像素、绿色字体，“春季”字体颜色设为红色。（3）设置文本首行缩进2个字符，文字行间距为20像素。代码：无标题文档.spring2color:#F00bodyfont-family:宋体;color:#0F0;font-size:12px.spring1color:#F00;font-size:16px;font-weight:bold;text-decoration:underline;p.s3text-indent:2em;春天春季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地想繁殖地进发。许多动物在这段时里了发情，因而中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。截图：5、使用样式表定义表格： （1）首先使用记事本建立一个基本的HTML文件, 输入如下代码（可复制）： 保存文件为：html格式： 用户信息 用户信息 请输入姓名: 请输入密码: 请确认密码: 爱好: 足球 上网 音乐 看书 性别: 男 女 所在省份 北京市 江苏省 （参考下面提供的样式表对上面的用户信息进行修饰）form border: 1px dotted #AAAAAA;padding: 3px 6px 3px 6px;margin:0px;font:14px Arial;input color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;select width: 80px;color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;.mystyle1 text-align:center; fong-size:25pt; font-family:隶书; background-color:gray; .mystyle2 text-align:center; fong-size:9pt; color:#000033; background-color:#ffcccc; font-family:隶书; border:#ccccff; border-style:groove; 打开浏览器查看效果。 （姓名文本框要求输入自己的真实姓名） 代码： 用户信息 form border: 1px dotted #AAAAAA;padding: 3px 6px 3px 6px;margin:0px;font:14px Arial;input color: #00008B;background-color:#CFF;border: 1px solid #00008B;select width: 80px;color:#0FC;background-color:#63F;border: 1px solid #00008B;.mystyle1 text-align:center; fong-size:25pt; font-family:隶书; background-color:gray; .mystyle2 text-align:center; fong-size:9