在HTML文档中使用CSS的方法

CSS样式表在HTML文档中的使用主要分三种：行内样式、内部样式表和外部样式表。其中，外部样式表又分为链入外部样式表和导入外部样式表。

1. 行内样式

行内样式（inline style），也叫内联样式，就是在HTML的标签中使用style属性来设置css样式 。

如：

我喜爱的运动：

其作用范围是：作用于本标签。

2.内部样式表

内部样式表是将样式放在本页面的标签中，使用

进行声明。

如：

有序列表

p{

font-size: 20px;

color: #F00;

}

其作用范围是：作用于当前整个页面。

3.外部样式表

外部样式表又分为链入外部样式表和导入外部样式表

a. 链入外部样式表

或称链接外部样式表，是将样式表保存为外部样式表文件，如“main.css”，再在页面的中用

标记链接到这个样式表文件。

如：

有序列表

样式表存在"main.css"的外部样式表文件中，代码如下：

@charset "utf-8";

p{

font-size: 20px;

color: #F00;

}

其作用范围是：作用于引用该样式表文件的页面。

b. 导入外部样式表

即使用import在style标签中导入css文件

有序列表

@import "main.css";

其作用范围是：作用于导入该样式表文件的页面。

链入外部样式表和导入外部样式表的不同：

使用链入外部样式表时，会在先加载页面主体部分之前加载CSS文件，这样显示出来的网页从一开始就是带有样式效果的。

而使用导入外部样式表时，则是在整个页面加载完成后再加载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件比较大，则会出现显示无样式的页面，闪烁一下之后再出现设置样式后的效果。用户体验不佳。

为了便于维护，一般这样使用：

如果仅需要引入少量CSS文件，则使用链接方式；

如果需要引入多个CSS文件，则首先用链接方式引入一个CSS文件，在这个CSS文件中再使用导入式引入其他CSS文件。