CSS样式表的应用

ｒｅａｓｅａｒｃｈ　

浅析在Ｄｒｅａｍｗｅａｖｅｒ　Ｍｘ中ＣＳＳ样式的探索应用　

杨宇朋　（浙江大学．浙江杭州３１００００）　

【摘要ｌ：随着网络科技的迅速发展．越来越多的人在网络上展现自己的空间。文章探讨在ＭａｃｒｏｍｅｄｉａＤｒｅａｍｗｅａｖｅｒ　ＭＸ中使用层叠样式表（ＣＳＳ），　在站点的多个页面中以一致的方式应用样式元素。ＣＳＳ样式非常灵活．其样式应用并不局限于文本对象。对于文本、图像、表格、层等都可以定义定位样式和　格式化样式。　【关键词ｌ：ＣＳＳ；ｃｌａｓｓ　中图分类号．ＴＰ３　文献标识码：Ｂ　文章编号：１９９７－０６６８（２００８）０２１００４１－０３　

Ｄｒｅａｍｗｅａｖｅｒ　Ｍｘ是一种专用的网页制作工具。它具有强　大的功能设计．成为很多网页制作者的最爱。其中ＣＳＳ样式　作为Ｄｒｅａｍｗｅａｖｅｒ　Ｍｘ的一种工具，主要用于控制网页元素风　格设计，它是”Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔ”的缩写．译作”级联样式　表”。通过设立样式表．可以统一的控制网页中各对象的显示　属性。　

一、什么是ＣＳＳ样式　ＣＳＳ样式是通过名称或ＨＴＭＬ标签来标识的．且允许修　改样式的属性并立即查看应用该样式的所有文本的反映。　ＨＴＭＬ文档中的ＣＳＳ样式可以控制绝大多数传统的文本格　式属性（如：字体、大小和对齐方式）。ＣＳＳ样式也可以指定独　特的ＨＴＭＬ属性。　ＣＳＳ样式表存在于文档的ｈｅａｄ区域中。ＣＳＳ样式表可以　定义以下一些格式：ＨＴＭＬ标签属性．以ｃｌａｓｓ属性标识的文本　范围。满足ＣＳＳ规范准则的文本。只要符合ＣＳＳ样式指导方　针的样式．Ｄｒｅａｍｗｅａｖｅｒ　Ｍｘ均可识别。　ＣＳＳ样式只能工作在４．０及以上版本的浏览器中．ＩＥ　３．０　可以识别一部分ＣＳＳ样式表。　二、ＣＳＳ样式与ＨＴＭＬ样式　ＨＴＭＬ样式是一种文字属性的集合。可以将其应用于某　些文字或整段文字上。但它对外观控制的功能比ＣＳＳ样式更　有限。而且加载的时间也更长。１９９８年初Ｗ３Ｃ组织公布的　ＨＴＭＬ　４．０规范中鼓励使用ＣＳＳ样式表．提倡停止使用　ＨＴＭＬ格式标签。但实践中．ＨＴＭＬ格式标签却比ＣＳＳ样式　表得到更广泛的浏览器支持。并且更早版本的浏览器至今还　在网络中占据不小的比重．所以ＨＴＭＬ标签还将在ＷＥＢ开　发者的工具栏中占据一席之地。　ＣＳＳ样式与ＨＴＭＬ样式相比。功能强大的多。在某种意　义上，可把ＨＴＭＬ样式看作是ＣＳＳ样式的子集，至少具有以　下两个突出的优点：　（１）提供比ＨＴＭＬ样式更多的文字属性控制；ＣＳＳ样式　可以控制所有文字的属性。　（２）可以套用到多个网页，甚至整个网站的网页上。当　ＣＳＳ样式更新或修改时。所有使用该样式表的文档格式也会　自动更新。　三、ＣＳＳ样式在网页文档中的三种存在方式　

HTML语言与CSS样式表

2.1 什么是HTML

HTML（英文：Hyper Text Markup Language，简称为HTML）是一种可以加入文本、表格、图片、声音、动画、影视等内容标记的超文本标记（标签）语言，它是为网页创建和其它可在网页浏览器中看到的信息而设计的。它简单易学！

实际上，HTML就是用标记符号来设置Web页面上的显示内容的，一个标记就是一条命令。

包含HTML内容的文件最常用的扩展名是.html，在DOS系统中限制扩展名为最多3个字符，所以.htm扩展名也被使用。虽然现在使用的比较少一些了，但是.htm扩展名仍旧普遍被支持。

