> 웹 프론트엔드 > CSS 튜토리얼 > CSS에서 가져오기와 링크의 차이점은 무엇입니까

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

云罗郡主
풀어 주다: 2018-11-23 16:08:52
앞으로
3024명이 탐색했습니다.

이 기사의 내용은 CSS에서 가져오기와 링크의 차이점에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

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

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

타오바오 페이지에서는 가져오기를 사용하는 반면, 많은 웹사이트에서는 링크를 사용하는 것을 보았습니다. 물론 상대적으로 페이지가 간단하고 트래픽이 많은 웹사이트도 있습니다. HTML 코드에 CSS를 직접 작성하시겠습니까? 그들 사이의 차이점은 무엇입니까? CSS에 가져오기 또는 링크를 사용하는 것이 더 낫습니까? 클래식 포럼과 다른 사이트에서 대략적인 아이디어를 얻었습니다

타오바오 페이지 대부분이 이렇게 작성되어 있는 걸 봤습니다

샘플 코드

<style type="text/css" media="screen">
@import url("http://www.divcss8.com/home/css/global/v2.0.css?t=20070518.css");
</style>
로그인 후 복사

그리고 많은 사이트에서 링크를 사용하고

샘플 코드

<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />
로그인 후 복사

그리고 Google Baidu 사이트처럼 163같은건 웹페이지에 직접 적는거

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

그들은 둘 다 기능은 동일합니다

서비스 객체가 다르다는 점만 다릅니다

@import는 CSS를 제공합니다

link는 현재 페이지를 제공합니다

Classic 일부 네티즌들은 @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를 사용하는 것입니다. 드림시티 웹페이지 다운로드와 브라우징을 동시에 하게 되면 위와 같은 문제가 발생하게 됩니다.)

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

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

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

위 내용은 CSS에서 가져오기와 링크의 차이점에 대한 전체 소개입니다. CSS3 튜토리얼에 대해 자세히 알고 싶다면 PHP 중국어 웹사이트를 참고하세요.


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

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