CSS教程Word格式.docx

CSS教程Word格式.docx

《CSS教程Word格式.docx》由会员分享，可在线阅读，更多相关《CSS教程Word格式.docx（47页珍藏版）》请在冰豆网上搜索。

而CSS则提供了更多选择，而且更为精确、完善。

现在所有浏览器都支持CSS。

经过下面若干课的学习之后，你将能够制作自己的CSS样式表，为自己的网站增添花样了。

CSS跟HTML的区别在哪里？

HTML用于结构化内容；

CSS用于格式化结构化的内容。

嗯，这听上去有点技术性并令人疑惑。

不过没关系，我们继续学习。

过会儿你就明白了。

在TimBerners-Lee发明万维网（WorldWideWeb）的那个年代，HTML语言是唯一用于给文本添加结构的语言。

作者可以通过声明“这是一个标题”（利用h1标签）或“这是一个段落”（利用p标签）的方式来标记文本。

随着Web逐渐流行起来，网页设计者们开始寻求为网页增添布局的可能性。

为此，当时的浏览器厂商们（网景公司和微软公司）发明了一些新的HTML标签（比如<

font>

等），以引入了新的布局——而非新的结构。

这也导致了原本用于进行文本的结构化的标签（比如<

table>

等）越来越多地被误用于进行页面的布局。

许多新的布局标签（比如<

blink>

）只有一种浏览器支持。

“您需要使用某某浏览器来浏览本页面”成为当时常见于许多网站的声明。

CSS的发明正是为了改善这一状况，它为Web设计师们提供了完善的、所有浏览器都支持的布局能力。

而且，文档的表现样式与内容的分离，也令网站维护容易了许多。

采用CSS有哪些好处？

CSS是Web设计界的一次革命。

CSS的具体优点包括：

∙通过单个样式表控制多个文档的布局；

∙更精确的布局控制；

∙为不同的媒体类型（屏幕、打印等）采取不同的布局；

∙无数高级、先进的技巧。

在下一课，我们将深入考察CSS的工作原理，以及如何上手。

CSS的工作原理？

∙上一课：

介绍

第2课：

CSS的工作原理

在这一课，你将学习如何制作自己的第一个样式表。

你将了解基本的CSS模型，以及在HTML文档里使用CSS所必需的代码。

级联样式表（CSS）里用到的许多CSS属性都与HTML属性相似，所以，假如你熟悉采用HTML进行布局的话，那么这里的许多代码你都不会感到陌生。

我们先来看一个具体的例子。

基本的CSS语法

比方说，我们要用红色作为网页的背景色：

用HTML的话，我们可以这样：

<

bodybgcolor="

#FF0000"

>

用CSS的话，我们可以这样获得同样的效果：

body{background-color:

#FF0000;

}

你会注意到，HTML和CSS的代码颇有几分相似。

上例也向你展示了基本的CSS模型：

但是把CSS代码放在哪里呢？

这正是我们下面要讲的。

为一个HTML文档应用CSS

为HTML文档应用CSS，有三种方法可供选择。

下面对这三种方法进行了概括。

我们建议你对第三种方法（即外部样式表）予以关注。

方法1：

行内样式表（style属性）

为HTML应用CSS的一种方法是使用HTML属性style。

我们在上例的基础之上，通过行内样式表将页面背景设为红色：

html>

<

head>

title>

例子<

/title>

/head>

bodystyle="

background-color:

"

p>

这个页面是红色的<

/p>

/body>

/html>

方法2：

内部样式表（style元素）

为HTML应用CSS的另一种方法是采用HTML元素style。

比如像这样：

styletype="

text/css"

