CSS不能单独使用,必须和HTML网页配合使用。要想使用CSS修饰网页,就需要在HTML文档中引入CSS。
1.内嵌式
将CSS代码集中写在HTML文档的<head>头部标记中,并用<style>标记定义。
(1)基本语法格式:
<style type="text/css">
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
在上述语法中,<style>标记一般位于<head>标记中的<title>标记之后,把CSS代码放在头部便于提前被加载和解析。
同时,必须设置type的属性值为“text/css”,这样浏览器才知道<style>标记包含的是CSS代码。
(2)案例:
(2)链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件链接到HTML文件中。
(1)基本语法格式:
<head>
<link href="CSS文件的路径url" type="text/css" rel="stylesheet">
</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
语法:
<style type="text/css">
@import url(style.css);
</style>