> 웹 프론트엔드 > HTML 튜토리얼 > link와 @import의 차이점

link와 @import의 차이점

WBOY
풀어 주다: 2016-08-15 16:49:53
원래의
1572명이 탐색했습니다.

link와 @import 모두 CSS 스타일 시트를 도입할 수 있다는 것을 모두 알고 있는데, 둘 사이의 차이점은 무엇인가요? 먼저 각각의 링크 방식에 대해 이야기한 후, 차이점에 대해 이야기해 볼까요~~~

링크 방법 :

<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="index.css"</span><span style="color: #0000ff;">></span>
로그인 후 복사

@import 가져오기 방법:

 <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
  @import url('index.css');
  </span><span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
로그인 후 복사

우선순위: 스타일 삽입 > 내부 스타일 시트 > 스타일 시트 가져오기(스타일 시트에 링크)

import 방법은 linking 방법과 매우 유사하지만, 사실은 기존 내부 스타일시트와 동일합니다. 그럼에도 불구하고 여전히 내부 스타일시트보다 우선순위가 낮으며 동일합니다. 연결된 스타일로 테이블의 우선순위는 나중에 정의된 사람이 더 높은 우선순위를 갖게 됩니다.

참고: 외부 스타일 시트를 가져올 때 해당 위치는 스타일 시트의 상단, 즉 다른 스타일 앞에 있어야 합니다. .

(내가 아는 한) 총 5가지 차이점이 있습니다. 앞으로 새로운 발견이 있으면 추가하겠습니다.

                                                                                                             ~                                                  . > > 2: 링크가 CSS를 참조하면 페이지가 로드되는 동시에 로드됩니다. @import는 페이지가 로드될 때까지 기다려야 합니다. 로드하기 전에 완전히 로드되었습니다.

3개: 링크는 XHTML 레이블이며 @import에 대한 호환성 문제가 없으며 낮은 버전의 브라우저는 지원되지 않습니다.

4개: LINK는 JavaScript 제어 DOM을 사용하여 스타일을 변경하는 것을 지원하지만 @import는 이를 지원하지 않습니다.

다섯 번째: @import는 CSS 파일에 다른 스타일 시트를 다시 도입할 수 있습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