【图】CSS入门教程——样式表加入网页方式

在上两节中我们已经为网页添加过简单的样式表了，我们也了解了样式表的语法基础。本节将介绍将样式表加入到页面中的几种不同方法。

内部样式表

其实我们在前两节已经应用了内部样式表。内部样式表需要在网页的head部分定义，格式如下：

head
style type="text/css"
/*符合CSS语法结构的CSS语句，例如*/ body { background-color: blue; }
/style
/head行内样式表(内嵌样式表)

它的使用方法我们在前两节也已经使用过了。行内样式表直接在标签内部定义，使用style属性，写法如下：

标签 style="符合CSS语法结构的CSS语句 "
例如：p style="text-indent:24px;"段落内容/p外部样式表

使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，你需要在网页的head部分插入以下内容：

head
link rel="stylesheet" type="text/css" href="文件位置/你的CSS文件名.css" /
/*文件位置就是所处在的文件夹相对与当前网页的相对路径*/
/head

下面我们以一个实例来看看如何使用外部样式表：

请看下面这个网页文件，红色部分的内容为网页链入了一个CSS样式表文件waibu.css，网页和CSS文件的源代码分别如下：

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
title我真惨!被用来演示CSS!/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
link rel="stylesheet" type="text/css" href="waibu.css"
/head
body
h1 class="dabiaoti"我是页面最上端的标题1/h1
h1 id="daohang"我是页面左侧的标题1，用来导航/h1
h1 class="xinwen"我是页面新闻的标题1/h1
p我是新闻的内容。/p
/body
/html h1dabiaoti {
font-weight: bolder;
text-align: center;
}
h1#daohang {
font-size: 12px;
font-weight: bolder;
text-align: left;
}
.xinwen {
font-size: 16px;
font-weight:bold;
text-align: center;
color:green;
}
p {
text-align: center;
} 层叠的意义

当我们为同一个标签多次设置样式表的时候，这些样式表会最终层叠成一个样式表来作用于标签。例如，你在外部样式表中为p定义了如下样式：

p { text-align: left;}

而在内部样式表中又定义了如下样式：

p {text-indent: 24px;}

那么最终网页内p标签的样式将为：p { text-align: left;text-indent: 24px;}。

几种样式表的优先级

上面的两个样式表的层叠比较好理解，两个样式表分别定义了一个标签的不同属性。但是如果外部样式表与内部样式表同时定义了一个属性呢？看下面的例子。

外部样式表的内容：

p { text-align: center;}

内部样式表的内容：

p { text-align: left; }

最终页面中的段落将是左对齐，也就是说如果你试图对同一标签的同一属性多次定义，那么内部样式表的定义将要覆盖外部样式表的定义。这是因为内部样式表的优先级高于外部样式表。三种样式表的优先级由高到低排列如下：