CSS 파일을 HTML에 도입할 때 link와 @import의 차이점은 무엇입니까?
- yulia원래의
- 2018-09-17 14:02:173504검색
이전에 소개된 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:
그림에서 볼 수 있듯이 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:
분명히 div는 결국 노란색으로 나타나고 노란색은 가져온 스타일보다 우선순위가 높은 인라인 스타일입니다.
요약: 위는 CSS에서 링크와 가져오기의 차이점을 설명합니다. 일반적으로 가져오기로 로드되는 스타일이 상대적으로 큰 경우 로드가 지연되고 심지어는 가져오기 스타일을 사용하지 않는 것이 가장 좋습니다. 화면이 튀었습니다. 현재로서는 소규모 웹사이트에서는 링크 가져오기를 사용하는 것이 좋습니다. 물론 향후 CSS를 모듈화해야 하는 경우에는 상황에 따라 @import를 사용하게 됩니다.
위 내용은 CSS 파일을 HTML에 도입할 때 link와 @import의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!