2024年7月6日发(作者：)

CH经典CSS入门教程

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

以省去你大量时间，令你可以采用一种全新的方式来设计网站。CSS是每个网页设计人员所

必须掌握的。

第1课：CSS是什么？

CSS是Cascading Style Sheets（级联样式表）的缩写。

可以用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。我们在上例的基础之上，通过行内样式表将页面背景设为红色：

这个页面是红色的

方法2：内部样式表（style元素）

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

style

。比如像这样：

这个页面是红色的

方法3：外部样式表（引用一个样式表文件）

我们推荐采用这种引用外部样式表的方法。在本教程之后的例子中，我们将全部采用该方法。

外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在

Web服务器上或者本地硬盘上。

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

这样：

现在的问题是：如何在一个HTML文档里引用一个外部样式表文件（）呢？答案是：

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

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

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

和标签

之间。就像这样：

...

这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。

这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用

一个CSS文件来控制多个HTML文档的布局。

这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100

个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工

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

可。

它们的内容如下：

我的第一个样式表

body {

background-color: #FF0000;

}

然后，把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名（分别为“htm”

和“css”）。

用浏览器打开，你所看到的页面应该具有红色背景。恭喜！你已经完成了自己的

第一个样式表！

第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

属性的值有多种方式。不过，它们都是坐标的格式。举例来说，值“100px 200px”表示背

景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。

坐标可以是以百分比或固定单位（比如像素、厘米等）作为单位的值，也可以是“top”、

“bottom”、“center”、“left”和“right”这些值。

background

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

比如说下面五行代码：

background-color: #FFCC66;

background-image: url("");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

background

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

background: #FFCC66 url("") no-repeat fixed right bottom;

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

[background-color]

|

[background-image]

|

[background-repeat]

|

[background-attachment]

|

[background-position]

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

第4课：字体

 font-family

 font-style

 font-variant

 font-weight

 font-size

 font

font-family

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

最后给出一个族类（generic family），这样，当没有一个指定字体可用时，页面至少可以采

用一个相同族类的字体来显示。

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

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

标题将采用Arial字体显示。如果访问者的计算机未安装Arial，那么就使用Verdana字体。

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

标题。注意我们为“Times New Roman”采用的写法：因为其中包含空格，所以我们用引号

将它括起来。

字体样式[font-style]

定义所选字体的显示样式：normal（正常）、italic（斜体）或oblique（倾斜）。

h2 {font-family: "Times New Roman", 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: italic bold 30px arial, sans-serif;

}

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

font-style

|

font-variant

|

font-weight

|

font-size

|

font-family

第5课：文本

text-indent

text-align

text-decoration

letter-spacing

text-transform

text-indent

用于为段落设置首行缩进，以令其具有美观的格式。

text-indent:20px;

text-align

与HTML属性align的功能相同。该属性的值可以是：left（左对齐）、right（右对齐）或者

center（居中）。除了上面三种选择以外，你还可以将该属性的值设为justify（两端对齐），

即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。

text-align:center;

text-align:left;

text-align:right;

text-align:justify;

text-decoration

令我们可以为文本增添不同的“装饰”或“效果”。例如，你可以为文本增添下划线、删除

线、上划线等等

text-decoration:line-through;

text-decoration:overline;

text-decoration:underline;

letter-spacing

用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。

h1 {

letter-spacing: 6px;

}

p {

letter-spacing: 3px;

}

text-transform

用于控制文本的大小写。无论字母本来的大小写，你可以通过该属性令它首字母大写

（capitalize）、全部大写（uppercase）或者全部小写（lowercase）。

transform属性有四个可选值：

capitalize

将每个单词的首字母转换为大写。例如：“john doe”将被转换为“John Doe”。

uppercase

所有字母都转换为大写。例如：“john doe”将被转换为“JOHN DOE”。

lowercase

所有字母都转换为小写。例如：“JOHN DOE”将被转换为“john doe”。

none

不作任何转换——文本怎么写的就怎么显示。

第6课：链接

a {

color: blue;

}

