南京信息工程大学 Web技术与应用（css) (实习)实验报告-朱建宇.docVIP

南京信息工程大学 Web技术与应用 实验(实习)报告 实验(实习)名称 CSS样式表 实验(实习)日期 2016.10.31 得分 指导老师 马瑞 系 计算机与软件学院 专业 软件工程 班级 14软工（专转本）姓名 朱建宇 学号 20148308007 一、实验目的 1、掌握CSS的定义及应用。 2、掌握CSS样式的语法规则； 3、掌握CSS样式表的定义位置； 4、掌握CSS样式表的引用的几种方式 二、 实验内容与步骤 1、 比较在html文件中使用CSS样式前后的变化。 （1）将以下文件在记事本中保存，以.html存盘。 html body h2font color=#0000FF face=黑体CSS标记1/font/h2 pCSS标记的正文内容1/p h2font color=#0000FF face=黑体CSS标记2/font/h2 pCSS标记的正文内容2/p h2font color=#0000FF face=黑体CSS标记3/font/h2 pCSS标记的正文内容3/p h2font color=#0000FF face=黑体CSS标记4/font/h2 pCSS标记的正文内容4/p /body /html 练习：将以上h标题改为红色。保存后刷新。 h2font color=#FF0000 face=黑体CSS标记1/font/h2 pCSS标记的正文内容1/p h2font color=#FF0000 face=黑体CSS标记2/font/h2 pCSS标记的正文内容2/p h2font color=#FF0000 face=黑体CSS标记3/font/h2 pCSS标记的正文内容3/p h2font color=#FF0000 face=黑体CSS标记4/font/h2 pCSS标记的正文内容4/p （2）将以上文件打开，利用链接方式使用CSS样式表（选择符定义为标记选择符组）改写上面代码。 自己给出改写后代码 练习：将上面h2标题改为红色、幼圆字体。比较CSS的优势。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style type=text/css #h2{ color:red; font-family:幼圆； } /style /head body h2 id=h2CSS标记1/h2 pCSS标记的正文内容1/p h2 id=h2CSS标记2/h2 pCSS标记的正文内容2/p h2 id=h2CSS标记3/h2 pCSS标记的正文内容3/p h2 id=h2CSS标记4/h2 pCSS标记的正文内容4/p /body /html 参考书中2.3.6节css样式属性，完成下面任务 2、利用span标签完成Google公司的Logo设计 要求如下： （1）使用嵌入式引入CSS样式表。 （2）使用类选择器定义元素。 （3）通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px字体； 第二个字母“o”设置为红色、加粗、60px字体； 第三个字母“o”设置为黄色、加粗、60px字体； 第四个字母“g”设置为蓝色、加粗、60px字体。 （4）剩余字母“le”按默认样式输出。 代码： style type=text/css .a1{color:#00F;font-weight:bold;font-size:60px} .a2{color:#F00;font-weight:bold;font-size:60px} .a3{color:#FF0;font-weight:bold;font-size:60px} .a4{color:#00F;font-weight:bold;font-size:60px} /style body p span class=a1G/span span class=a2o/span span class=a3o/span span class=a4g/span spanl/span spane/span /body 截图： 3、请做出网页效果如下图所示： 要求如下： （1）设置所有文本为微软雅黑、14像素、黑色字体。 （2）“新浪”、“新浪网”为红色字体，“博客首页”为蓝色字体，网址及日期