实验四使用CSS布局与美化网页
一、实验任务：
1、请回答什么是CSS？使用CSS有何优点？
（1）CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”，简称css样式表，就是一种叫做样式表的技术。
在主页制作时采用css技术，可以有效的对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
（2）优点：css具有对网页的布局、颜色、背景、宽度、高度、字体进行控制，让网页按你的美工设计布局的更加美观漂亮。
1.大大缩减页面代码，提高页面浏览速度，缩减宽带成本；
2.结构清晰，容易被搜索引擎搜索到；
3.缩短改版时间，只要简单的修改几个css文件就可以重新设计一个
有成百上千页的站点；
4.强大的字体控制和排版能力。
CSS控制字体的能力比糟糕的FONT标签好多
了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。
5.CSS非常容易编写。
你可以象写html代码一样轻松地编写CSS。
6.提高易用性。
使用CSS可以结构化HTML。
7.可以一次设计，随处发布。
8.更好的控制页面布局。
9.表现和内容相分离。
将设计部分剥离出来放在一个独立样式文件中，你可
以减少未来网页无效的可能。
10.更方便搜索引擎的搜索。
用只包含结构化内容的HTML代替嵌套的标签，
搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
11.Table 布局灵活性不大，你只能遵循table tr td 的格式。
而
div 你可以div ul li 也可以ol li 还可以ul li ……但标准语法最好有序的写。
12.另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。
当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
13.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。
而Div 更能体现样式和结构相分离，结构的重构性强。
14.在几乎所有的浏览器上都可以使用。
15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
16.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
17.你可以轻松地控制页面的布局。
2、说明CSS的创建有几种类型？
插入样式表的方法有三种：
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。
在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
每个页面使用<link> 标签链接到样式表。
<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
浏览器会从文件mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。
文件不能包含任何的html 标签。
样式表应该以.css 扩展名进行保存。
下面是一个样式表文件的例子：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
不要在属性值与单位之间留有空格。
假如你使用“margin-left: 20 px”而不是“margin-left: 20px”，它仅在IE 6 中有效，但是在Mozilla/Firefox 或Netscape 中却无法正常工作。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。
你可以使用<style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
请
慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。
Style 属性可以包含任何CSS 属性。
本例展示如何改变段落的颜色和左外边距：<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对h3 选择器的三个属性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对h3 选择器的两个属性：
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3 得到的样式是：
color: red;
text-align: right;
font-size: 20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
2、说明CSS的创建有几种类型？
3、说明CSS创建的样式选择器有几种类型？有何不同？
（1）选择器类型：类选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器。
不同：类选择器允许以独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
ID选择器类似于类选择器。
属性选择器可以根据元素的属性及属性值来选择元素。
后代选择器可以选择作为某元素后代的元素。
于后代选择器相比，子元素选
择器只能选择作为某元素选择器的子元素的元素。
相邻兄弟选择器克选择在另一元素后的元素，且二者有相同父元素。
4、完成任务【4-2】，详细说明实验步骤。
二、实验步骤：
1.创建文件夹:
2.创建网页：
4在文件夹css中创建样式文件main.css.
5.在网页0402.html中插入所需的标签和输入所需的文字内容。
6.查看与编辑css属性。
7.在编辑规则中对选择的属性进行编辑修改。
9.对背景相关的属性进行编辑修改。
10.对区块相关的属性进行编辑修改。
11.对方块相关的属性进行修改。
12.浏览网页0402.html的效果。
4.实验体会：
经过前几次的实验，我的能力有了很大提高，但还是在实验中有很多不知道的地方，也明显感觉到这一次的实验难度加大了，感觉自己做的很慢，，不过我会继续努力弥补差距，努力赶上。