HTML中如何引入css文件?

在学习前端的时候，我们应该知道css给html标记添加各种样式，用来告诉浏览器，因该如何显示这些标记里面的内容。既然css是用来给HTML添加各种样式的，那么，在HTML中如何引入外部的css文件呢？

方法1：使用link标签引入外部CSS文件（链接式）

在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用html规则引入外部css。

<link rel="stylesheet"  type="text/css"  href="css的路径" >

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>

效果图：