实验利用CSS样式格式化网页

时间：2024.5.8

湖南第一师范学院实验报告

课程名称：网络教学软件设计与制作成绩评定：实验项目名称：实验二利用CSS样式格式化网页指导教师：张燕丽学生姓名：彭丽琼学号： 09510157154 专业班级： 571班一、实验目的与要求：

使学生灵活掌握使用CSS样式格式化网页的方法。

二、实验环境：（硬件环境、软件环境）

1.硬件环境：微机

２.软件环境：Windows 2000/XP中文版，DeamWeaver 8

三、实验内容：

1.在记事本中编写一个CSS文件,样式要求如下：

（1）定义标签p：使得所有的段落行间距为30px，首行缩进2em

（2）定义标签h2: 使得所有的标题2字号24px,黑体，红色，居中，加双下划线。

（3）定义一个类样式.biankuang：居中，蓝色，浅黄色背景，字号20px.加一个点划线边框，边框粗细3px，颜色红色。

（4）定义标签body样式，内容自定。

2.将以上样式保存到样式表文件type.css中，并应用到文件“mingpianxinshang1.html”中。

3.在2的基础上根据需要再适当增加一些CSS样式对网页文件进行美化，以美观为最终要求。

4.在网页“mingpianxinshang1.html”中利用伪类样式制作链接，链接到“mingpianxinshang2.html”网页。

实验步骤：

1、打开记事本，在记事本中编辑css文件；2、按照要求先定义标签p的属性，用（line-height）、（text-indent）设置段落行间距及首行缩进；3、定义h2的属性运用相关属性样式；4、定义类样式.biankuang的属性；5、定义body的属性；6、加入伪类样式链接7、将这些样式保存并命名为“type.css”8、将“mingpianxinshang1.html”以记事本的形式打开，在网页头部元素里加入“<link href="type.css"rel="stylesheet"type="text/css"/>”定义标签样式；9、在“mingpianxinshang1.html”中设定背景图片、超链接等。10、再用记事本为“mingpianxinshang2.html”编辑标签样式，命名为type2.css；11、在“mingpianxinshang2.html”

的头部css，定义标签样式；12、加入背景图片，美化网页。

程序代码：

一、

{line-height=30px;text-indent=2em;}

{line-height=24px;font-family:"黑体";color:red;text-align:center;border-bottom:double;} .biankuang{text-align:center;

border-top:dotted 3px red;}

