CSS（三）：引入样式和优先级

CSS的引入样式总共有三种：行内样式（内联样式表）、内部样式表、外部样式表。下面分别来介绍这三种样式。

一、行内样式

行内样式也叫内联样式，使用style属性引入CSS样式。看下面的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内样式</title>
</head>
<body>
    <p style="color:red;font-size: 30px;">p段落通过行内样式引入CSS样式</p>
</body>
</html>

效果：

注意：

1、行内样式只对应用了此样式的标签有效，如果有多个相同的标签要使用相同的样式，那么每一个标签都要引入该样式，会造成很多重复的代码，所以，在实际的应用当中，不建议使用行内样式。

二、内部样式表

内部样式表在<head>标签里面使用<style>标签书写CSS代码。

语法：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内部样式表</title>
    <!--内部样式表-->
    <style type="text/css">
       /*书写CSS样式*/
    </style>
</head>

看下面的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内部样式表</title>
    <!--内部样式表-->
    <style type="text/css">
       div{
           background-color: green;
       }
    </style>
</head>
<body>
    <div>我是DIV，通过内部样式表引入样式</div>
</body>
</html>

效果：

因为DIV是块级元素，所以DIV占据整行。

三、外部样式表

顾名思义，外部样式表表示CSS样式不写在HTML代码中，而是单独写在扩展名为.css的样式表中。

HTML文件引用扩展名为.css的样式表，有两种方式：

1. 链接式
2. 导入式

1、链接式

语法：

<link rel="styleSheet" type="text/css" href="CSS文件的路径（包括文件路径和css文件名）" />

说明：

type：规定被链接文档的类型，这是表示被链接的文档是css样式表。

rel：定义当前文档与被链接的文档之间的关系。

href：表示外部css样式表的路径，包括文件路径和css文件名。

示例：

先定义css样式表

li{
    color: green;
}

HTML代码中引入该外部样式表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外部样式表</title>
    <!--引入外部样式表-->
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <ol>
        <li>111</li>
        <li>222</li>
    </ol>
</body>
</html>

效果：

2、导入式

语法：

<!--导入式-->
<style type="text/css">
   @import url("css文件路径");
</style>

看下面的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外部样式表</title>
    <!--引入外部样式表-->
    <!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
    <!--导入式-->
    <style type="text/css">
      @import url("style.css");
    </style>
</head>
<body>
    <ol>
        <li>111</li>
        <li>222</li>
    </ol>
</body>
</html>

效果：

链接式和导入式的区别：

导入式：

1. 属于XHTML。
2. 优先加载CSS文件到页面。

链接式

1. 属于CSS 2.1.
2. 先加载HTML结构在加载CSS文件。

注意：

1. 无论是链接式还是导入式，都是写在<head>标签里面。
2. 建议使用链接式引入CSS文件。

四、CSS样式的优先级

优先级

• 行内样式>内部样式表>外部样式表

先看行内样式和内部样式表优先级的对比

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内样式和内部样式表优先级比较</title>
    <!--内部样式表-->
    <style type="text/css">
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <!--行内样式-->
    <p style="color:red;">我是p标签</p>
</body>
</html>

效果：

从截图中可以看出行内样式的优先级高于内部样式表。

在看看行内和外部样式表的优先级

在外部CSS样式表里面定义p标签的字体颜色为蓝色

p{
    color: blue;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内样式和外部样式表优先级</title>
    <!--引入外部样式表-->
    <link rel="styleSheet" type="text/css" href="ExtenStyle.css"
</head>
<body>
    <!--行内样式：定义颜色为绿色-->
    <p style="color:green;">我的p标签</p>
</body>
</html>

效果：

从截图中可以看出：行内样式的优先级高于外部样式表。

最后在看内部样式表和外部样式表的比较

外部样式表还是使用上面的css文件

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内部样式表和外部样式表优先级</title>
    <!--外部样式表-->
    <link rel="styleSheet" type="text/css" href="ExtenStyle.css"
    <!--内部样式表：定义颜色为黄色-->
    <style type="text/css">
       p{
           color: yellow;
       }
    </style>
</head>
<body>
    <p>我是p标签</p>
</body>
</html>

效果：

从截图中可以看出：内部样式表的优先级高于外部样式表。

调整<head>标签中两种样式的先后顺序，那效果又是如何呢？调整后的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内部样式表和外部样式表优先级</title>
    <!--内部样式表：定义颜色为黄色-->
    <style type="text/css">
       p{
           color: yellow;
       }
    </style>
     <!--外部样式表-->
     <link rel="styleSheet" type="text/css" href="ExtenStyle.css"
</head>
<body>
    <p>我是p标签</p>
</body>
</html>

效果：

从截图中看出：外部样式表的优先级高于内部样式表。

总结：

1. 因为HTML中代码的顺序是从上往下执行的，所以说内部样式表和外部样式表没有优先级谁高谁低之分，是按照就近原则执行的，哪种样式最后加载，就以哪种样式为准。
2. 同理，引入外部样式表的两种方式(链接式和导入式)的优先级也是按照就近原则。