CSS---样式的引用方式

CSS不能单独使用，必须和HTML网页配合使用。要想使用CSS修饰网页，就需要在HTML文档中引入CSS。

1.内嵌式

将CSS代码集中写在HTML文档的<head>头部标记中，并用<style>标记定义。

（1）基本语法格式：

选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

</style>

在上述语法中，<style>标记一般位于<head>标记中的<title>标记之后，把CSS代码放在头部便于提前被加载和解析。

同时，必须设置type的属性值为“text/css”，这样浏览器才知道<style>标记包含的是CSS代码。

（2）案例：

实现

（2）链入式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文件中。

（1）基本语法格式：

<head>

</head>

在上面语法中，<link />标记必须要放在<head>头部标记中，并且必须指定<link />标记的3个属性：

●href：定义所链接外部样式表文件的地址，相对路径/绝对路径。

●type：定义所链接文档的类型，这里需要指定为“text/css”，表示链接的外部文件为CSS。

●rel：定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

（2）具体步骤：

a.创建样式表，书写CSS样式

创建一个style.css文件，将上述内嵌式<style></style>标记之间的内容复制到style.css中保存。

b.创建HTML文档

将内嵌式中的代码复制，并将<style>标记更改为链入式的形式，如下：

在上述代码中，使用<link />标记链入了style.css文件，代替了内嵌式的<style>标记。

从图中可以看到，使用两种方式的显示效果相同。在实际开发中，链入式是使用频率最高、最实用的引入方式，它将HTML代码和CSS代码分离为两个或多个文件，实现了结构和表现的完全分离，同一个CSS文件可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link />标记链接多个CSS样式表，大大提高了网页开发的工作效率。

3.行内式

直接在html标记里使用css样式。

语法：<div style="background-color:red">div的行内式效果</div>

演示

注意：style标记中的注释应为：/*...*/

4.导入式

与链入式相似：导入style.css

语法：

@import url(style.css);

</style>

CSS---样式的引用方式

推荐阅读更多精彩内容