likes
comments
collection
share

详解CSS引入样式的4种方式

作者站长头像
站长
· 阅读数 22

前言：在前端搬砖过程中，CSS（层叠样式表）用于描述HTML文档的外观和格式。CSS可以通过多种方式引入到HTML文档中，然而，对于引入方式你又知多少呢？今天，我将介绍四种引入方式，每种方式都有其特点和适用场景。这四种方式分别是内联样式、内部样式表、外部样式表以及使用@import规则。文章将详细比较这些方法，并深入探讨<link>和@import的区别。

1. 内联样式（Inline Styles）

内联样式是将CSS规则直接写在HTML元素的style属性中。这种方法适用于需要对单个元素进行独特样式设置的情况。

例子🌰：

<h1 style="color: blue; text-align: center;">Hello, World!</h1>

2. 内部样式表（Internal Style Sheet）

内部样式表将CSS规则写在HTML文档的<head>部分的<style>标签内。这种方法适用于单个页面需要特定样式的情况。

例子🌰：

<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>

3. 外部样式表（External Style Sheet）

外部样式表将CSS规则写在独立的.css文件中，并通过HTML文档的<link>标签引入。这种方法适用于多个页面共享相同样式的情况。

例子🌰：

HTML文件：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

CSS文件（styles.css）：

h1 {
    text-shadow: 1px 1px 2px black;
    text-align: center;
}

4. 使用@import规则（Using @import Rule）

@import规则用于在一个CSS文件中引入另一个CSS文件。这种方法适用于需要模块化管理CSS的情况。

例子🌰：

HTML文件：

<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1>我要开花，我要发芽🌱客观给个赞呗！👍🏻客观给个赞呗！👍🏻客观给个赞呗！👍🏻客观给个赞呗！👍🏻</h1>
</body>

CSS文件（main.css）：

@import url('styles.css');

h1 {
    font-size: 2em;
    text-shadow: white 1px 5px;
}

好了，说那么多，我搬砖时该选哪种呢？这几种引入样式方式有什么区别呢？继续往下看：

4种方式的比较和区别

特点内联样式内部样式表外部样式表@import 规则
定义位置HTML元素的style属性HTML文档的<style>标签独立的CSS文件独立的CSS文件
适用范围单个元素单个HTML页面多个HTML页面多个HTML页面
维护性低中高高
加载性能高（内联）中（内嵌）高（外链）低（内嵌）
共享性无无有有
优先级高中中低

从表格我们可以看出来，<link> 标签和 @import 引入方式使得代码解耦，可复用性强。那么两者有什么区别呢？我们继续往下看：

<link>和@import的区别

  1. 加载顺序：

    • <link>标签引入的样式表在HTML加载时立即加载。
    • @import规则引入的样式表在主样式表加载后才加载，可能导致延迟。

  2. 兼容性：

    • <link>标签在所有浏览器中都能很好地支持。
    • @import规则在旧版本的浏览器中可能不兼容。

  3. 性能：

    • 使用<link>标签加载样式表时，浏览器会并行下载资源，提高页面加载速度。
    • 使用@import规则时，样式表是串行下载的，可能导致页面加载变慢。

  4. 语法位置：

    • <link>标签只能在HTML文档的<head>部分使用。
    • @import规则只能在CSS文件中使用，且必须在文件的最前面。

总结

在选择CSS引入方式时，需要根据具体的项目需求和维护成本进行权衡。内联样式适用于小范围的样式修改，内部样式表适用于单个页面的样式管理，外部样式表则是最佳实践，适用于多个页面共享样式。而@import规则虽然提供了模块化管理的便利，但在性能和兼容性上存在一些不足。希望前端技术发展越来越快，补足这些不足。点赞加关注，点下手指的事情各位大佬何乐而不为呢？送你一朵小红花❀❀❀❀❀❀

参考文献：

  1. MDN Web Docs - CSS
  2. W3Schools - CSS
  3. CSS-Tricks - Using @import
转载自:https://juejin.cn/post/7390184494098579510
评论
请登录