方法1：使用link标签引入外部CSS文件（链接式）
在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用html规则引入外部css。
<link rel="stylesheet" type="text/css" href="css的路径" >
<link> 标签定义文档与外部资源的关系，<link> 标签最常见的用途是链接样式表。
link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。
示例：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接式</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<p>链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式<p>
</body>
</html>css样式文件--style.css代码：
p{
font-size: 20px;
color: #fff;
background-color: #70DBDB;
}效果图：
链接式会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
方法2：使用@import引入外部CSS文件（导入式）
将一个独立的.css文件引入HTML文件中，导入式使用css规则引入外部css文件，<style>标记也是写在<head>标记中，使用的语法如下：
<style type="text/css">
@import url("CSS文件");
</style>@import规则，用于从其他样式表导入样式规则，这些规则必须先于所有其他类型的规则。
代码实例：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入式</title>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>
<body>
<p>导入式导入式导入式导入式导入式导入式导入式导入式导入式<p>
</body>
</html>效果图：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
以上就是HTML中如何引入css文件?的详细内容，更多请关注0133技术站其它相关文章！
