上一小节对CSS语法有了大体的认识，本节讲解如何使用CSS控制HTML页面，以及控制页面的各种方法，包括行内样式、嵌入式、链接式和导入式等，先看个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS调用示例代码</title>
<link href="base.css" rel="stylesheet" type="text/css" /> <!- - 此为链接（外部）样式表 >
<style type="text/css">
body,td,th {font-size: 12px;}
p{font-size: 24px;color:#FFFF00;}
</style> <!--<style></style>之间为内嵌样式表。-->
<body>
<div id="container">
<div id="header"> <p>头部</p> </div>
<div id="content">
<p style="color:#FF0000;font-size:36px">行内样式</p> <!- - 此为行内样式表 >
</div>
<div id="footer"> <p>尾部</p> </div>
</div>
</body>
</html>
上面的代码分别使用了链接式样、行内样式和内嵌样式，这也是实际开发中用的最多的3种样式，看不懂没关系，下面讲逐步的详细讲解。
行内式CSS样式
行内方式是4种样式中最直接最简单的一种，直接对HTML标签适用style=""，例如：
|
1
|
<p style=“
color
:
#FF0000
;
font-size
:
36px
”>行内样式</p>
|
虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。
嵌入式CSS样式
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。并且一般情况下嵌入式css样式写在<head></head>之间。
示例：
使用嵌入式方式，也就是说每个页面都需要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护成本会很高。如果文件很少，CSS代码也不多，这种方式是比较好的选择。
链接式CSS样式
链接式CSS样式就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内。如下面代码：
|
1
|
<link href=
"base.css"
rel=
"stylesheet"
type=
"text/css"
/>
|
这种方式是使用频率最高，也是最实用的方式。它将HTML文件和CSS文件彻底分成两个或者多个文件，实现了页面HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一，只需要把这些公共的CSS文件单独保存成一个文件，其他的页面就可以分别调用自身的CSS文件，如果需要改变网站风格，只需要修改公共CSS文件就OK了，相当的方便，这是xHTML+CSS制作页面提倡的方式。
导入式CSS样式（了解）
为了内容的完整性，这里也提下导入样式。导入样式和链接样式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌方式。常用的@import举例：
|
1
2
3
4
|
@import
url
(sheet
1
.css);
@import
url
(“sheet
1
.css”);
@import sheet
1
.css;
@import “sheet
1
.css”;
|
这个方式会产生不必要的请求，影响网页加载时间，这种方式了解下就好，不建议使用。
四种样式的优先级
如果这上面的四种方式中的两种用于同一个页面后，就会出现优先级的问题.四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式。
6725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
