> 웹 프론트엔드 > CSS 튜토리얼 > CSS에서 가져오기와 링크의 차이점 비교

CSS에서 가져오기와 링크의 차이점 비교

巴扎黑
풀어 주다: 2017-08-14 14:46:14
원래의
1327명이 탐색했습니다.

타오바오 웹페이지가 가져오기를 사용하고 많은 웹사이트가 링크를 사용하는 것을 봤습니다. 물론 HTML 코드에 CSS를 직접 작성하는 상대적으로 간단한 페이지와 트래픽이 많은 웹사이트도 있습니다. 그들 사이의 차이점은 무엇입니까? CSS는 import나 link 중 어느 쪽을 사용하는 것이 좋을까요? 클래식 포럼이나 다른 사이트에서 대략적인 아이디어를 얻었습니다

일부 사이트의 페이지는 대부분 이렇게 작성되어 있는 것을 봤습니다



  그리고 많은 웹사이트에서는 All are link

구글 바이두 163이나 다른것처럼 웹페이지에 직접 작성합니다

물론 링크와 가져오기를 사용하면 유지관리가 쉽다는 장점이 있지만, 네트워크 속도가 느릴 경우 로딩 중단 현상이 발생하여 페이지 오류가 발생하게 됩니다. 레이아웃 오류

같은 효과가 있습니다

  유일한 차이점은 서비스 객체가 다르다는 것입니다

  @import가 CSS를 제공합니다

  link가 현재 페이지를 서비스합니다

  고전적으로 일부 네티즌들은 @import가 먼저 실행될 것이라고 말했습니다.

 외부 참조 CSS에서 link와 @import의 차이점

 지난 이틀 동안 XHTML에서 CSS를 로드하는 여러 가지 방법을 작성했습니다. 그 중 외부 참조 CSS는 link와 @import 두 가지 방법으로 나뉩니다.

 기본적으로 이 두 가지 방법은 CSS 파일을 로드하는 데 사용되지만 여전히 미묘한 차이가 있습니다.

  차이점 1 : 우리 조상들의 차이점. Link는 XHTML 태그에 속하며, @import는 전적으로 CSS에서 제공하는 메소드입니다.
CSS를 로드하는 것 외에도 링크 태그는 RSS 정의, rel 연결 속성 정의 등과 같은 다른 많은 작업도 수행할 수 있습니다. @import는 CSS만 로드할 수 있습니다.

  차이점 2: 로딩 순서의 차이입니다. 페이지가 로드되면(즉, 뷰어가 볼 때) 링크에서 참조하는 CSS가 동시에 로드되는 반면, @import에서 참조하는 CSS는 페이지가 로드되기 전에 완전히 다운로드될 때까지 기다립니다. 따라서 @import가 CSS를 로드하는 페이지를 탐색할 때 스타일이 없을 때가 있습니다(깜박거림만 있을 뿐입니다). 이는 네트워크 속도가 느릴 때 매우 분명합니다(Dream City에서 CSS를 로드하는 방법은 @import를 사용하는 것입니다. 저는 다운로드합니다). 동시에 Dream City 웹 페이지를 탐색합니다.), 위의 문제가 발생합니다).

  차이점 3: 호환성의 차이. @import는 CSS2.1에서 제안되었기 때문에 이전 브라우저에서는 이를 지원하지 않습니다. @import는 IE5 이상에서만 인식할 수 있지만 링크 태그에는 이러한 문제가 없습니다.

  차이점 4: DOM을 사용하여 스타일을 제어할 때의 차이점. 스타일을 변경하기 위해 JavaScript를 사용하여 DOM을 제어하는 ​​경우 @import는 DOM에서 제어할 수 없기 때문에 link 태그만 사용할 수 있습니다.

  차이점은 다음과 같습니다(다른 차이점이 있으면 알려주시면 추가하겠습니다). 위 분석에서는 링크 태그를 사용하는 것이 좋습니다.

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

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