关于css:CSS-外部样式

本节咱们讲最初一种 CSS 引入形式，也是理论开发中次要应用的一种形式，即内部款式。

内部款式就是把 CSS 代码保留在一个独自的文件中，文件的扩大名为 .css，而后在 HTML 页面中引入这个 CSS 文件即可。

HTML 文件引入内部样式表有两种形式，别离是链接式和导入式。

链接内部样式表就是在 HTML 文件中应用 <link/> 标签链接内部样式表，且 <link/> 标签必须放到 HTML 中的 <head> 标签内。在一个 HTML 页面中能够链接多个 CSS 文件，一个 CSS 文件也能够被多个 HTML 页面援用。

语法如下：

<link rel="stylesheet" type="text/css" href="css 文件门路">

其中 rel="stylesheet" 是指在页面中应用这个内部样式表，type="text/css" 是指文件的类型是样式表文本，href 属性用于指定 css 文件的门路。

内部样式表实现了构造与款式的彻底拆散，一个 css 文件能够利用到多个 HTML 页面中。当扭转 css 文件中的款式时，所有利用这个 css 文件的页面中的款式都会随之扭转。

示例：

例如咱们创立一个 index.css 的文件，将须要用到的 css 代码保留到这个文件中：

h2{color: lightsalmon;}
p{
    color:limegreen ;
    font-size: 18px;
    line-height: 20px;
}
span{
    color: mediumpurple;
    font-weight: bold;
}

而后能够在 HTML 文件中通过 <link/> 标签援用这个文件：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 学习 (9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="./index.css">
    </head>
    <body>
       <h2>《木兰花令 拟古决绝词》</h2>
       <p> 人生若只如初见，何事秋风悲画扇 </p>
       <p> 等闲变却故人心，却道故人心易变。</p>
       <p> 骊山语罢清宵半，泪雨零铃终不怨。</p>
       <p> 何如薄幸锦衣郎，<span> 比翼连枝当日愿。</span></p>
    </body>
</html>

在浏览器中演示成果：

能够看到最终成果和上一节内嵌款式示例中的是成果一样。只不过 CSS 局部独立为了一个独自的文件。

因为链接式在缩小代码书写和缩小保护工作方面都十分突出，所以链接式是最罕用的一种援用 CSS 款式的办法。

导入内部样式表就是在 HTML 页面中应用 @import 导入内部样式表，导入样式表的语法须要搁置到 <style> 标签中。

导入内部样式表和链接内部样式表是很像的，都实现了页面与款式的拆散。不同在于导入内部样式表在页面初始化时，就把款式导入到了页面中，这样就变成了内嵌款式。而链接内部样式表是在页面中有标签须要款式时才以链接的形式引入，这样看的话链接内部样式表会更加适合。

语法格局：

<style>
    @import url("css 文件门路");
</style>

@import 示意导入文件，后面的 @ 符号必须写哟，url 中的则是样式表文件的门路。

示例：

将上述示例中的引入 css 文件的形式改为导入内部样式表：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 学习 (9xkd.com)</title>
        <style>
            @import url("index.css");
        </style>
    </head>
    <body>
       <h2>《木兰花令 拟古决绝词》</h2>
       <p> 人生若只如初见，何事秋风悲画扇 </p>
       <p> 等闲变却故人心，却道故人心易变。</p>
       <p> 骊山语罢清宵半，泪雨零铃终不怨。</p>
       <p> 何如薄幸锦衣郎，<span> 比翼连枝当日愿。</span></p>
    </body>
</html>

演示成果是不变的，因为 css 文件中的内容并没有扭转。导入式除了能够在同一个页面中导入多个款式文件，还能够在 css 款式文件中应用 import 进行导入。

咱们学习了对于 CSS 款式的三种援用形式，那么它们之间的优先关系是怎么样的呢？也就是说当元素同时继承这些款式，然而款式之间产生了抵触，最终会利用哪个款式。

示例：

例如在一个 <p> 标签的行内款式中定义了字体大小为 16px，在嵌套款式中定义字体大小 18px，在内部款式中定义了字体大小为 20px。最终会利用哪个字体大小呢？这里我不演示，大家本人来试一下。

试完之后，是不是能得出如下论断呢，CSS 中款式的优先级规定如下所示：

行内款式>内嵌款式>内部款式

也就是说行内款式的优先级最高，最先会利用行内款式，其次是内嵌款式，最初是内部款式，这考究一个就近准则。

关于css:CSS-外部样式

什么是内部款式

链接内部样式表

示例：

导入内部样式表

示例：

款式优先级

示例：