CH经典CSS入门教程.docx

《CH经典CSS入门教程.docx》由会员分享，可在线阅读，更多相关《CH经典CSS入门教程.docx（20页珍藏版）》请在冰豆网上搜索。

CH经典CSS入门教程

CH经典CSS入门教程

级联样式表（CascadingStyleSheets，CSS）是一种为网站添加布局效果的出色工具。

它可以省去你大量时间，令你可以采用一种全新的方式来设计网站。

CSS是每个网页设计人员所必须掌握的。

第1课：

CSS是什么？

CSS是CascadingStyleSheets（级联样式表）的缩写。

可以用CSS做什么？

CSS是一种样式表语言，用于为HTML文档定义布局。

例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

HTML可以用于为网站添加布局效果，但有可能被误用。

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

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

CSS跟HTML的区别在哪里？

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

采用CSS有哪些好处？

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

CSS的具体优点包括：

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

更精确的布局控制；

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

无数高级、先进的技巧。

第2课：

CSS的工作原理

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

body{background-color:

#FF0000;}

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

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

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

方法1：

行内样式表（style属性）

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

style。

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

#FF0000;">

这个页面是红色的

方法2：

内部样式表（style元素）

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

style

。

比如像这样：

body{background-color:

#FF0000;}

这个页面是红色的

方法3：

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

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

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

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

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

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

就像下面这样：

现在的问题是：

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

答案是：

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

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

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

和标签

之间。

就像这样：

...

这个链接告诉浏览器：

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

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

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

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

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

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

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

它们的内容如下：

default.htm

我的第一个样式表

style.css

body{

background-color:

#FF0000;

}

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

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

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

恭喜！

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

第3课：

颜色与背景

ØColor:

用于指定元素的前景色。

Øbackground-color:

用于指定元素的背景色。

Øbackground-image:

用于设置背景图像.

Øbackground-repeat:

就是用于控制平铺的.

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

Øbackground-position放置背景图像.

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

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

值描述示例

background-repeat:

repeat-x图像横向平铺

background-repeat:

repeat-y图像纵向平铺

background-repeat:

repeat图像横向和纵向都平铺

background-repeat:

no-repeat图像不平铺

background-attachment

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

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

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

值描述

background-attachment:

scroll图像会跟随页面滚动

background-attachment:

fixed图像是固定在屏幕上的

background-position

属性的值有多种方式。

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

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

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

background

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

比如说下面五行代码：

background-color:

#FFCC66;

background-image:

url（"butterfly.gif"）;

background-repeat:

no-repeat;

background-attachment:

fixed;

background-position:

rightbottom;

background

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

background:

#FFCC66url（"butterfly.gif"）no-repeatfixedrightbottom;

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

[background-color]

|

[background-image]

|

[background-repeat]

|

[background-attachment]

|

[background-position]

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

第4课：

字体

✧font-family

✧font-style

✧font-variant

✧font-weight

✧font-size

✧font

font-family

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

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

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

h1{font-family:

arial,verdana,sans-serif;}

h2{font-family:

"TimesNewRoman",serif;}

标题将采用Arial字体显示。

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

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

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

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

字体样式[font-style]

定义所选字体的显示样式：

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

h2{font-family:

"TimesNewRoman",serif;font-style:

italic;}

字体变化[font-variant]

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

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

h1{font-variant:

small-caps;}

h2{font-variant:

normal;}

字体浓淡[font-weight]

定字体显示的浓淡程度。

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

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

td{font-family:

arial,verdana,sans-serif;font-weight:

bold;}

字体大小[font-size]

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

h1{font-size:

30px;}

h2{font-size:

12pt;}

h3{font-size:

120%;}

p{font-size:

1em;}

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

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

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

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

p{

font-style:

italic;

font-weight:

bold;

font-size:

30px;

font-family:

arial,sans-serif;

}

如果用font属性的话，上述四行代码可简化为：

p{

font:

italicbold30pxarial,sans-serif;

}

属性的值应按以下次序书写：

font-sty