使用CSS布局与美化网页.docx
- 文档编号:9697798
- 上传时间:2023-02-05
- 格式:DOCX
- 页数:8
- 大小:2MB
使用CSS布局与美化网页.docx
《使用CSS布局与美化网页.docx》由会员分享,可在线阅读,更多相关《使用CSS布局与美化网页.docx(8页珍藏版)》请在冰豆网上搜索。
使用CSS布局与美化网页
实验四使用CSS布局与美化网页
一、实验任务:
1、请回答什么是CSS?
使用CSS有何优点?
css全称为CascadingStyleSheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(CascadingStylesheet)简称CSS。
在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
优点:
1.大大缩减页面代码,提高页面浏览速度,缩减带宽成本;
2.结构清晰,容易被搜索引擎搜索到
3.缩短改版时间。
只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
4.强大的字体控制和排版能力。
CSS控制字体的能力比糟糕的FONT标签好多了,有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等。
5.CSS非常容易编写。
你可以象写html代码一样轻松地编写CSS。
6.提高易用性。
使用CSS可以结构化HTML。
7.可以一次设计,随处发布。
8.更好的控制页面布局。
9.表现和内容相分离。
将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
10.更方便搜索引擎的搜索。
用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。
11.Table布局灵活性不大,你只能遵循tabletrtd的格式。
而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
12.另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。
当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。
13.Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。
而Div更能体现样式和结构相分离,结构的重构性强。
14.在几乎所有的浏览器上都可以使用。
15.以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
16.使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。
17.你可以轻松地控制页面的布局
2、说明CSS的创建有几种类型?
1、内联样式表
直接在HTML标记内,插入sytle属性,再定义要显示的样式,这是最简单的样式定
义方法。
不过,利用这种方法定义样式时,效果只可以控制该标记,其语法如下:
<标记名称style="样式属性:
属性值;样式属性:
属性值">
如:
#FF0000;font-family: "宋体";cursor: url(3151.ani);"> 2、嵌入样式表 内部样式表是把样式表放到页面的
……
标签对中,被输入的css文件中的样式规则定义语句就成了标签对中的语句。
@importurl(http:
//……)
3、说明CSS创建的样式选择器有几种类型?
有何不同?
1.标签选择器(如:
body,div,p,ul,li)
2..类选择器(如:
class="head",class="head_logo")
3.ID选择器(如:
id="name",id="name_txt")
4.全局选择器(如:
*号)
5..组合选择器(如:
.head.head_logo,注意两选择器用空格键分开)
6..继承选择器(如:
divp,注意两选择器用空格键分开)
7.伪类选择器(如:
就是链接样式,a元素的伪类,4种不同的状态:
link、visited、active、hover。
)
8.字符串匹配的属性选择符(^$*三种,分别对应开始、结尾、包含)
CSS规则由两个主要的部分构成:
选择器,以及一条或多条声明。
选择器包括单独的选择和分组选择。
4、完成任务【4-2】,详细说明实验步骤。
二、实验步骤:
1、创建站点并在所创建文件夹命名为“css”,在创建一个网页命名为0420.html
2、依次打开css样式文件base.css、main.css其代码如图所示
3、打开0402.html输入内容,编辑完成后其代码如图所示
4、对0402.html的网页文字编辑。
先对正文文字修改,点击正文文字点击属性、再点击css设计对其字体进行编辑、再点击编辑规则对其类型进行编辑
5、再将光标移至最后一行文字上按照对正文文字的编辑方法,对最后一行进行类型、背景、区块、方框进行修改
6、最后点击保存,点击f12可实现快捷浏览
三、实验体会
通过本次的实验,让我感觉对键盘的陌生,在对代码的书写上感觉键盘的陌生,甚至感觉别扭,最让我搞不懂是自己书写的代码与用dreamweaver里css设计器所编辑的代码不一样,但所展现的形式确是相同的,有时候自己所做的明明和书本的展现形式一样,当我去看代码时却发现我的网页代码总是多一大堆。
而对于本节的网页设计自己感到好多东西自己就没有去点击过,觉得要学习的东西真是再多了。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 CSS 布局 美化 网页
![提示](https://static.bdocx.com/images/bang_tan.gif)