body{background-color:

/style>

body>

方法3：

外部样式表（引用一个样式表文件）

我们推荐采用这种引用外部样式表的方法。

在本教程之后的例子中，我们将全部采用该方法。

外部样式表就是一个扩展名为css的文本文件。

跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。

例如，比方说你的样式表文件名为style.css，它通常被存放于名为style的目录中。

就像下面这样：

现在的问题是：

如何在一个HTML文档里引用一个外部样式表文件（style.css）呢？

答案是：

在HTML文档里创建一个指向外部样式表文件的链接（link）即可，就像下面这样：

linkrel="

stylesheet"

type="

href="

style/style.css"

/>

注意要在href属性里给出样式表文件的地址。

这行代码必须被插入HTML代码的头部（header），即放在标签<

和标签<

之间。

就像这样：

我的文档<

...

这个链接告诉浏览器：

在显示该HTML文件时，应使用给出的CSS文件进行布局。

这种方法的优越之处在于：

多个HTML文档可以同时引用一个样式表。

换句话说，可以用一个CSS文件来控制多个HTML文档的布局。

这一方法可以令你省去许多工作。

例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。

采用外部样式表，这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。

让我们来实践刚刚所学到的知识。

自己试试看

打开记事本（或其他文本编辑器），创建两个文件——一个HTML文件，一个CSS文件——它们的内容如下：

default.htm

style.css"

h1>

我的第一个样式表<

/h1>

style.css

body{

background-color:

然后，把这两个文件放在同一目录下。

记得在保存文件时使用正确的扩展名（分别为“htm”和“css”）。

用浏览器打开default.htm，你所看到的页面应该具有红色背景。

恭喜！

你已经完成了自己的第一个样式表！

加快进入下一课，在那里你会学到一些CSS属性。

颜色与背景

第3课：

颜色与背景

本课，你将学习如何在网站上应用颜色与背景。

我们还会介绍用于定位和控制背景图像的高级方法。

本课将对下列CSS属性进行讲解：

∙color

∙background-color

∙background-image

∙background-repeat

∙background-attachment

∙background-position

∙background

前景色：

‘color’属性

CSS属性color用于指定元素的前景色。

例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。

h1{

color:

#ff0000;

∙显示示例

颜色值可以用十六进制表示（比如上例中的#ff0000），也可以用颜色名称（比如“red”）或RGB值（比如rgb（255,0,0））表示。

‘background-color’属性

CSS属性background-color用于指定元素的背景色。

因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。

你也可以为其他包含标题或文本的元素单独应用背景色。

在下例中，我们为body和h1元素分别应用了不同的背景色。

#FFCC66;

#990000;

#FC9804;

注意：

我们为h1元素应用了两个CSS属性，它们之间以分号（“;

”）分隔。

背景图像[background-image]

CSS属性background-image用于设置背景图像。

在下面的示例中，我们使用了一张蝴蝶的图像作为背景。

你可以将该图片下载下来（方法为：

鼠标右击该图片，然后选择“图片另存为”），以便在自己的计算机上使用。

当然，你也可以选用其他你觉得满意的图片。

如果要把这个蝴蝶的图片作为网页的背景图像，只要在body元素上应用background-image属性、然后给出蝴蝶图片的存放位置就行了。

background-image:

url（"

butterfly.gif"

）;

注意我们指定图片存放位置的方式：

url（"

）。

这表明图片文件和样式表存放在同一目录下。

你也可以引用存放在其他目录的图片，只需给出存放路径即可（比如url（"

../images/butterfly.gif"

））；

此外，你甚至可以通过给出图片的地址来引用因特网（Internet）上的图片（比如url（"

平铺背景图像[background-repeat]

你有没有发现在上例中那个蝴蝶图片在横向和纵向都被平铺了？

CSS属性background-repeat就是用于控制平铺的。

下表概括了background-repeat的四种不同取值。

值

描述

示例

background-repeat:

repeat-x

图像横向平铺

显示示例

repeat-y

图像纵向平铺

repeat

图像横向和纵向都平铺

no-repeat

图像不平铺

例如，为了避免平铺背景图像，代码应该这样：

background-repeat:

no-repeat;

固定背景图像[background-attachment]

CSS属性background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。

一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景图像会随着页面的滚动而滚动。

下表概括了background-attachment的两种不同取值。

你可以点击示例察看二者的区别。

background-attachment:

scroll

图像会跟随页面滚动——非固定的

fixed

图像是固定在屏幕上的

例如，下面的代码将背景图像固定在屏幕上。

background-attachment:

fixed;

放置背景图像[background-position]

缺省地，背景图像将被放在屏幕的左上角。

但是，你可以通过CSS属性background-position来修改这一缺省设置，将背景图像摆放在屏幕上你觉得满意的地方。

设置background-position属性的值有多种方式。

不过，它们都是坐标的格式。

举例来说，值“100px200px”表示背景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。

坐标可以是以百分比或固定单位（比如像素、厘米等）作为单位的值，也可以是“top”、“bottom”、“center”、“left”和“right”这些值。

下图对此进行了解释：

下表给出了一些例子。

background-position:

2cm2cm

图像被放置在页面内距左边2厘米、顶部2厘米的地方

50%25%

图像被放置在页面内水平居中、离顶部四分之一处

topright

图像被放置在页面的右上角

在下例中，背景图像被放置在页面的右下角：

background-position:

rightbottom;

缩写[background]

CSS属性background是上述所有与背景有关的属性的缩写用法。

使用background属性可以减少属性的数目，因此令样式表更简短易读。

比如说下面五行代码：

background-image:

如果使用background属性的话，实现同样的效果只需一行代码即可搞定：

background:

#FFCC66url（"

）no-repeatfixedrightbottom;

各个值应按下列次序来写：

[background-color]|[background-image]|[background-repeat]|[background-attachment]|[background-position]

如果省略某个属性不写出来，那么将自动为它取缺省值。

比如，如果去掉background-attachment和background-position的话：

）no-repeat;

这两个未指定值的属性将被设置为缺省值：

scroll和topleft。

小结

在这一课，你学会了无法用HTML替代的新技术。

下一课同样是充满乐趣的，在那里我们将考察CSS在设置字体方面的各项功能。

字体

CSS的工作原理

第4课：

字体

这一课，你将学习字体以及如何用CSS来设置字体。

我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。

∙font-family

∙font-style

∙font-variant

∙font-weight

∙font-size

∙font

字体族[font-family]

CSS属性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。

有两种类型的名称可用于分类字体：

字体族名称（family-name）和族类名称（genericfamily）。

下面来解释这两个术语。

字体族名称（family-name）

字体族名称（就是我们通常所说的“字体”）的例子包括“Arial”、“TimesNewRoman”、“宋体”、“黑体”等等。

族类（genericfamily）

一个族类是一组具有统一外观的字体族。

sans-serif就是一例，它代表一组没有“脚”的字体。

下面我们通过三个族类的例子来进行解释：

你在给出字体列表时，自然应把首选字体放在前面、把候选字体放在后面。

建议你在列表的最后给出一个族类（genericfamily），这样，当没有一个指定字体可用时，页面至少可以采用一个相同族类的字体来显示。

下面是一个按优先级排列的字体列表的例子：

h1{font-family:

arial,verdana,sans-serif;

h2{font-family:

"

TimesNewRoman"

serif;

h1标题将采用Arial字体显示。

如果访问者的计算机未安装Arial，那么就使用Verdana字体。

假如Verdana字体也没安装的话，那么将采用一个属于sans-serif族类的字体来显示这个h1标题。

注意我们为“TimesNewRoman”采用的写法：

因为其中包含空格，所以我们用引号将它括起来。

字体样式[font-style]

CSS属性font-style定义所选字体的显示样式：

normal（正常）、italic（斜体）或oblique（倾斜）。

在下例中，所有h2标题都将显示为斜体。

font-style:

italic;

字体变化[font-variant]

CSS属性font-variant的值可以是：

normal（正常）或small-caps（小体大写字母）。

small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。

不太明白？

我们来看几个例子：

如果font-variant属性被设置为small-caps，而没有可用的支持小体大写字母的字体，那么浏览器多半会将文字显示为正常尺寸（而不是小尺寸）的大写字母。

h1{font-variant:

small-caps;

h2{font-variant:

normal;

字体浓淡[font-weight]

CSS属性font-weight指定字体显示的浓淡程度。

其值可以是normal（正常）或bold（加粗）。

有些浏览器甚至支持采用100到900之间的数字（以百为单位）来衡量字体的浓淡。

p{font-family:

td{font-family:

font-weight:

bold;

字体大小[font-size]

字体的大小用CSS属性font-size来设置。

字体大小可通过多种不同单位（比如像素或百分比等）来设置。

在本教程中，我们将关注于最常用和最合适的单位。

比如：

h1{font-size:

30px;

h2{font-size:

12pt;

h3{font-size:

120%;

p{font-size:

1em;

上面四种单位有着本质的区别。

‘px’和‘pt’将字体设置为固定大小，而‘%’和‘em’允许页面浏览者自行调整字体的显示尺寸。

有些页面浏览者可能是残疾者、年长者、视力不佳者，或者他所使用的电脑显示屏显示质量差。

为了令你的网站对所有人都具有良好的可用性（accessibility），你应采用像‘%’或‘em’这种允许用户调节字体显示大小的单位。

下面你能看到我们展示如何在MozillaFirefox和InternetExplorer里调整字体大小。

自己试试看！

这个功能很不错吧？

缩写[font]

CSS属性font是上述各有关字体的CSS属性的缩写用法。

比如说下面四行应用于p元素的代码：

p{

font-size: