学科分类
目录
HTML5+CSS3

引入CSS样式表

要想使用CSS修饰网页,就需要在HTML文档中引入CSS样式表。CSS提供了四种引入方式,分别为行内式、内嵌式、外链式、导入式,具体介绍如下。

1. 行内式

行内式也被称为内联样式,是通过标签的style属性来设置标签的样式,其基本语法格式如下。

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

上述语法中,style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。属性和属性值的书写规范与CSS样式规则一样,行内式只对其所在的标签及嵌套在其中的子标签起作用。

通常CSS的书写位置是在<head>头部标签中,但是行内式却是写在<html>根标签中,例如下面的示例代码,即为行内式CSS样式的写法。

<h1 style="font-size:20px; color:blue;">使用CSS行内式修饰一级标题的字体大小和颜色</h1>

在上述代码中,使用<h1>标签的style属性设置行内式CSS样式,用来修饰一级标题的字体大小和颜色。示例代码对应效果如图1所示。

img

图1 行内式效果展示

需要注意的是,行内式是通过标签的属性来控制样式的,这样并没有做到结构与样式分离,所以不推荐使用。

2. 内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中,并且用<style>标签定义,其基本语法格式如下。

<head>
<style type="text/css">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

上述语法中,<style>标签一般位于<title>标签之后,也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下解析代码的,把CSS代码放在头部有利于提前下载和解析,从而避免网页内容下载后没有样式修饰带来的尴尬。除此之外,需要设置type的属性值为“text/css”,这样浏览器才知道<style>标签包含的是CSS代码。在一些宽松的语法格式中,type属性可以省略。

内嵌式将结构与样式进行了不完全分离。由于内嵌式CSS样式只对其所在的HTML页面有效,因此仅设计一个页面时,使用内嵌式是个不错的选择。但如果是一个网站,则不建议使用这种方式,因为内嵌式不能充分发挥CSS代码的重用优势。

3. 外链式

外链式也叫链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />标签将外部样式表文件链接到HTML文档中,其基本语法格式如下。

<head>

<link href="CSS文件的路径" type="text/css" rel="stylesheet" />

</head>

上述语法中,<link />标签需要放在<head>头部标签中,并且必须指定<link />标签的三个属性,具体如下。

●href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

● type:定义所链接文档的类型,在这里需要指定为“text/css”,表示链接的外部文件为CSS样式表。在一些宽松的语法格式中,type属性可以省略。

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

外链式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用,同时一个HTML页面也可以通过多个<link />标签链接多个CSS样式表。在网页设计中,外链式是使用频率最高,也最实用的CSS样式表,因为它将HTML代码与CSS代码分离为两个或多个文件,实现了将结构和样式完全分离,使得网页的前期制作和后期维护都十分方便。

4. 导入式

导入式与链入式相同,都是针对外部样式表文件的。对HTML头部文档应用style标签,并在<style>标签内的开头处使用@import语句,即可导入外部样式表文件,其基本语法格式如下。

<style type="text/css" >
@import url(css文件路径);或 @import "css文件路径";
    /* 在此还可以存放其他CSS样式*/
</style> 

该语法中,style标签内还可以存放其他的内嵌样式,@import语句需要位于其他内嵌样式的上面。

虽然导入式和链入式功能基本相同,但是大多数网站都是采用链入式引入外部样式表的,主要原因是两者的加载时间和顺序不同。当一个页面被加载时,<link />标签引用的CSS样式表将同时被加载,而@import引用的CSS样式表会等到页面全部下载完后再被加载。因此,当用户的网速比较慢时,会先显示没有CSS修饰的网页,这样会造成不好的用户体验,所以大多数网站采用链入式。

点击此处
隐藏目录