第二章使用CSS控制页面

本章主要介绍：如何使用CSS控制页面，以及其控制页面的各种方法，包括行内样式、内嵌式、链接式和导入式等，最后讨论各种方式的优先级问题

1、行内样式

行内样式是所有样式方法中最为直接的一种，直接对HTML的标记使用Style属性，然后将CSS代码直接写在其中。

<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>

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

2、内嵌式

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

<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
    color:#ff00ff;
    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>

所有CSS的代码部分被击中在了同一个区域，方便了后期的维护，页面本身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同页面上的<p>标记都希望采用同样的风格时，内嵌式的方法就显得稍微麻烦，维护成本也不低，因此仅适用于对特殊的页面设置单独的样式风格。

3、链接式

链接式CSS样式表是使用频率最高，也是最为使用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分的方便，网站后台的技术人员与美工设计者也可以很好的分工合作。

对于同一个CSS文件可以链接到多个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>

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

h3{
    color:#00ffff;
    font-style:italic;
    font-size:40px;
}

链接式样式表的最大优势在与CSS代码与HTML代码完全分离，并且同一个CSS文件可以别不同的HTML所链接使用。因此在设计整个网站时，可以将所有页面都链接到同一个CSS文件，使用相同的样式风格。如果整个网站需要进行样式上的修改，就仅仅只需要修改这一个CSS文件即可。

4、导入样式

采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式引入。

常用的有如下几种@import语句，可以选择任意一种放在<style> 与</style>标记之间：

@import url(sheet.css);

@import url("sheet.css");

@import url('sheet.css');

@import sheet.css;

@import "sheet.css";

@import 'sheet.css';

<html>
<head>
<title> 页面标题</title>
<style type="text/css">
<!--
@import url("1.css");
@import url("2css");
-->
</style>
</head>
<body>
<h2> CSS标题1 </h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2> CSS标题2 </h2>
<p>紫色、粗体、下划线、25px的效果3<p>
<h3> CSS标题3 </h3>

<p>紫色、粗体、下划线、25px的效果3<p>
</body>
</html>

导入样式表的最大用处在与可以让一个HTML文件导入很多的样式表
不单是HTML文件的<style>与</style>标记中可以导入多个样式表，在CSS文件内也可以导入其他的样式表，如将@import url(2.css);去掉，然后再1.css文件中加入@import url(2.css);也可以达到相同的效果。

5、各种方式的优先级问题

4种方法如果同时运用到同一个HTML文件的同一个标记上时，将会出现优先级的问题。如果在各种方法中设置的属性不一样，例如内嵌式设置字体为宋体，链接式设置颜色为红色，那么显示结果会二者同时生效，为宋体红色字。但当各种方法同时设置一个属性时，例如够设置字体的颜色，情况就会比较复杂。

2.css

h3{
    color:#ooffff;
    font-style:italic;
    font-size:40px;
}

3.css

h3{
    padding-top:50px;   /*顶端间隔50px  */

<html>
<head>
<title>样式优先级问题</title>
<style>
<!--
@import url(2.css);
h3{
background-color:#000000;
}
-->
</style>
<link href="3.css" type="text/css" rel="stylesheet">
</head>
<body>
<h3 style="text-decoration:underline;">CSS标题测试</h3>
</body>
</html>

行内样式设置文字下划线，内嵌样式设置背景颜色为黑色，链接样式3.css设置文字顶端空50px的距离，链接样式2.css则设置字体为青色、斜体、大小40px。
这4中样式互不影响，各自都实现了应有的效果。

但这4种样式同时设置字体颜色，而且分别设置不同的颜色，就存在优先级的问题，由此可判断，行内样式的优先级最高，其次是采用<link>标记的链接式，再次是位于<style>和</style>之间的内嵌式，最后是@import导入式。

（注：在建设网站是，最好只适用其中的1~2种，这样既有利于后期的维护和管理，也不会出现各种样式“撞车”的情况，便于设计者理顺设计的整体思路。）

第二章 使用CSS控制页面

第二章使用CSS控制页面