CSS引入方式及性能分析

最新推荐文章于 2022-03-17 09:42:49 发布

weixin_34296641

最新推荐文章于 2022-03-17 09:42:49 发布

阅读量223

点赞数

文章标签： javascript xhtml ViewUI

原文链接：https://juejin.im/post/5b480c65e51d455f5f4cbfad

版权

CSS 引入方式

在HTML标签中的style属性中直接添加样式。

<div style="color: red"></div>

不推荐在生产环境使用内联样式，使用内联样式会导致样式混乱，不方便查找，且会导致HTML代码冗长，不易维护。

在HTML头部中使用<style></style>标签包含CSS代码。

<head>
  <style>
    .red {
      color: red;    
    }
  </style>
<head>
复制代码

在HTML头部中使用<link rel="stylesheet" type="text/css" href="theme.css" />引入一个外部样式表。

<head>
  <link rel="stylesheet" type="text/css" href="theme.css" />
<head> 
复制代码

import是css使用方法，需在css作用域下使用。

<head>
  <style>
    @import url('http://test.com/theme.css')
  </style>
<head>
复制代码

import是CSS2.1引入的。
import是css属性，只能加载CSS。
import适用于多个css样式文件存在逻辑关系的场景，如a.css依赖于b.css的情况下。
ie9下至多可引入31个文件，可通过@import在外链样式表中包含样式文件的方式引入更多文件。
import适用于含有相同外部样式文件的大量Html页面的场景，如存在100个Html页面需同时修改样式，如果对100个Html进行修改则需要修改一百次，可通过在其中的相同外部样式文件中通过@import引入样式减少工作量。

link是XHTML标签，无兼容性问题。
link是XHTML标签，除加载CSS之外，也可以引入RSS事务等。
link支持使用Javascript控制DOM去改变样式，link可以添加linkId，通过 document.getElementById("linkId").href可以控制link所记载的文件。
在老版本的浏览器中link的性能好于import，link在页面加载的时候就会加载；import会等待页面资源加载完成后再加载，性能略差。

https://www.cnblogs.com/yang5201314/p/5738447.html
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
https://stackoverflow.com/questions/10036977/best-way-to-include-css-why-use-import

转载于:https://juejin.im/post/5b480c65e51d455f5f4cbfad