一个链接可以有不同的状态。例如，它可以是已访问过的，也可以是未访问过的。你可以通

过伪类分别为访问过的链接和未访问过的链接设置不同的样式。

a:link {

color: blue;

}

a:visited {

color: red;

}

为未访问过的链接和已访问过的链接分别使用伪类a:link和a:visited。活动的链接对应的伪

类为a:active，有鼠标悬停的链接对应的伪类为a:hover.

例2：去掉链接的下划线

如何去掉链接的下划线是一个常见的问题。

关于是否去掉链接的下划线，你必须仔细考虑清楚，因为这有可能严重降低网站的易用性

（usability）。人们已经习惯于兰色有下划线的链接了，他们看到它就知道那是可以点击的。

甚至连我母亲都知道这一点！如果你去掉链接的下划线或修改链接的字体颜色的话，这很有

可能会令用户感到困惑、并因此不能充分享用你网站上的内容。 尽管如此，去掉链接的下

划线是非常容易的。

属性的值设为none就行了。

a {

text-decoration:none;

}

第7课：元素的分类与标识（class和id）

用class对元素进行分类

制造白葡萄酒的葡萄：

• 雷司令（Riesling）
• 夏敦埃（Chardonnay）
• 白比诺（Pinot Blanc）

制造红葡萄酒的葡萄：

• 卡百内索维农（Cabernet Sauvignon）
• 墨尔乐（Merlot）
• 黑比诺（Pinot Noir）

a {

color: blue;

}

ine {

color: #FFBB00;

}

e {

color: #800000;

}

如上例所示，你可以通过在样式表里利用.classname来为属于某一类的元素定义CSS属性。

HTML属性的id的特别之处在于，在同一HTML文档中不能有两个具有相同id值的元素。

文档中的每个id值都必须是唯一的。在其他情况下，你应该使用class属性。

第1章

...

第1.1节

...

第1.2节

...

第2章

#c1-2 {

color: red;

}

如上例所示，你可以在样式表里通过#id为特定元素定义CSS属性。

第8课：组织元素（span和div）

span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。

在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很

重要的。

用span组织元素

span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使

用的话，span可以对文档中的部分文本增添视觉效果。

早睡早起使人健康、富裕和

聪颖。

相应的CSS代码如下：

t {

color:red;

}

用div组织元素

span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。

#democrats {

background:blue;

}

#republicans {

background:red;

}

第9课：盒状模型

CSS中的盒状模型（box model）用于描述一个为HTML元素形成的矩形盒子。盒状模型

还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具

体操作。下图显示了盒状模型的结构：

CSS中的盒状模型

第10课：外边距和内边距

上一课，你学习了盒状模型。在这一课，我们将了解如何通过设置margin（外边距）和padding

（内边距）这两个CSS属性来改变元素的显示。

为元素设置外边距

一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。

满足上述要求的CSS代码如下：

body {

margin-top:100px;

margin-right:40px;

margin-bottom:10px;

margin-left:70px;

}

或者你也可以采用一种较优雅的缩写形式：

body {

margin: 100px 40px 10px 70px;

}

为元素设置内边距

内边距（padding）也可以被理解成“填充物”。这样理解是合理的，因为内边距并不影响元

素间的距离，它只定义元素的内容与元素边框之间的距离。

h1 {

background: yellow;

}

h2 {

background: orange;

}

通过为标题设置内边距，你可以控制在标题文本周围填充多少空白：

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}

第11课：边框

边框（border）可以有多种用途，比如作为装饰元素或者作为划分两物的分界线。在设置边

框方面，CSS为你提供了无尽选择。

border-width

border-color

border-style

一些示例

缩写 [border]

边框宽度由CSS属性border-width定义，其值可以是“thin”（薄）、“medium”（普通）或“thick”

（厚）等，也可以是像素值。

CSS属性border-color用于定义边框的颜色。其值就是正常的颜色值，例如：“#123456”、

“rgb(123,123,123)”、“yellow”等。

边框样式[border-style]

边框样式有多种可供选择。下图显示了8种不同样式的边框在Internet Explorer 5.5里的实际

