一、实验目的
1．了解Web标准，理解网站重构。
2．掌握CSS样式表的应用方式。
3．掌握CSS选择器。
二、实验环境
1． 硬件：计算机。操作系统： Windows；
2． 软件：HBuilder；
三、实验内容
1、《七步诗》
实验步骤
1）新建html文档
2）设置网页标题
3）用h4标签设置标题，用p标签设置段落，用br标签换行，用行内样式表设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>七步诗</title><!-- 设置网页标题 -->
</head>
<body>
<h4 style="color: #0000FF;">七步诗</h4><!-- 设置行内标签颜色为蓝色 -->
<p style="color: red;font-weight: bolder;"><!-- 设置行内标签颜色为红色文字加粗 -->
煮豆燃豆萁，<br>
豆在釜中泣。<br>
本使同根生，<br>
相煎何太急。
</p>
</body>
</html>
2、制作GoogleLogo效果
实验步骤
1）新建html文档
2）设置网页标题
3）创建span标签，将每个字母放入span标签内，在每个span标签中添加类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>google</title><!-- 设置网页标题 -->
<style>
.G,.o1,.o2{
color: blue;/* 设置字体颜色为蓝色 */
font-size: 55px;/* 设置字号为55px */
font-weight: bolder;/* 设置字体加粗 */
}
.o1{
color: red;/* 设置字体为红色 */
}
.o2{
color: yellow;/* 设置字体为黄色 */
}
</style>
</head>
<body>
<span class="G">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="G">g</span>
<span>l</span>
<span>e</span>
</body>
</html> 
3、《关山月》
实验步骤
1）新建html文档
2）新建css文档
4）设置网页标题
5）html文档内，引用外部样式表3.css，用h2标签设置标题和作者，使用p标签设置段落用br换行
6）css文档内使用h2标签选择器和p标签选择器对文档效果的更改
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关山月</title><!-- 设置网页标题 -->
<link rel="stylesheet" href="3.css" type="text/css" /><!-- 引用外部样式表 -->
</head>
<body>
<h2>关山月</h2>
<h2>李白</h2>
<p>
明月出天山，苍茫云海间。<br>
长风几万里，吹度玉门关。<br>
汉下白登道，胡窥青海湾。<br>
由来征战地，不见有人还。<br>
戍客望边色，思归多苦颜。<br>
高楼当此夜，叹息未应闲。
</p>
</body>
</html>css代码
h2{
color: #FF0000;/* 设置字体颜色为红色 */
text-align: center;/* 设置文字居中 */
}
p{
color: #0000FF;/* 设置字体为蓝色 */
text-align: center;/* 设置文字居中 */
}
4.通配符选择器
实验步骤
1）新建html文档
2）设置网页标题
3）按照效果分别使用h1,h2,div,p,斜体，加粗，span和b标签
4）使用*通配符选择器对文字进行样式的调整
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通配符选择器</title><!-- 设置网页标题 -->
<style>
*{
color: #FF0000;/* 设置文字颜色为红色 */
font-style: normal;/* 设置字体样式属性为默认值 */
font-size: 30px;/* 设置字号为30px */
font-weight: normal;/* 设置字体加粗属性为默认值 */
}
</style>
</head>
<body>
<h1>我是标题H1标记</h1>
<h2>我是标题H2标记</h2>
<div>我是div标记</div>
<p>我是段落P标记</p>
<em>我是斜体标记</em>
<strong>我是加粗标记</strong>
<span>我是span标记</span>
<b>我是b标记</b>
</body>
</html> 
5.CSS字体样式属性
实验步骤
1）新建html文档
2）设置网页标题
3）使用p标签用id选择器对各行进行样式设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS字体样式属性</title><!-- 设置网页标题 -->
<style>
#p1{
color: #FF0000;/* 设置颜色为红色 */
}
#p2{
font-size: 18px;/* 设置字号为18px */
}
#p3{
font-family: 微软雅黑;/* 设置字体为微软雅黑 */
}
#p4{
font-weight: bolder;/* 设置字体加粗 */
}
#p5{
font-style: oblique;/* 设置字体为倾斜 */
}
#p6{
text-transform: lowercase;/* 设置所有大写字母变成小写 */
color: #0000FF;/* 设置颜色为蓝色 */
}
</style>
</head>
<body>
<p id="p1">我是默认字体，设置为红色</p>
<p id="p2">我是设置为18像素的字号哦</p>
<p id="p3">我是设置为微软雅黑的字体哦</p>
<p id="p4">我是设置为加粗的字体哦</p>
<p id="p5">我是设置为倾斜的字体哦</p>
<p id="p6">我是小写字母：CHUAN ZHI BO KE,设置为蓝色</p>
</body>
</html> 
6.CSS文本外观属性综合应用
实验步骤
1）新建html文档
2）设置网页标题
3）标题使用h1标签其他段落使用p标签，用id进行设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你若安好，便是晴天</title><!-- 设置网页标题 -->
<style>
h1{
color: darkviolet;/* 设置文字为深紫色 */
text-align: center;/* 设置文字居中 */
}
#p{
color: orange;/* 设置文字为橘色 */
text-align: center;/* 设置文字居中 */
}
#p1{
color: #0000FF;/* 设置文字为蓝色 */
text-indent: 2em;/* 设置首行缩进两个字符 */
letter-spacing:1em;/* 设置行文字间距一个字符 */
}
#p2{
font-style: italic;/* 设置文字斜体 */
color: green;/* 设置文字为绿色 */
}
#p3{
text-decoration:line-through;/* 设置文字删除线 */
color: darkviolet;/* 设置文字为紫色 */
}
</style>
</head>
<body>
<h1>你若安好，便是晴天</h1>
<p id="p">一个人，一本书，一杯茶，一帘梦</p>
<p id="p1">站在时光的十字路口，回望过去的种种单纯与美好，欣慰而悲凉。花开花落，
风卷云舒。青春如同流沙般从指缝溜走，过去的倔强与轻狂，原来如此荒诞不羁。俗世喧嚣，
总会想在空灵停滞的时空内，独倚幽窗，品一壶清茶，细细体味光阴如梭，年华老去。</p>
<p id="p2">花开花落，风卷云舒。青春如同流沙般从指缝溜走，过去的倔强与轻狂，原来如此荒诞不羁。
俗世喧嚣，总会想在空灵停滞的时空内，独倚幽窗，品一壶清茶，细细体味光阴如梭，年华老去。</p>
<p id="p3">时光轮回，生命交替，红尘无尽。</p>
</body>
</html>
四、实验总结
通过本次实验，学会了文本外观样式属：color、letter-spacing、word-spacing、line-height、text-transform、text-decoration、text-align、text-indent、white-space和字体样式：font-size、font-family、font-weight、font-variant、font-style、font 属性。掌握了css样式的标签选择器、类选择器和id选择器。熟悉了内部样式、行内样式和外部样式表。
1266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