可以用任何文本编辑器或所见即所得的HTML编辑器来编辑HTML文件。

2.2 HTML基本结构

先看一个例子：

例2-1：html_01.html

HTML示例

欢迎光临---Welcome

这是我第一次用HTML做的主页

用“记事本”编辑该文件，然后存盘，文件名为“html_01.html”，用“浏览器”运行，结果如下：

图2-1 “html_01.html”的运行显示结果

由这个简单例子可见：一个HTML文档是由一系列的元素和标签组成的，元素名不区分大小写。及其在文档页面中的位置。

2.3 HTML的标签（标记符号）

1、HTML的主要标签

HTML主要有四种标签：“开始和结束标签”、“头部标签”、“标题标签”、“主体开始与结束标签”。

图示如下：

页面标题文字

文档主体

注意：

（1）每种标签都要成对使用；

（2）标签要嵌套使用，层次分明。不能交叉嵌套

（3）“标题标签”是嵌入在“文档头部标签”中间的。这两种标签可以省略！其它标签不能省略。

CSS常用属性

1.CSS背景属性(background)

属性 描述 备注

background(图片) 设置元素的背景属性

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 scroll默认值。背景图像会随着页面其余部分的滚动而移动。

fixed固定，不随页面滚动

background-color 设置元素的背景颜色

background-image 设置元素的背景图像

background-position 设置背景图像的开始位置 top left

background-repeat 设置是否及如何重复背景图像 repeat默认。背景图像将在垂直和水平重复。

repeat-x和repeat-y 在x或者y上重复

no-repeat不重复

2.CSS边框属性(border与outline)

属性 描述

border 在一个声明中设置所有的边框属性

border-bottom 设置下边框属性

border-bottom-color 设置下边框的颜色

border-bottom-style 设置下边框的样式 dotted定义点状边框

dashed定义虚线

solid定义实线

border-bottom-width 设置下边框的宽度

border-color 设置四条边框的颜色

border-left 在一个声明中设置所有的左边框属性

border-left-color 设置左边框的颜色

border-left-style 设置左边框的样式

border-left-width 设置左边框的宽度

border-right 在一个声明中设置所有的右边框属性

border-right-color 设置右边框的颜色

border-right-style 设置右边框的样式

border-right-width 设置右边框的宽度

border-style 设置四条边框的样式

高一信息技术教案

1 南京市第四中学课堂教学教案

课题 Css样式表 课型 新授课

教材 第四单元第四节 层叠样式表

授课人 课时 2

教

学

目

标 1、知识与技能：掌握css样式表的概念，并能够根据实际情况，选择合适的样式表对网页或网站样式进行修改。

2、过程与方法：通过让学生在操作中产生认知冲突，从而循序渐进完成教学。

3、情感态度与价值观：培养学生合理选择并利用样式表美化网页的思想。

教学重、难点 重点：外联、内联和内嵌三类样式表的选择应用

难点：外联、内联和内嵌三类样式表的选择应用

教学方法 讲授法、讨论法、指导式探究法、练习反馈法

教学手段 微机室

高一信息技术教案

2 教学环节 教师活动、教法 学生活动、学法

一、引入：我来变魔术 师生配合，变魔术，将网站“茶客小栈”大变身。激发兴趣，引发思考。

茶客小栈1 茶客小栈2

二、教你变魔术 1、 魔术前热身：给学生提供两个道具即网站——“科普博览”和“茶客小栈”，让学生根据已有知识进行修改和美化。由此引入正题——样式表（内联和外联）。

2、 魔术一：内联样式表

对一个页面的样式进行快速调整，可以利用网页中的内联样式表。

方法：将样式表中的代码（images\魔法.txt）进行复制，粘贴到网页代码中的和之间，首尾分别加上

type="text/css">和

教师演示魔术一的操作步骤，学生模仿练习

代码如下：

3、 魔术二：外联样式表

作用：对多个页面的样式进行快速调整 （如统一整个网站的风格），可以利用网页中的外联样式表。

方法：利用“格式”——“样式表链接”完成操作。

学生练习：将整个网站修改为“magic.txt”样式。 高一信息技术教案

4 4、 魔术三：内嵌样式表

作用：对于一个页面中的某一个部分，如一段文字或者一张图片进行样式修改，可以使用内嵌样式表。将内嵌样式表的代码写入相应的标签内即可。