山东大学web实验2
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实验源码（每一种样式在源码中均用不同颜色标明了） Test2.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>编写 css 文件</title> <!-- 内部样式表方法 -->
计算机科学与技术学院 12 级 2 班---董一帆 201208131017
（1） 内部样式表法：写在<head></head>之间的，只对所在网页有效。 （2） 嵌入样式表法：内嵌式的使用是在混合在 HTML 标记里使用的，直接在 HTML
标记里加入 style 参数，而 style 参数的内容就是 CSS 的属性和值。 （3） 链入外部样式表法：把样式表保存成一个样式表文件，然后在页面中用 <link>标记链接到这个样式表文件，<link>标记必须放在页面的<head>区内。 （4） 导入外部样式表法：在内部样式表<style>里导入一个外部样式表文件 （.css），导入时用@import，该方法仅在 IE 中支持。
计算机科学与技术学院 12 级 2 班---董一帆 201208131017
</center> <hr> <p1 style="background:cyan;color:red;font-size:24px;font-family:隶书">
在 HTML 文件的主体应用嵌入式表方法添加 css。 </p1> <hr> <hr> <h3 align="center">编写外部 css 文（链入外部样式表）</h3> <hr> <p2>在 HTML 文件应用链入外部样式表方法调用外部 css</p2> <hr> <hr> <h4 align="center">编写外部 CSS（导入外部样式表）</h4> <hr> <p3>在 HTML 文件中导入外部样式表方法调用外部 css</p3> </body> </html>
1. 实验要求：
编写定义各种样式表 CSS，练习各种调用样式表的方法：嵌入式样 式、链接样式文件、导入样式、内联样式、自定义样式类。 要求 自己设计一个使用 CSS 的例子，多种使用 CSS 的方法并存。 要求： 提交网页截图和源代码， 用不同颜色标出相关代码，并 给出文字说明。
2. 实验截图分析
4 种样式的实现：
background:red; /* 背景色*/
color:blue;
/* 前景色*/
corsur:hand;
font-family:隶书;
font-size:20pt}
网页截图：
2.1.css
h3{text-decoration:underline;background-color:#ddccff; color:blue;font-weight:bold;font-size:24px}
p2 {text-decoration:underline;background-color:#ddccff ;
<style type ="text/css"> <!-h1{color:blue;font-size:35px;font-family:楷体} p{background:yellow;color:red;font-family:宋体;font-size:24px} --> </style> <!-- 链入外部样式表 --> <link rel=stylesheet type="text/css" href="2.1.css"> <!-- 导入外部样式表 --> <style style="text/css"> @import url(2.2.css); </style> </head> <body> <h1 align="center">编写头部（内部样式表方法）css 文件</h1> <hr> <!--插入一条水平线--> <p>在 HTML 文件的头部应用内部样式表方法添加 css。</p> <hr> <hr> <center> <h2 style ="color:green;font-size:35px;font-family:黑体">编写主体（嵌 入样式表）css 文件</h2>
计算机科学与技术学院 12 级 2 班---董一帆 201208131017
web 技术实验报告
--------计算机科学与技术学院 12 级 2 班 -------董一帆 201208Fra Baidu bibliotek31017
计算机科学与技术学院 12 级 2 班---董一帆 201208131017
实验二. 掌握使用层叠式样式表 CSS
计算机科学与技术学院 12 级 2 班---董一帆 201208131017
color:blue;font-weight:bold;font-size:24px}
2.2.css
h4{color:blue;font-size:30px;font-family:黑体}
p3 {text-decoration:none; /* 下划线：underline; none */
<!doctype html> <html> <head> <meta charset="utf-8"> <title>编写 css 文件</title> <!-- 内部样式表方法 -->
计算机科学与技术学院 12 级 2 班---董一帆 201208131017
（1） 内部样式表法：写在<head></head>之间的，只对所在网页有效。 （2） 嵌入样式表法：内嵌式的使用是在混合在 HTML 标记里使用的，直接在 HTML
标记里加入 style 参数，而 style 参数的内容就是 CSS 的属性和值。 （3） 链入外部样式表法：把样式表保存成一个样式表文件，然后在页面中用 <link>标记链接到这个样式表文件，<link>标记必须放在页面的<head>区内。 （4） 导入外部样式表法：在内部样式表<style>里导入一个外部样式表文件 （.css），导入时用@import，该方法仅在 IE 中支持。
计算机科学与技术学院 12 级 2 班---董一帆 201208131017
</center> <hr> <p1 style="background:cyan;color:red;font-size:24px;font-family:隶书">
在 HTML 文件的主体应用嵌入式表方法添加 css。 </p1> <hr> <hr> <h3 align="center">编写外部 css 文（链入外部样式表）</h3> <hr> <p2>在 HTML 文件应用链入外部样式表方法调用外部 css</p2> <hr> <hr> <h4 align="center">编写外部 CSS（导入外部样式表）</h4> <hr> <p3>在 HTML 文件中导入外部样式表方法调用外部 css</p3> </body> </html>
1. 实验要求：
编写定义各种样式表 CSS，练习各种调用样式表的方法：嵌入式样 式、链接样式文件、导入样式、内联样式、自定义样式类。 要求 自己设计一个使用 CSS 的例子，多种使用 CSS 的方法并存。 要求： 提交网页截图和源代码， 用不同颜色标出相关代码，并 给出文字说明。
2. 实验截图分析
4 种样式的实现：
background:red; /* 背景色*/
color:blue;
/* 前景色*/
corsur:hand;
font-family:隶书;
font-size:20pt}
网页截图：
2.1.css
h3{text-decoration:underline;background-color:#ddccff; color:blue;font-weight:bold;font-size:24px}
p2 {text-decoration:underline;background-color:#ddccff ;
<style type ="text/css"> <!-h1{color:blue;font-size:35px;font-family:楷体} p{background:yellow;color:red;font-family:宋体;font-size:24px} --> </style> <!-- 链入外部样式表 --> <link rel=stylesheet type="text/css" href="2.1.css"> <!-- 导入外部样式表 --> <style style="text/css"> @import url(2.2.css); </style> </head> <body> <h1 align="center">编写头部（内部样式表方法）css 文件</h1> <hr> <!--插入一条水平线--> <p>在 HTML 文件的头部应用内部样式表方法添加 css。</p> <hr> <hr> <center> <h2 style ="color:green;font-size:35px;font-family:黑体">编写主体（嵌 入样式表）css 文件</h2>
计算机科学与技术学院 12 级 2 班---董一帆 201208131017
web 技术实验报告
--------计算机科学与技术学院 12 级 2 班 -------董一帆 201208Fra Baidu bibliotek31017
计算机科学与技术学院 12 级 2 班---董一帆 201208131017
实验二. 掌握使用层叠式样式表 CSS
计算机科学与技术学院 12 级 2 班---董一帆 201208131017
color:blue;font-weight:bold;font-size:24px}
2.2.css
h4{color:blue;font-size:30px;font-family:黑体}
p3 {text-decoration:none; /* 下划线：underline; none */