CSS 링크와 가져오기의 차이점은 무엇입니까

차이점: link는 html 태그이고 @import는 CSS에서 제공하는 메서드입니다. link 태그는 CSS를 도입할 수 있을 뿐만 아니라 다른 작업도 수행할 수 있지만 @import는 CSS를 도입할 수만 있습니다. 이상 링크 태그에는 호환성 문제가 없습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

HTML에 외부 CSS를 도입하는 방법에는 링크 태그와 @import 두 가지가 있는데 그 차이점은 무엇인가요?

1. 종속 관계의 차이점

@import는 CSS에서 제공하는 구문 규칙으로 스타일 시트를 가져오는 기능만 가지고 있습니다. 링크는 HTML에서 제공하는 태그로 CSS 파일을 로드할 수 있을 뿐만 아니라 또한 RSS, rel 연결 속성 등을 정의합니다.

2. 로드 순서 차이

페이지 로드 시 링크 태그에 의해 도입된 CSS가 동시에 로드됩니다. 페이지가 로드된 후에 @import에 의해 도입된 CSS가 로드됩니다.

3. 호환성 차이

@import는 CSS2.1에서만 사용할 수 있는 구문이므로 IE5 이상에서만 인식할 수 있습니다. 링크 태그는 HTML 요소이며 호환성 문제가 없습니다.

4. DOM 제어성의 차이

JS를 통해 DOM을 조작하고 링크 태그를 삽입하여 스타일을 변경할 수 있습니다. DOM 방식은 문서 기반이므로 @import 방식을 사용하여 스타일을 삽입할 수 없습니다.

【추천 튜토리얼: CSS 동영상 튜토리얼】

추가 설명:

@import 작성 방법

<style type="text/css">
    @import &#39;style.css&#39; //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
    @import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
    @import url(style.css) //Windows NS4, Macintosh NS4不识别
    @import url(&#39;style.css&#39;) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
    @import url("style.css") //Windows NS4, Macintosh NS4不识别
</style>

그 중 @import url(style.css) 및 @import url("style.css") 최선의 선택이며 대부분의 브라우저와 호환됩니다. 바이트 최적화 관점에서는 @import url(style.css)이 가장 권장됩니다.

링크 작성 방법

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

또한 링크에는 아이콘 도입 등의 다른 용도도 있습니다

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

일반적으로 링크는 @import보다 낫습니다. 링크 태그를 사용하고 @import 메서드를 사용하는 것이 좋습니다. 주의.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS 링크와 가져오기의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!