二.CSS应用到网页
css编码允许我们以多种方式应用到我们所设计的XHTML页面之中，主要有以下三种方式，应用时应根据设计要求确定。
1、行间样式表
行间样式表是将CSS样式编码应用到XHTML标签之中，格式如下：
<p style="font-size:15px;color:#33ccff;font-weight:normal;line-height:22px;">
[...文本内容...]
</p>
行间样式是使用style=""来完成样式设置的，把标签所支持的属性丢到双引号之中，每一属性中间用分号隔开，结局处分号可以省略。
根据web2.0要求的“表现与内容分离”的标准，显然这种方式是不妥当的，它仅仅利用了CSS对元素的精确控制，没有实现样式与内容的分离，所以我们在应用中当完全杜绝此种方式。但然在调试CSS时还是可以临时使用的。
2内部样式表
内部样式与行间样式都是将CSS样式写在页面之中，但不同的是，内部样式表方式把样式表统一放置在一个固定页部<head></head>标签内。如：
<html>
<head>
<title>页面标题</title>
<style type="text/css">
body{}
a:{}
a:hover{}
td{}
p{}
#content{}
.text{}
</style>
</head>
<body>
</body>
</html>
以上代码中的<style></style>标签内放置样式表，注意应当丢在<head></head>之中。此代码只能被当前页执行，不能跨页执行，因而也达到到重复利用CSS的目的，所以也不是我们所提倡的方式。下面就重点讲外部样式表的应用。
3外部样式表
外部样式表是CSS应用最好的一种形式，把CSS样式代码集中放置在一个单独的CSS文件之中，由页面直接调用，可以实现多个页面的调用，实现了代码最大化重用及网站文件的最优化配置，是我们重点推荐的方式。调用方式如下：
<html>
<head>
<title>页面标题</title>
<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>
代码中使用link标签将名为style.css的css样式文件丢在<head></head>标签之中，便使用了外部CSS样式的调用。而href=""的作用则指明了CSS文件的路径。
外部调用CSS主要为了实现网站内容与样式的分离，有利于网站文件管理与样式管理，同时也增强了代码的可读性。在以后的探讨中，我们将深入了解如何组织CSS文件。
声明：为了便于讲解，以后的代码，会适当采用第二种内部样式表的方式，以便于对代码的修改来对比实现的效果。
1、行间样式表
行间样式表是将CSS样式编码应用到XHTML标签之中，格式如下：
<p style="font-size:15px;color:#33ccff;font-weight:normal;line-height:22px;">
[...文本内容...]
</p>
行间样式是使用style=""来完成样式设置的，把标签所支持的属性丢到双引号之中，每一属性中间用分号隔开，结局处分号可以省略。
根据web2.0要求的“表现与内容分离”的标准，显然这种方式是不妥当的，它仅仅利用了CSS对元素的精确控制，没有实现样式与内容的分离，所以我们在应用中当完全杜绝此种方式。但然在调试CSS时还是可以临时使用的。
2内部样式表
内部样式与行间样式都是将CSS样式写在页面之中，但不同的是，内部样式表方式把样式表统一放置在一个固定页部<head></head>标签内。如：
<html>
<head>
<title>页面标题</title>
<style type="text/css">
body{}
a:{}
a:hover{}
td{}
p{}
#content{}
.text{}
</style>
</head>
<body>
</body>
</html>
以上代码中的<style></style>标签内放置样式表，注意应当丢在<head></head>之中。此代码只能被当前页执行，不能跨页执行，因而也达到到重复利用CSS的目的，所以也不是我们所提倡的方式。下面就重点讲外部样式表的应用。
3外部样式表
外部样式表是CSS应用最好的一种形式，把CSS样式代码集中放置在一个单独的CSS文件之中，由页面直接调用，可以实现多个页面的调用，实现了代码最大化重用及网站文件的最优化配置，是我们重点推荐的方式。调用方式如下：
<html>
<head>
<title>页面标题</title>
<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>
代码中使用link标签将名为style.css的css样式文件丢在<head></head>标签之中，便使用了外部CSS样式的调用。而href=""的作用则指明了CSS文件的路径。
外部调用CSS主要为了实现网站内容与样式的分离，有利于网站文件管理与样式管理，同时也增强了代码的可读性。在以后的探讨中，我们将深入了解如何组织CSS文件。
声明：为了便于讲解，以后的代码，会适当采用第二种内部样式表的方式，以便于对代码的修改来对比实现的效果。
浙公网安备 33010602011771号