如何使用css来控制页面-木庄网络博客

本文摘自PHP中文网，作者V，侵删。

使用CSS对页面进行全方位的控制，主要的方法有四种：行内样式、内嵌式、链接式和导入式，下面我们来分别看一下这四种方式：

一、行内样式

1、特点：最为直接的一种。

2、使用方式

直接在HTML的标记中，使用style属性，将CSS代码写在其中。

3、举例说明

<html>
<head>
<title>页面标题</title>
   </head>
<body>
    <p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p>
    <p style="color:#000000; font-style:italic;">正文内容2</p>
    <p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p>
</body>
</html>

4、评价

行内样式是最为简单的CSS使用方法，但由于需要为每一个标记设置style属性，后期维护成本依然很高，而且网页容易过胖，因此不推荐使用。

二、内嵌式

1、介绍

内嵌样式表就是将CSS写在<head>与</head>之间，并用<style>和</style>标记进行声明。

2、实例说明

<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
    color:#6600CC;
    text-decoration:underline;
    font-weight:bold;
    font-size:25px;
}
-->
</style>
   </head>
<body>
    <p>紫色、粗体、下划线、25px的效果1</p>
    <p>紫色、粗体、下划线、25px的效果2</p>
    <p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>

3、分析

（1）从例子中可以看出，所有的CSS代码部分被集中在了同一个区域，方便了后期的维护，页面也大大瘦身。

（2）但是，如果有多个页面，对于不同页面上的<p>标记都希望采用同样的风格时，内嵌式就显得略微麻烦，维护成本也不低。

（3）因此，内嵌式仅适用于对特殊页面设置单独的样式风格。

三、链接式

1、地位

链接式CSS样式是使用频率最高，也是最为实用的方法。

2、方式

在HTML的<head>和</head>标记之间加上语句：<link href="css文件" type="text/css" rel="stylesheet">。

3、实例

（1）CSS文件：1.css

h2{
    color:#0000FF;
}
p{
    color:#FF00FF;
    text-decoration:underline;
    font-weight:bold;
    font-size:20px;
}

（2）HTML框架

<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
   </head>
<body>
    <h2>CSS标题1</h2>
    <p>紫色、粗体、下划线、25px的效果1</p>
    <h2>CSS标题2</h2>
    <p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>