显示效果。在这个例子里，我们为这8种边框都选择了“金色（gold）”作为边框颜色、“厚

(thick)”作为边框宽度。当然，这只是个例子，你可以为边框设置别的颜色和厚度。

如果你不想有任何边框，可以为它取值为“none”或者“hidden”。

h3{

border-width:thick;

border-color:red;

border-style:double;

}

h4{

border-width:10px;

border-color:red;

border-style:inset;

}

主要的style:

h1 {

border-top-width: thick;

border-top-style: solid;

border-top-color: red;

border-bottom-width: thick;

border-bottom-style: solid;

border-bottom-color: blue;

border-right-width: thick;

border-right-style: solid;

border-right-color: green;

border-left-width: thick;

border-left-style: solid;

border-left-color: orange;

}

缩写[border]

跟许多其他属性一样，你也可以将有关边框的CSS属性缩写为一个border属性。让我们看

一个例子：

p {

border-width: 1px;

border-style: solid;

border-color: blue;

}

可被缩写为：

p {

border: 1px solid blue;

}

第12课：高度和宽度

设定宽度[width]

设定高度[height]

#box{

width:400px;

height:500px;

border:5px solid blue;

background:orange;

}

第13课：浮动元素（float）

我们可以通过CSS属性float令元素向左或向右浮动

float属性的值可以是left、right或者none。

#column1 {

float:left;

width: 33%;

}

#column2 {

float:left;

width: 33%;

}

CSS属性clear用于控制浮动元素的后继元素的行为。缺省地，后继元素将向上移动，以填

补由于前面元素的浮动而空出的可用空间。

属性的值可以是left、right、both或none。

原则是这样的：如果一个盒子的clear属性被设为“both”，那么该盒子的上边距将始终处于

前面的浮动盒子（如果存在的话）的下边距之下。

第14课：元素的定位

CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动（参

见第13课），你将能够创建多种高级而精确的布局。

本课我们将讨论以下内容：

CSS定位的原理

绝对定位

相对定位

CSS定位的原理

CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。

绝对定位

一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。

要对元素进行绝对定位，应将position属性的值设为absolute。接着，你可以通过属性left、

right、top和bottom来设定将盒子放置在哪里。

#box1 {

position:absolute;

top: 50px;

left: 50px;

}

相对定位

要对元素进行相对定位，应将position属性的值设为relative。绝对定位与相对定位的区别在

于计算位置的方式。

采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对

定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元

素会获得相应的空间

#dog1 {

position:relative;

left: 350px;

bottom: 150px;

}

#dog2 {

position:relative;

left: 150px;

bottom: 500px;

}

第15课：用z-index进行层次堆叠

CSS可以处理高度、宽度、深度三个维度。在前面的课程中，我们已经了解了前两个维度。

在本课中，我们将学习如何令不同元素具有层次。简言之，就是关于元素堆叠的次序问题。

为此，你可以为每个元素指定一个数字（z-index）。其原理是：数字较大的元素将叠加在数

字较小的元素之上。

#img01{

position:absolute;

left:100px;

bottom:100px;

z-index:1;

}

#img02{

position:absolute;

left:115px;

bottom:115px;

z-index:2;

}

高级语法：

 选择器分组：逗号隔开，拥有同一样式

DIV, SPAN, P{ font-size: 12px; }

 样式继承: 子元素会拥有上一级元素定义的样式(重写)

BODY{ font-size: 12px; }

词间距：word-spacing

line-height

 表格边框：border-collapse separate | collapse

 表格布局：table-layout auto | fixed

 list-style : list-style-image || list-style-position || list-style-type

 水平对齐：text-align

 垂直对齐：vertical-align(IMG TD TH TR)

 文本缩进：text-indent

 文本溢出：text-overflow

 空白处理：white-space

 断开转行：word-wrap

 词内换行：word-break

text-overflow : clip | ellipsis

word-wrap : normal | break-word

word-break : normal | break-all | keep-all

 position: static | absolute | fixed | relative