阅读 1291

3 分钟搞定 CSS 的 4 种引入方式

这是我参与更文挑战的第 1 天,活动详情查看: 更文挑战

在 HTML 样式中有 4 种 CSS 引用方式,分别为:行内样式(行间样式、内联样式、行嵌样式)、内部样式、链入外部样式、导入外部样式。

  • 行内样式(行间样式、内联样式、行嵌样式): 在网页元素上通过 style="" 属性直接写样式。如:

    <div style="color: green; margin-top: 30px;border: 1px solid red;width: 500px">行内样式实例1</div>
    复制代码
  • 内部样式表: 在网页上创建嵌入的样式表,通常写在 <head></head> 里面。如:

    <style>
        p {
            color: #6478de;
            border: red 1px solid;
        }
    </style>
    复制代码
  • 链入外部样式表: 将网页链接到外部样式表。先创建一个 CSS 文件,再在 HTML 中通过 <link> 链接此 CSS 文件。一般写在 <style></style> 的前面。如:

    <link rel="stylesheet" type="text/css" href="qt_02_style.css">
    复制代码
  • 导入外部样式表: 通过 @import 引入其他的 CSS 文件(不建议使用)。如:

    <style>
        @import "qt_02_style.css";
    </style>
    复制代码

以上 4 种 CSS 引用方式的区别:

  • 行内样式只作用于当前标签。HTML页面不纯净,后期维护不方便。
  • 内部样式作用于当前文件。CSS 代码写在 HTML 文档中,如果一个网站有很多 HTML 页面,每个文件都会变大,后期维护难度也大,如果 HTML 文件很少,CSS 代码也不多,也可以使用这种方式。
  • 外部样式可以被多个 HTML 文件引用。实现了 HTML 代码与 CSS 的完全分离,使得前期开发和后期维护都十分方便。

外部样式分为 <link> 引入和 @import 引入两种方式。这两种方式的区别为:

  1. <link> 是 XHTML 标签,除了可以加载 CSS 外,还可以定义 RSS 等其他事务,通过 <link> 标签中的 href="" 属性来引入外部文件。@import 属于 CSS 范畴,只能加载 CSS ,应该写在 CSS 中,且导入语句应写在样式表的开头,否则无法正确导入外部文件。
  2. <link> 引用 CSS 时,在页面载入的时候可以同时加载样式,样式加载和结构加载是异步操作。可以防止访问网页时先加载完文字、图片等结构数据,然后再加载样式的问题。@import 需要网页结构完全载入以后加载样式文件。
  3. <link> 是 XHTML 标签,无兼容问题。@import 是在 CSS2.1 提出的,低版本浏览器不支持。
  4. <link> 支持使用 JavaScript 控制 DOM 来改变样式。@import 不支持。

以上 4 种 CSS 引用方式的优先级:

  • 就近原则
  • 内部样式、 <link> 链入外部样式表、 @import 导入外部样式表三种方式同时出现在 HTML 页面的 <head></head> 标签内时,谁离要修改样式的元素近,谁的优先级高
  • 行内样式 > 内部样式、 链入外部样式表、 @import 导入外部样式表

在实际项目开发中,最好使用外部样式。符合解耦合的开发思想。想要修改某个字体或者样式,直接在 CSS 文件中修改,不需要修改 HTML 结构,页面变得更加容易维护,也有利于提升开发者的工作效率。

文章分类
前端
文章标签