使用CSS布局与美化网页.docx
- 文档编号:30198590
- 上传时间:2023-08-07
- 格式:DOCX
- 页数:10
- 大小:1.04MB
使用CSS布局与美化网页.docx
《使用CSS布局与美化网页.docx》由会员分享,可在线阅读,更多相关《使用CSS布局与美化网页.docx(10页珍藏版)》请在冰豆网上搜索。
使用CSS布局与美化网页
实验四使用CSS布局与美化网页
一、实验任务:
1、请回答什么是CSS?
使用CSS有何优点?
(1)CSS全称为CascadingStyleSheets,中文翻译为“层叠样式表”,简称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的创建有几种类型?
插入样式表的方法有三种:
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。
在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。
每个页面使用 标签链接到样式表。
标签在(文档的)头部:
浏览器会从文件 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)属性。
Style 属性可以包含任何 CSS 属性。
本例展示如何改变段落的颜色和左外边距:
sienna; margin-left:
20px">
This is a paragraph
多重样式
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
例如,外部样式表拥有针对 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.实验体会:
经过前几次的实验,我的能力有了很大提高,但还是在实验中有很多不知道的地方,也明显感觉到这一次的实验难度加大了,感觉自己做的很慢,,不过我会继续努力弥补差距,努力赶上。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 CSS 布局 美化 网页