Web技术与应用：CSS样式表入门
原创
南京信息工程大学 Web技术与应用 实验(实习)报告
实验(实习)名称 CSS样式表 实验(实习)日期 2017.11.6 得分 指导老师 马瑞
计软 专业 网络工程 班级 一班 姓名 XXX 学号 XXXXXXXXXXX
一、实验目的
1、掌握CSS的定义及应用。
2、掌握CSS样式的语法规则；
3、掌握CSS样式表的定义位置；
4、掌握CSS样式表的引用的几种方式
二、 实验内容与步骤
1、 比较在html文件中使用CSS样式前后的变化。
（1）将以下文件在记事本中保存，以.html存盘。
<html>
<body>
<h2><font color="#0000FF" face="黑体">CSS标记1</font></h2>
<p>CSS标记的正文内容1</p>
<h2><font color="#0000FF" face="黑体">CSS标记2</font></h2>
<p>CSS标记的正文内容2</p>
<h2><font color="#0000FF" face="黑体">CSS标记3</font></h2>
<p>CSS标记的正文内容3</p>
<h2><font color="#0000FF" face="黑体">CSS标记4</font></h2>
<p>CSS标记的正文内容4</p>
</body>
</html>
练习：将以上h2标题改为红色。保存后刷新。
（2）将以上文件打开，利用链接方式使用CSS样式表（选择符定义为标记选择符组）改写上面代码。
自己给出改写后代码
练习：将上面h2标题改为红色、幼圆字体。比较CSS的优势。
参考书中2.3.6节css样式属性，完成下面任务
2、利用span标签完成Google公司的Logo设计
要求如下：
（1）使用嵌入式引入CSS样式表。
（2）使用类选择器定义元素。
（3）通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px字体；
第二个字母“o”设置为红色、加粗、60px字体；
第三个字母“o”设置为黄色、加粗、60px字体；
第四个字母“g”设置为蓝色、加粗、60px字体。
（4）剩余字母“le”按默认样式输出。
3、请做出网页效果如下图所示：
要求如下：
（1）设置所有文本为微软雅黑、14像素、黑色字体。
（2）“新浪”、“新浪网”为红色字体，“博客首页”为蓝色字体，网址及日期为绿色字体。
（3）设置标题为18像素、左对齐、下划线的效果。当鼠标移到超链接的文字上显示十字型光标（属性值：crosshair）。访问后超链接的格式为颜色：绿色，无下划线。
（4）设置文本“-百度快照-评价”为灰色、下划线的效果。
Ps: 此处出于chrome的安全策略，visited的链接无法取消下划线
4、请做出网页效果如下图所示。
要求如下：
（1）设置标题“春天”为16像素、红色、加粗、居中、下划线的效果。
（2）设置所有文本为宋体、12像素、绿色字体，“春季”字体颜色设为红色。
（3）设置文本首行缩进2个字符，文字行间距为20像素。
5、使用样式表定义表格：
（1）首先使用记事本建立一个基本的HTML文件, 输入如下代码（可复制）： 保存文件为：html格式：
<HTML>
<HEAD>
<TITLE> 用户信息 </TITLE>
</HEAD>
<BODY>
<form action = "" method = "post" name=”form1”>
<table border = 3 id = "table1" >
<caption><center>用户信息</center></caption>
<tr>
<td>请输入姓名:</td>
<td> <input type = "text" id = "username" name = "username"></td>
</tr>
<tr>
<td>请输入密码:</td>
<td><input type = "password" id = "password1" name = "password1"></td>
</tr>
<tr>
<td>请确认密码:</td>
<td><input type = "password" id = "password2" name = "password2"></td>
</tr>
<tr>
<td> 爱好:</td>
<td>
<input type = "checkbox" name = "checkbox1" value = "1" id= "Favirate1"> 足球
<input type = "checkbox" name = "checkbox1" value = "2" id= "Favirate2"> 上网
<input type = "checkbox" name = "checkbox1" value = "3" id= "Favirate3"> 音乐
<input type = "checkbox" name = "checkbox1" value = "4" id= "Favirate4"> 看书 </td>
</tr>
<tr>
<td>性别:</td>
<td> <input type = "radio" name = "sex" checked>男
<input type = "radio" name = "sex">女</td>
</tr>
<tr>
<td>所在省份</td>
<td>
<select size = "1" name = "city" tabindex = "5" id = "city">
<option selected value = "beijing">北京市 </option>
<option value = "jiangsu">江苏省 </option>
</select></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type = "submit" id = "reg" value = "提交">
<input type = "reset" id = "reset" value = "重置">
</td>
</tr>
</table>
</form>
</BODY>
</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;
}
打开浏览器查看效果。 （姓名文本框要求输入自己的真实姓名）
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
