지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 웹 프론트엔드 HTML 튜토리얼 @import与link的区别与选择_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:50 AM

link

1 <head>2     <link rel="stylesheet" type="text/css" href="sheet1.css" media="all">3 </head>
로그인 후 복사

@import

1 <style type="text/css">2     @import url(sheet1.css);      3 </style>
로그인 후 복사

区别

  • 加载顺序：

    • 　　　　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链入外部样式表的区别

    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

    인기 기사

    Repo : 팀원을 부활시키는 방법
    3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    스플릿 소설을이기는 데 얼마나 걸립니까?
    3 몇 주 전 By DDD
    R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
    1 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
    3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?
    3 몇 주 전 By 王林
    더보기

    핫툴 태그

    코드앤아이
    오디오
    사업
    마케팅
    AI감지기
    챗봇
    디자인&아트

    인기 기사

    Repo : 팀원을 부활시키는 방법
    3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    스플릿 소설을이기는 데 얼마나 걸립니까?
    3 몇 주 전 By DDD
    R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
    1 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
    3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?
    3 몇 주 전 By 王林
    더보기

    뜨거운 기사 태그

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    더보기

    뜨거운 주제

    Gmail 이메일의 로그인 입구는 어디에 있나요?
    7288
    9
    자바 튜토리얼
    1622
    14
    Cakephp 튜토리얼
    1342
    46
    라라벨 튜토리얼
    1259
    25
    PHP 튜토리얼
    1206
    29
    더보기
    Related knowledge
    공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

    공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

    HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

    HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

    & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

    & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

    웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

    웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

    & lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

    & lt; meter & gt의 목적은 무엇입니까? 요소?

    HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

    HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

    & lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

    & lt; datalist & gt의 목적은 무엇입니까? 요소?

    & lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

    & lt; Progress & Gt의 목적은 무엇입니까? 요소?

    See all articles