如何使用css来控制页面

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

一、行内样式

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

2、使用方式

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

3、举例说明

   

	
正文内容1
	
正文内容2
	
正文内容3

4、评价

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

二、内嵌式

1、介绍

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

2、实例说明

   

	
紫色、粗体、下划线、25px的效果1
	
紫色、粗体、下划线、25px的效果2
	
紫色、粗体、下划线、25px的效果3

3、分析

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

（2）但是，如果有多个页面，对于不同页面上的

标记都希望采用同样的风格时，内嵌式就显得略微麻烦，维护成本也不低。

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

三、链接式

1、地位

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

2、方式

在HTML的和标记之间加上语句：。

3、实例

（1）CSS文件：1.css

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

（2）HTML框架

   

	
CSS标题1
	
紫色、粗体、下划线、25px的效果1
	
CSS标题2
	
紫色、粗体、下划线、25px的效果2

4、优势

将页面框架HTML代码与美工CSS代码完全分离，使得前期制作和后期维护都十分方便，一个CSS文件可以链接到多个HTML文件中。

四、导入式

1、功能类似于链接式，只是语法和运作方式上略有区别。

2、与链接式比较

（1）采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果；

（2）链接式的CSS文件则是在HTML的标记需要格式时才以链接的方式引入。

3、常用的几种@import语句

可以选择任意一种放在标记之间。

@import url(1.css);

@import url(&＃39;1.css&＃39;);

@import url("1.css");

@import 1.css;

@import &＃39;1.css&＃39;;

@import "1.css";

4、长处

（1）导入样式表的最大用处在于可以让一个HTML文件导入很多的样式表；

（2）不单是在HTML文件的标记中可以导入多个样式表，在CSS文件中也可以导入其他的样式表。

推荐教程：css快速入门

以上就是如何使用css来控制页面的详细内容，更多请关注 第一PHP社区 其它相关文章！