외부에서 CSS를 가져오는 방법

Css를 외부에 도입하는 방법: 1. 링크를 사용하여 외부 CSS 파일을 호출하고, 태그는 문서와 외부 리소스 간의 관계를 정의합니다. 2. @import를 사용하여 외부 CSS 파일을 참조합니다.

이 기사의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터

외부 CSS를 도입하는 방법은 무엇입니까?

방법 1: 링크를 사용하여 외부 CSS 파일 호출

웹 페이지의 태그 쌍에 있는 태그를 사용하여 외부 스타일 시트 파일을 소개합니다. HTML 규칙을 사용하여 외부 CSS를 도입하세요.

태그는 문서와 외부 리소스 간의 관계를 정의합니다. 태그의 가장 일반적인 용도는 스타일 시트를 연결하는 것입니다.

Grammar:

<link rel="stylesheet" href="css文件路径" type="text/css" />

외부 CSS 스타일에 링크할 때 링크 태그의 콘텐츠 구조 설명:

href: 외부 리소스 주소, CSS 주소는 다음과 같습니다.

rel: 현재 문서 간의 관계를 정의합니다. 링크된 문서는 외부 CSS 스타일 시트입니다. 즉, stylesheet

type: 링크된 문서의 MIME 클래스를 지정합니다. 여기서 값은 text/css

참고:

이 메서드는 CSS를 로드합니다. 웹 페이지 파일의 본문을 로드하기 전에 파일을 표시하므로 웹 페이지는 처음부터 스타일이 적용되지 않은 웹 페이지를 먼저 표시한 다음 가져온 스타일처럼 스타일이 지정된 웹 페이지를 표시하지 않습니다.

방법 2: @import를 사용하여 외부 CSS 파일 참조

CSS @import 규칙은 다른 스타일 시트에서 스타일 규칙을 가져오는 데 사용됩니다. 이러한 규칙은 다른 모든 유형의 규칙보다 우선해야 하며 조건 그룹의 규칙에는 @import를 사용할 수 없습니다.

@import 규칙 구문

@import url("文件路径");

설명:

이 방법은 전체 웹 페이지가 로드된 후 CSS 파일을 로드하므로 웹 페이지가 상대적으로 큰 경우 스타일이 지정되지 않은 페이지가 먼저 표시됩니다. . 잠시 동안 깜박인 후 웹 페이지 스타일이 다시 나타납니다. 이는 수입품의 본질적인 결함입니다.

외부 CSS 스타일을 호출하는 두 가지 방법의 차이점:

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

페이지가 로드되면 링크 태그에 의해 도입된 CSS가 동시에 로드되며, 페이지가 로드된 후에 @import에 의해 도입된 CSS가 로드됩니다.

@import는 CSS2.1의 고유한 구문이므로 IE5 이상에서만 인식할 수 있습니다. 링크 태그는 HTML 요소이며 호환성 문제가 없습니다.

JS를 통해 DOM을 조작하고 링크 태그를 삽입하여 스타일을 변경할 수 있습니다. DOM 방식은 문서 기반이므로 @import를 사용하여 스타일을 삽입할 수 없습니다.

@import가 소개한 스타일보다 링크로 소개한 스타일의 비중이 더 큽니다.

추천 학습: "css 동영상 튜토리얼"

위 내용은 외부에서 CSS를 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!