masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > @import与link的区别与选择_html/css_WEB-ITnose

@import与link的区别与选择_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:50:46
asal
1272 orang telah melayarinya

link

1 <head>2     <link rel="stylesheet" type="text/css" href="sheet1.css" media="all">3 </head>
Salin selepas log masuk

@import

1 <style type="text/css">2     @import url(sheet1.css);      3 </style>
Salin selepas log masuk

区别

  • 加载顺序：

    • 　　　　link是先将css文件加载到网页，然后再进行编译。@import是先加载完html结构再加载css文件，如果网速较慢则会影响视觉效果。

    　　　　link确保并行下载css文件，@import是一个一个下载。

    　　　　在IE中，link会阻断@import延长加载时间，多个@import的使用还会打乱资源文件的下载顺序引发js问题。

  • 兼容性：link是xhtml标签无兼容问题，@import是css2.1提出的所以不支持IE5以前的浏览器。
  • DOM支持：link支持DOM改变样式，@import不支持。
  • 此外，link标签还可以调用js文件、声明目录等，@import只能加载css。

    • 选择

  •  使用link:

    • 　　　　　link可以选定要加载的媒体media。由于上述加载、兼容与IE的原因，普通站点应当尽量使用link。　　　

  •  使用@import:

    • 　　　　　大型门户网站（如淘宝）多个页面link同一个css文件会造成速度下降，@import可以在css中调入样式表，方便对css进行模块化管理。

     

    参考资料：

    高性能网站设计：不要使用@import

    [讨论]@import调用样式表的优势是什么呢？

    @import导入外部样式表与link链入外部样式表的区别

    Label berkaitan：
    @import与link的区别与选择
    sumber：php.cn
    Artikel sebelumnya：css入门基础详细教程_html/css_WEB-ITnose Artikel seterusnya：使用模板引擎渲染HTML界面_html/css_WEB-ITnose
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel terbaru oleh pengarang
    Isu terkini
    function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
    daripada 2024-04-29 11:01:01
    0
    3
    2037
    Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
    daripada 2024-04-23 00:22:19
    0
    11
    2197
    Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
    daripada 2024-04-19 15:37:47
    0
    1
    1851
    Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
    daripada 2024-04-18 23:52:34
    0
    1
    1744
    Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
    daripada 2024-04-16 10:10:18
    0
    0
    1763
    Topik-topik yang berkaitan
    Lagi>
    Cadangan popular
    Tutorial Popular
    Lagi>
    Tutorial berkaitan
    Cadangan popular
    Kursus terkini
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan