>  기사  >  웹 프론트엔드  >  CSS 링크와 @import의 차이점

CSS 링크와 @import의 차이점

高洛峰
高洛峰원래의
2017-02-09 16:49:151351검색

페이지에서 CSS를 사용하는 세 가지 주요 방법은 다음과 같습니다. 1. 스타일 속성 값을 인라인으로 추가하고 정의합니다. 2. 페이지 헤더에서 인라인 호출. 3. 외부 링크 호출.

외부 참조에는 link와 @import의 두 가지 유형이 있습니다.

XML/HTML 코드

rreee

XML/HTML 코드

<link href="stylesheet" href="CSS文件" type="text/css"/>

둘 다 CSS를 외부에서 참조하는 방법이지만 몇 가지 차이점이 있습니다.

차이점 1: 링크는 CSS를 로드하는 것 외에도 RSS @import와 같은 다른 트랜잭션을 정의할 수도 있습니다. CSS 카테고리에는 CSS만 로딩 가능합니다.

차이점 2: 링크가 CSS를 참조하는 경우 페이지가 로드될 때 동시에 로드됩니다. @import에서는 로드하기 전에 페이지를 완전히 로드해야 합니다.

차이점 3: 링크는 XHTML 태그이므로 호환성 문제가 없습니다. @import는 CSS2.1에서 제안되었으며 하위 버전의 브라우저는 적합하지 않습니다.

차이점 4: 링크는 @import가 적합하지 않은 동안 Javascript를 사용하여 DOM을 제어하여 스타일을 변경할 수 있도록 지원합니다.

차이점 5: 링크 스타일이 @import보다 가중치가 높습니다.

보충: @import를 작성하는 가장 좋은 방법
@import를 작성하는 방법은 일반적으로 다음과 같습니다.

@import 'style.css' // Windows IE4/ NS4에서 인식되지 않음, Mac OS /Windows NS4, Macintosh NS4에서 인식되지 않음
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4에서 인식되지 않음 recognition
@import url("style.css ") //Windows NS4, Macintosh NS4는 인식하지 못합니다.
위 분석을 통해 @import url(style.css) 및 @import url("style)을 알 수 있습니다. .css")가 최선의 선택이며 대부분의 브라우저와 호환됩니다. 바이트 최적화 관점에서는 @import url(style.css)이 가장 권장됩니다.

CSS 링크와 @import의 차이점에 대한 자세한 내용은 PHP 중국어 웹사이트의 관련 기사를 주목해주세요!

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