CSS 파일을 HTML에 도입할 때 link와 @import의 차이점은 무엇입니까?-CSS 튜토리얼-php.cn

집

CSS 파일을 HTML에 도입할 때 link와 @import의 차이점은 무엇입니까?

Sep 17, 2018 pm 02:02 PM

이전에 소개된 CSS 파일을 HTML에 도입하는 방법 CSS를 HTML로 가져오는 방법에는 인라인 스타일, 임베디드 스타일, 외부 스타일의 네 가지가 있습니다. 외부 스타일은 가져오기 스타일과 링크 스타일로 구분됩니다. 외부 스타일이기도 한데 link와 @import의 차이점은 무엇인가요? 궁금하신 분들은 아래 내용을 계속 읽어주세요.

1. 가져오기 방법의 차이점

링크 링크 유형:

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

로그인 후 복사

import 가져오기 유형:

<style type="text/css">   
    @import url("css/green.css");
</style>

로그인 후 복사

2. 브라우저의 차이점

link는 호환성 문제를 일으키지 않습니다. @import는 IE5에 있어야 합니다. 위의 내용이 달성됩니다.
페이지 로딩 과정에서 링크로 가져온 CSS 스타일 파일이라면 콘텐츠와 동시에 CSS 스타일도 로딩됩니다. @import에 의해 도입된 CSS 파일인 경우 페이지가 로드된 후에 스타일이 로드됩니다.

3. 종속 관계의 차이점

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

4. DOM 제어 스타일의 차이점

스타일을 변경하기 위해 DOM을 제어하기 위해 javascript가 필요한 경우 @import는 DOM으로 제어할 수 없기 때문에 link 태그만 사용할 수 있습니다.

5. CSS 우선순위의 차이점

높은 것부터 낮은 것까지 동일한 가중치를 갖는 CSS 스타일의 우선순위는 인라인 스타일, 인라인 스타일, 개요 스타일 및 가져온 스타일입니다. 외부 링크 스타일과 가져온 스타일 모두 div{color:XX}를 갖는 경우 최종 div 스타일은 외부 링크 스타일에 정의된 div 스타일입니다.

예: div 인라인 스타일, 인라인 스타일, 외부 스타일, 가져온 스타일을 각각 지정하여 최종 효과가 무엇인지 확인하세요.



 
  
  
  
  <link rel="stylesheet" type="text/css" href="css/green.css"/>
 
 
  have a nice day

로그인 후 복사

Rendering:

CSS 파일을 HTML에 도입할 때 link와 @import의 차이점은 무엇입니까?

그림에서 볼 수 있듯이 div의 최종 색상은 보라색이며, 보라색은 인라인 스타일에 의해 설정되며 우선순위가 가장 높습니다. 인라인 스타일과 임포트 스타일이라면 어떤 효과가 있는지 계속 살펴보겠습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css"> 
  div{background: yellow;}  
   @import url("css/red.css");   
  </style>
 </head>
 <body>
  <div style="width: 150px;height: 150px;">have a nice day </div>
 </body>
</html>

로그인 후 복사

Rendering:

CSS 파일을 HTML에 도입할 때 link와 @import의 차이점은 무엇입니까?

분명히 div는 결국 노란색으로 나타나고 노란색은 가져온 스타일보다 우선순위가 높은 인라인 스타일입니다.

요약: 위는 CSS에서 링크와 가져오기의 차이점을 설명합니다. 일반적으로 가져오기로 로드되는 스타일이 상대적으로 큰 경우 로드가 지연되고 심지어는 가져오기 스타일을 사용하지 않는 것이 가장 좋습니다. 화면이 튀었습니다. 현재로서는 소규모 웹사이트에서는 링크 가져오기를 사용하는 것이 좋습니다. 물론 향후 CSS를 모듈화해야 하는 경우에는 상황에 따라 @import를 사용하게 됩니다.

위 내용은 CSS 파일을 HTML에 도입할 때 link와 @import의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.