网页设计基础——CSS的四种引入方式详解
一、行内式;
规则:
1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中。
格式:
<html>
<head>
<title>页面标题</title>
</head>
<body>
<p style="color:#FF0000; font-size:66px">使用行内样式引入CSS</p>
</body>
</html>
二、内嵌式;
规则:
1. 内嵌式就是将CSS代码写在 <head>
和 </head>
之间,并用 <style>
和 </style>
标记进行声明。
格式:
<html>
<head>
<title>页面标题</title>
<style>
p{
color:#FF0000;
font-size:66px;
}
</style>
</head>
<body>
<p>使用内嵌式引入CSS</p>
</body>
</html>
三、链接式;
规则:
1, 链接式CSS样式表是使用频率最高,也是最实用的方法,其最大的优势在于CSS代码与HTML代码完全分离,并且同一个CSS文件可以被不同的HTML所链接使用。
2. 链接式通过在 <head>
和 </head>
标记之间加上【<link href="链接式.css” type="text/css" rel="stylesheet">】语句,将CSS文件链接到网页中,其中“链接式.css”应为CSS文件名称。
HTML文件格式:
<html>
<head>
<title>页面标题</title>
<link href="链接式.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>使用链接样式导入CSS</p>
</body>
</html>
CSS文件格式:
p
{
color:#FF0000;
font-size:66px;
}
四、导入式;
规则:
1. 导入式和链接式的功能基本相同,只是语法和运行方式上略有区别。采用import方式导入的样式表,在HTML文件初始化时,会被导入到HTML文件内,作为文件的一部分,类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才已链接的方式引入。
2. 导入式CSS样式表的最大用处在于可以让一个HTML文件导入很多的样式表。
3. 常用的@import语句:@import url(导入式.css); @import url("导入式.css"); @import url('导入式.css');
@import 导入式.css @import "导入式.css"; @import '导入式.css';
4. 不单是HTML文件的 <style>
与 </style>
标记中可以导入多个样式表,在CSS文件内也可以通过@import语句导入其它的样式表。
HTML文件格式:
<html>
<head>
<title>页面标题</title>
<style>
@import "导入式.css";/* 此处为CSS文件名,可修改 */
</style>
</head>
<body>
<p>使用导入式引入CSS</p>
</body>
</html>
CSS文件格式:
p
{
color:FF0000;
font-size:66px;
}
五、结语;
四种CSS引入方式的优先级分别是——行内式>链接式>内嵌式>导入式。