CSS样式的引用方式
想只用CSS修饰网页,就需要在HTML文档中引入CSS。CSS提供了4种引用方式,分别是行内式、内嵌式、外链式和导入式。.
1.行内式:
行内式也被称为内联式,可以通过style属性设置标签的样式。行内式基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</ 标签名>
在上述语法中,style是标签的属性,实际上任何HTML标签都拥有style属性,用于设置行内式。属性和属性值的书写规范与CSS样式规则一样。行内式CSS只对其所在的标签及嵌套在其中的子标签起作用。
通常CSS位于<head>头部标签中,但是行内式CSS位于<html>根标签中。例如,下面的示例代码即为行内式CSS样式的写法。
<h1 style="font-size: 20px; color: blue; ">使用行内式CSS修饰一级标题的字体大小和颜色</h1>
在上述代码中,使用<h1>标签的style属性设置行内式CSS样式,用于修饰一级标题的字体和颜色。行内式CSS展示效果如上图。
要注意一点,行内式是通过标签的属性来控制样式的,这样并没有做到结构与样式分离,所以不推荐使用。
2.内嵌式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中,并用<style>标签定义,其基本语法格式如下:
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
在上述语法中,<style>标签一般位于<head>标签中的<title>标签之后,因为浏览器是从上到下解析代码的,为了便于CSS代码提前备加载和解析应把它放在头部,以避免网页内容加载后没有样式修饰的问题。在<style>标签中,只有设置type的属性值为“text/css”,浏览器才知道<style>标签包含的是CSS代码。
例如:
<head>
<meta charset="UTF-8">
<title>刘某人CSS内嵌式的练习网站</title>
<style type="text/css">
/*定义标题标签居中对其*/
h2{ text-align: center;}
/*定义div标签样式*/
div{ border: 1px solid #CCC; width: 300px; height: 80px; color: purple;
text-align: center;}
</style>
</head>
<body>
<h2>内嵌式CSS样式</h2>
<div>
使用style标签可定义内嵌式CSS样式表,style标签一般位于head头部标签中,
title标签之后。
</div>
</body>
结果如下:
在文件中,HTML文档头部使用<style>标签定义内嵌式CSS样式,第7行代码使用了标题标签<h2>设置标题,9、10行代码定义了<div>标签的样式。
内嵌式CSS只对其所在的HTML页面有效,所以仅设计一个网站时,内嵌式CSS是个好东西。但是!在设计网站的时候,不建议用。因为内嵌式不能充分发挥CSS代码的重用优势。
3.外链式:
外链式也叫链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link>标签将外部样式表文件连接到HTML文件中。外链式CSS的基本语法格式如下:
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
在上述语法中,<link>标签需要放在<head>头部标签中,并且必须指定<link>标签的3个属性。
(1)href:定义所连接外部样式表文件的地址,可以是相对路径,也可以是绝对路径。
(2)type:定义所链接文档的类型,这里需要指定为“text/css”,表示链接的外部文件为CSS
(3)rel:定义当前文档与被链接文档之间的关系,这里选哟指定为“stylesheet”,表示被链接的文档是一个样式表文件。
①创建样式表
创建一个名为style的CSS文件,用记事本打开,并编写如下代码
/*定义标题标签居中对齐*/ h1{ text-align: center;} /*定义div标签样式*/ div{ border: 1px solid #CCC; width: 300px; height: 80px; color: purple; text-align: center;}
②创建HTML文档
如图:
<head>
<meta charset="UTF-8">
<title>刘某人外链式(链入式)的练习网站</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>外链式CSS样式</h1>
<div>
外链式也叫链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式
表文件中
</div>
</body>
在上述代码中,第3行代码使用了<link>标签链入了style.css文件,代替了内嵌式的<style>标签。结果如下
如图,使用外链式跟内嵌式引用CSS文件的显示效果是一样的。实际开发中,外链式是使用频率最高、最实用的引入方式,它将HTML代码CSS代码分离为两个或多个文件,实现了结构与表现的完全分离,同一个CSS文件可以被不同的HTML页面链接使用,同一个HTML页面也可以通过多个<link>标签链接多个CSS样式表,极大提高了网页开发的工作效率。
4.导入式
导入式与外链式相同,都是通过引入外部样式表文件来实现的。导入式CSS对HTML头部文档应用<style>标签,并且在<style>标签内的开头处使用的@import语句。导入式CSS的基本语法格式如下:
<style type="text/css">
@import url(CSS文件路径); 或者 @import "CSS文件路径";
/* 这里还可以存放其他CSS样式 */
</style>
在上述语法格式中,<style>标签内还可以存放其他的内嵌样式;@import语句需要位于其他内嵌样式的上面。
如果想在刚才的外链式HTML文件例子中使用导入式CSS,只需要把HTML文档的<link>标签代码替换成下面代码即可
<style type="text/css">
@import url(style.css);
</style>
或者
<style type="text/css">
@import "style.css";
</style>
虽然导入式CSS与外链式CSS功能基本相同,但是大多数网站采用外链式CSS引入外部样式表,主要原因是两者加载的时间和顺序不同。当一个页面被加载时,<link>标签引用的CSS样式表将同时被加载,而@import引用的CSS样式表会等页面全部下载完才被加载。因此,当用户的网速较慢时,会先显示有没有CSS修饰的网页,这样会造成不好的用户体验,所以大多数网站采用外链式CSS。