body{ font-size:20px; font-family:"楷体"; color:#642100;}

a:link{color:#ff0000;text-decoration:none;}

a:visited{color:#00ff00;text-decoration:none;}

a:hover{color:#ff00ff;text-decoration:none;}

a:active{color:#0000ff;text-decoration:none;}

二、

三、

{line-height=30px; font-size:20px;color:0000ff; text-indent=2em;}

{font-family:"黑体";text-align:center; border-bottom:double; color:#ff0000;}

h2 color:bule; background-color:#ff8080; font-size:20px;

{font-family:"楷体"; text-align:left;color:dd00ff;}

四、

四、实验体会

在css样式定义的过程中，让我了解到网页制作的乐趣，增加了我对这门课程的兴趣，也让我了解到自己的不足，还需要多加的努力才行。

其中的难点是对双下划线的定义还有对于样式属性不熟练操作，所以运用起来不熟练。在操作过程中也容易犯错误，例如：写错单词、漏标点符号或写成中文形式的标点符号等。还有css样式属性不会运用等。

第二篇：CSS样式表的应用

网页制作实验报告

西安邮电学院

网页制作实验报告

题目：

院系名称：

专业名称：

班级：

学生姓名： CSS样式表的应用计算机系计算机科学与技术计科0902

王曼(24) 04091059 学号（8位）：

指导教师：王小耿

网页制作实验报告

一. 实验目的

1.掌握CSS样式表的引用的几种方式。

2.学习如何控制字号，字模及加入特殊效果。

3.了解要素和图像方面的样式设置。

二. 实验内容

1、整页套用样式：

不执行这个网页程序，回答程序中的问题，为什么？

<html>

<head>

<!—

h2{color:blue;text-align:center}

h1{color:red;text-align:right}

-->

</style>

</head>

<body>

<h1>请指出这个几字的颜色及对齐方式</h1>

<h2>请指出这个几字的颜色及对齐方式</h2>

<h3>请指出这个几字的颜色</h3>

</body>

</html>

2、样式文件引入

不改变以下程序，分别使“网站实验”几个字变红色，网页实验”几个字变成绿色（使用外联或导入方式） <html>

<head>

“css

网页制作实验报告

<body>

<h2>css网页实验</h2>

</body>

</html>

3、如何使有超级链接的文字不出现下划线，如何使鼠标移动到超链上产生变色的效果写出以下语句，并改变参数，使超链上产生变色，并改变有超级链接文字的下划线的类型

<html>

<head>

<style>

<!--

a:link{color:green;text-decoration:none}

a:visited{color:red;text-decoration:none}

a:hover{color:black;text-decoration:underline;font-size:25pt} -->

</style>

</head>

<body>

<p style="font-family:行书体;font-size:28pt"> <a

href="http://www.">未访问的链接</a></p>

<p style="font-family:宋体;font-size:18pt"> <a

href="http://www.">访问过的链接</a><p>

<p style="font-family:行书体;font-size:18pt"> <a

href="http://www."> 鼠标激活的链接</a><p>

</body>

</html>

4、用 css 控制的网页

1)用以下语句建立一个6.htm文件

<html>

<head>

网页制作实验报告

<title>用 css 控制的网页</title>

</head>

<body>

<h1 align="center">用 css 控制的网页</h1>

</td></tr>

<tr>

<td width="100" align="right" height="30"><b>文章标题：</b></td> <td width="544" height="30"><input type="text" name="txttitle" size="70"

class="smallinput" maxlength="100"></td></tr>

<td width="544" height="93" class="b2"><b2>CSS就是一种叫做样式表（stylesheet）的技术。<br>

也有的人称之为层叠样式表（Cascading

Stylesheet）。<br>

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。<br>

只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。</b2></td>

<tr>

<td width="100" align="right" height="30"><b>相关文章</b></td> <td width="544" height="30"><input type="text" name="txttitle" size="70"

class="smallinput" maxlength="100"></td>

</tr><tr>

<td width="544" height="80"><h1>它的作用可以达到：<br>

（1）在几乎所有的浏览器上都可以使用。<br>

（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。<br>

（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。<br>

（4）你可以轻松地控制页面的布局。</h1>

</td>

</tr>

<tr>

<td width="544" height="30"><input type="text" name="writer"

网页制作实验报告

size="70"

class="smallinput" maxlength="100"></td>

</tr>

<tr>

</tr>

<tr>

<td width="544" height="30"><input type="text" name="writefrom" size="70"

class="smallinput" maxlength="100"></td>

<tr>

</table>

</body>

</html>

2）用记事本程序建立一个css文件：style.css,内容如下

b{font-size: 10pt; font-family:"Verdana", "Arial", "宋体";color: #5F9EA0;}

input.smallInput{border:1 solid;FONT-SIZE: 13pt; FONT-STYLE: normal;

FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 28px; LINE-HEIGHT:

normal; color: #000000; background-color: #F5F5DC}

h1{font-size: 12pt; font-family:"Verdana", "Arial", "宋体";color: #CC9966;}

.b2{font-size: 10pt; font-family:"Verdana", "Arial", "宋体";color: #006400;}

img{filter:Alpha(opacity=100,style=3)}

3）将下列照片和以上两个文件放在同一文件夹下,重新运行6.htm文件。 x.jpg ，体会CSS的应用

4)改写style.css文件中b,input.smallInput,h1,.b2，img的属性，使页面的字体变得更漂亮，使页面及图片更赏心悦目

网页制作实验报告

三、实验运行结果

1.整页套用样式：

<h1>请指出这几个字的颜色及对齐方式</h1>文字为红色，对齐方式为右对齐 <h2>请指出这个几字的颜色及对齐方式</h2> 文字为蓝色，对齐方式为居中对齐 <h3>请指出这个几字的颜色</h3>文字默认为黑色

2.样式文件引入

在<head></head>中加入h1{color:red} h2{color:green}

3.如何使有超级链接的文字不出现下划线，如何使鼠标移动到超链上产生变色的效果写出以下语句，并改变参数，使超链上产生变色，并改变有超级链接文字的下划线的类型 a:link{color:red;text-decoration:overline}

a:active{color:blue;text-decoration:underline}

a:visited{color:purple;text-decoration:none}

a:hover{color:green;text-decoration:underline;font-size:25pt}

四．技巧及心得体会

1．对自己的实验进行评价，指出合理和不足之处，提出改进方案；

合理之处：表格层次分明，工整简洁。

不足之处与改进方案：网页区域可以在两边加上其它内容，比如增加一些超链接和铆点，增加一些按钮与访客进行互动，或者可以在页面连接几首歌曲，使页面内容更加丰富，更富动感，设计更加优化。

2．心得体会。

这次实验是应用CSS进行一些网页设计，以前都是使用HTML来编写代码，当时觉得HTML用起来还不错，通过这次上机实验使我认识到了CSS自己的特点，深深体会到了CSS与HTML的不同之处，它比HTML拥有更加强大的功能。CSS使得代码更加简洁明了，易于修改，你只需修改CSS中的属性即可对网页进行改造和维护；大大提高了工作效率减少了工作量，初除此之外还可以在程序上完成一些组件依赖CSS进行安全的保护，进一步提高了代码的安全性。

五．参考内容

[Web编程入门经典：HTML、XHTML和CSS]

[HTML与CSS入门经典(第7版)]

网页制作实验报告

六．附录：源代码（电子版）

1. <html>

<head>

<!—

h2{color:blue;text-align:center}

h1{color:red;text-align:right}

-->

</style>

</head>

<body>

<h1>请指出这个几字的颜色及对齐方式</h1>

<h2>请指出这个几字的颜色及对齐方式</h2>

<h3>请指出这个几字的颜色</h3>

</body>

</html>

2.<html>

<head>

h1{color:red}

h2{color:green}

</head>

<body>

<h2>css网页实验</h2>

</body>

</html>

3.<html>

<head>

<style>

<!--

a:link{color:red;text-decoration:overline}

a:active{color:blue;text-decoration:underline}

a:visited{color:purple;text-decoration:none}

a:hover{color:green;text-decoration:underline;font-size:25pt} -->

网页制作实验报告

</style>

</head>

<body>

<p style="font-family:行书体;font-size:28pt"><a href="">未访问的链接</a></p>

<p style="font-family:宋体;font-size:18pt"> <a href="">访问过的链接</a></p>

<p style="font-family:行书体;font-size:18pt"> <a href="http://www."> 鼠标激活的链接</a><p>

</body>

</html>

4.<html>

<head>

</head>

<body>

<tr>

<td width="544" height="30"><h1 align="center">用 CSS 控制的网页</h1></td>

</tr>

<tr>

</tr>

<b2>CSS就是一种叫做样式表（stylesheet）的技术。

<br>也有的人称之为层叠样式（CascadingStylesheet）。

<br>在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

<br>只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

</b2>

</td>

<tr>

网页制作实验报告

</tr>

<tr>

<h1>它的作用可以达到：

<br>（1）在几乎所有的浏览器上都可以使用。

<br>（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

<br>（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

<br>（4）你可以轻松地控制页面的布局。

</h1>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<tr>

</table>

</body>

</html>

CSS层叠样式表

b{font-size:10pt;font-family:"Verdana","Arial","黑体";color:#555555;}

input.smallInput{border:2 solid;FONT-SIZE: 12pt; FONT-STYLE: normal;

FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 23px; LINE-HEIGHT:normal; color: #000000; background-color: #fffff0}

h1{font-size: 12pt; font-family:"Verdana", "Arial","黑体";color:#CC6666;}

网页制作实验报告

.b2{font-size: 10pt; font-family:"Verdana", "Arial","黑体";color:#ff00ff;} img{filter:Alpha(opacity=150,style=4)}

更多相关推荐：

实验报告的格式: 实验报告的格式实验报告格式报告内封面内容实验标题班级姓名座号指导老师其他美工设计容以光的行进方向实验为例一实验目的说明进行本实验的目的例了解光在空气中的行进方向二实验原理说明进行本实验所用到的理论或方法例透过观...
实验报告范本: 学生实验报告书实验课程名称开课学院指导教师姓名学生姓名学生专业班级200200学年第学期实验教学管理基本规范实验是培养学生动手能力分析解决问题能力的重要环节实验报告是反映实验教学水平与质量的重要依据为加强实验过...
有关实验报告的书写格式: 有关实验报告的书写格式江苏省泗阳县李口中学沈正中一、完整实验报告的书写完整的一份实验报告一般包括以下项目：实验名称：实验目的：实验器材：实验原理：实验步骤：实验数据记录（表格）及处理：实验结论（结果推导）：实验…
实验报告范本: 学生实验报告书实验课程名称开课学院指导教师姓名学生姓名学生专业班级200200学年第学期实验教学管理基本规范实验是培养学生动手能力分析解决问题能力的重要环节实验报告是反映实验教学水平与质量的重要依据为加强实验过...
实验报告范本: 开放实验室报告1234
实验报告范本: 研究生实验报告范本实验课程实验名称实验地点学生姓名学号指导教师范本实验时间年月日一实验目的熟悉电阻型气体传感器结构及工作原理进行基于聚苯胺敏感薄膜的气体传感器的结构设计材料制作材料表征探测单元制作与测试实验结果...
实验报告格式: 矿业工程学院实验教学中心实验报告20xx版本课程名称岩层控制的实验方法与实测技术2实验名称姓名班级学号实验时间教师签章实验小二号宋体加粗试验日期20xx年月日试验地点矿业学院实验教学中心室1

循环结构实验报告范本: 深圳大学实验报告课程名称实验项目名称学院计算机与软件学院班级数学与计算机实验班实验时间实验报告提交时间2356789101112131415注1报告内的项目或内容设置可根据实际情况加以调整和补充2教师批改学生实...
实验报告格式8直线与圆的绘制: 学号天津城建大学计算机图形学实验报告实验八直线与圆的绘制学专指成生业导姓班教名级师绩任丽敏计算机与信息工程学院20xx年月日天津城建大学设计性实验任务书计算机与信息工程学院专业班姓名学号课程名称计算机图形学设计...
因子分析实验报告范本: 实验课程名称多元统计分析123456789101112131415
摄影实验报告格式的要求: 课程名称现代教育技术学实验序号二实验地点室外实验学时3实验类型操作型指导教师薛斌实验员李婷专业班级学号姓名年月日
综合实验报告的参考格式模板: 投资银行业务训练综合实验报告综合实验报告对西南证券公司业务经营的调查分析一基本情况简介一公司简介西南证券股份有限公司是西部地区成立最早的一家综合类证券公司也是唯一一家注册地在重庆的全国性综合类券商主营证券经纪投...

热门关注

实验 利用CSS样式格式化网页

第二篇：CSS样式表的应用

实验利用CSS样式格式化网页