网页设计基础——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引入方式的优先级分别是——行内式>链接式>内嵌式>导入式。
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
