● CSS实用教程1 - 荔园在线 | 深圳大学学生论坛,荔园晨风BBS,深大在线网站

荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀

发信人: tiny (这学期要努力咯), 信区: Homepage
标题: CSS实用教程1
发信站: 荔园晨风BBS站 (Wed Mar 13 11:57:33 2002), 转信

CSS实用教程

作者：黄宝骅/eNet技术学院

　　CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在
已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够
简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大
减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时，CSS简直
象是神对我们的恩赐！^_^

前言

CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经
为大多数的浏览器所支持，成为网页设计必不可少的工具之一。

W3C（The World Wide Web Consortium）把动态HTML（Dynamic HTML）分为三个部
分来实现：脚本语言（包括JavaScript、Vbscript等）、支持动态效果的浏览器（
包括Internet Explorer、Netscape Navigator等）和CSS样式表。

一．层叠样式表的特点

且不说过去的网页缺少动感，就是在网页内容的排版布局上也有很多困难，如果不
是专业人员或特别有耐心的人，很难让网页按自己的构思和创意来显示信息。即便
是掌握了HTML语言精髓的人也要通过多次地测试，才能驾驭好这些信息的排版，过
程十分漫长和痛苦。为了Internet的发展，让更多人早日踏足这个多姿多彩的世界
，新的HTML辅助工具呼之欲出。

样式表就是在这种需求下诞生的，它首先要做的是为网页上的元素精确地定位，可
以让网页设计者象导演一样，轻易地控制由文字、图片组成的演员们，在网页这个
舞台上按剧本要求好好地表演。

其次，它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容
结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。以前两
者在网页上的分布是交错结合的，查看修改很不方便，而现在把两者分开就会大大
方便网页的设计者。内容结构和格式控制相分离，使得网页可以光由内容构成，而
将所有网页的格式控制指向某个CSS样式表文件。这样一来的好出表现在两个方面
：第一，简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快
了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保
存一次）。第二，只要修改保存着网站格式的CSS样式表文件就可以改变整个站点
的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页
的修改，大大减少了重复劳动的工作量，当你面对的是有数百个网页的站点时，
CSS简直象是神对我们的恩赐！^_^

二．添加层叠样式表的方法

我们为网页添加样式表的方法有四种。

1．最简单的方法是直接添加在HTML的标识符（tag）里：

<Tag style=”properties”>网页内容</tag>

举个例子：

<p style=”color: blue; font-size: 10pt”>CSS实例</p>

代码说明：

用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观，但是这种
方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制
分别保存”。

2．添加在HTML的头信息标识符<head>里：

<head>

<style type=”text/css”>



</style>

</head>

type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS
代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证
上述情况一定不要发生，还是有必要在样式表里加上注释标识符“”。

3．链接样式表

同样是添加在HTML的头信息标识符<head>里：

<head>

<link rel=”stylesheet” href=”*.css” type=”text/css” media=”
screen”>

</head>

*.css是单独保存的样式表文件，其中不能包含<style>标识符，并且只能以css为
后缀。

Media是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围：

·Screen（默认）：输出到电脑屏幕

·Print：输出到打印机

·TV：输出到电视机

·Projection：输出到投影仪

·Aural：输出到扬声器

·Braille：输出到凸字触觉感知设备

·Tty：输出到电传打字机

·All：输出到以上所有设备

如果要输出到多种媒体，可以用逗号分隔取值表。

Rel属性表示样式表将以何种方式与HTML文档结合。取值范围：

·Stylesheet：指定一个外部的样式表

·Alternate stylesheet：指定使用一个交互样式表

4．联合使用样式表

同样是添加在HTML的头信息标识符<head>里：

<head>

<style type=”text/css”>



</style>

</head>

以@import开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表
输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页的具体
情况，做出别的网页不需要的样式规则。

需要注意的是：

·联合法输入样式表必须以@import开头。

·如果同时输入多个样式表有冲突的时候，将按照第一个输入的样式表对网页排版
。

·如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。

太平洋网络学院已经获得eNet技术学院和作者授权转载，版权归eNet技术学院所有
，任何人不得从本站复制，转载

--
※ 来源:·荔园晨风BBS站 bbs.szu.edu.cn·[FROM: 192.168.0.158]

荔园在线首页友情链接：深圳大学深大招生荔园晨风BBS S-Term软件网络书店