css外部样式加载Link与import的区别

CSS外部样式加载Link与import的区别：

CSS样式可以通过三种方式来加载和使用，分别是：内联方式、嵌入式和外部式。在外部式中，有两种方式：link和import。这两种方式都可以在HTML文档中引用外部CSS样式文件，但是它们有一些不同之处。下面就来详细讲解一下两种方式各自的优缺点以及使用时需要注意的事项。

1.Link标签

Link标签是HTML页面中最普遍的用来引入CSS外部文件的元素，它的引用方式非常简单，只需要在HTML文档的head标签中添加下面的代码即可：

<link rel="stylesheet" type="text/css" href="style.css" />

Link标签有以下优点：

可以同时加载多个外部文件，使得整个页面的加载速度更快；
可以通过media属性限制不同媒体上的显示，如PC、手机、平板等。

Link标签的缺点：

在HTML文档中引用Link标签后，页面必须等待CSS文件加载完成后才能渲染，这可能会导致页面的白屏时间较长。

下面是一个简单实例说明：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Link标签示例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p class="red">Hello World!</p>
    <p class="green">Hello World!</p>
  </body>
</html>

style.css文件内容：

.red {
   color: red;
}
.green {
   color: green;
}

在上面的示例中，我们在head标签中引入了style.css文件，该文件定义了两个类名red和green，分别为文字颜色设置为红色和绿色。在HTML文档中，我们使用p标签来显示Hello World!文字，并分别附加了red和green两个类名，这样Hello World!文字就会呈现红色和绿色两种不同的颜色。

2.@import标记

@import标记是CSS中用来引入外部CSS文件的语法，它的使用方法和Link标签类似。在CSS文件中使用@import标记如下：

@import url("style.css") screen;

@import引入外部文件有以下优点：

在HTML文档加载时会先加载HTML结构，当HTML加载完成后再去加载CSS文件，所以不会造成白屏时间过长；
可以在CSS文件中@import其它的CSS文件，使得整个CSS文件的结构更加清晰化。

缺点：

@import引入外部文件时，只能引入CSS文件，不能引入图片等其它资源文件；
较老的浏览器可能不支持@import引入外部CSS文件。

下面是一个简单的实例说明：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>@import示例</title>
    <style type="text/css">
        @import url("style.css");
    </style>
  </head>
  <body>
    <p class="red">Hello World!</p>
    <p class="green">Hello World!</p>
  </body>
</html>

同样的，这个示例也可以达到和Link标签一样的效果，只是在CSS文件的引用方式上有所不同而已。

综上所述，Link标签引入外部CSS文件的方式可用于网站初始化时的整体着色，而@import方法更适用于在已经有了样式定义的情况下，通过引入其它CSS文件来增强样式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css外部样式加载Link与import的区别 - Python技术站

css外部样式加载Link与import的区别

相关文章