使用CSS布局与美化网页Word文档格式.docx

使用CSS布局与美化网页Word文档格式.docx

《使用CSS布局与美化网页Word文档格式.docx》由会员分享，可在线阅读，更多相关《使用CSS布局与美化网页Word文档格式.docx（8页珍藏版）》请在冰豆网上搜索。

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="

样式属性:

属性值;

属性值"

>

如：

bodystyle="

color:

#FF0000;

font-family:

"

宋体"

;

cursor:

url（3151.ani）;

2、嵌入样式表

styletype="

text/css"

内部样式表是把样式表放到页面的<

head>

区里，这些定义的样式就应用到页面中了，样式表是用<

style>

标记插入的

……

!

--

hr{color:

sienna}

p{margin-left:

20px}

body{background-image:

url（"

images/back40.gif"

）}

-->

/style>

/head>

元素是用来说明所要定义的样式。

TYPE属性是指定style元素以css的语法定义。

有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。

为了避免这样的情况发生，我们用加HTML注释的方式<

--注释-->

隐藏内容而不让它显示。

3、外部样式表

linkhref="

样式表地址"

rel="

stylesheet"

type="

/>

4、输入样式表

可以使用css的@import声明将一个外部样式表文件输入到另外一个css文件中，被输入的css文件中的样式规则定义语句就成为了输入到的css文件的一部分，也可以使用@import声明将一个css文件输入到网页文件的<

标签对中，被输入的css文件中的样式规则定义语句就成了<

标签对中的语句。

@importurl（http:

//……）

/stypel>

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设计器所编辑的代码不一样，但所展现的形式确是相同的，有时候自己所做的明明和书本的展现形式一样，当我去看代码时却发现我的网页代码总是多一大堆。

而对于本节的网页设计自己感到好多东西自己就没有去点击过，觉得要学习的东西真是再多了。