link와 @import의 차이점

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 파일에 다른 스타일 시트를 다시 도입할 수 있습니다.