CSS 파일을 참조하는 방법

CSS 파일을 참조하는 방법: 1. 링크 태그, 구문 ""를 사용합니다. 가져오기" 규칙, 구문 "@import url(파일 경로);".

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

1. 링크 태그 사용(링크 스타일)

CSS 코드를 별도의 파일에 작성하고 링크 태그를 사용하여 해당 파일을 페이지에 직접 소개합니다. 페이지는 여러 외부 CSS 파일을 도입하기 위해 여러 번 사용할 수 있습니다. 일반적으로 나중에 소개되는 CSS 파일은 이전에 소개된 CSS 파일과 동일한 효과를 덮어씁니다. CSS를 도입하는 이 방법은 현재 가장 널리 사용됩니다. CSS 코드는 재사용 및 유지 관리를 용이하게 하기 위해 각 웹 사이트 범위 내에서 계획할 수 있습니다. 그러나 이는 코드의 양이 너무 많을 수 있으며 쉽습니다. 제대로 유지되지 않으면 혼란이 발생합니다.

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

2. @import(가져오기) 사용

CSS 파일을 소개하기 위해 @import를 사용하는 방법은 두 가지가 있습니다. 하나는 페이지의 다음과 같습니다:

@import url(index2.css);

또한 CSS 파일에서도 사용할 수 있습니다. 사용법은 다음과 같습니다.

@import "sub.css";

@import를 사용하여 CSS를 도입하면 외부 파일의 CSS 코드를 쉽게 도입할 수 있어 유지 관리 및 계획이 용이합니다. 그러나 CSS 파일이 추가될 때마다 연결 요청이 서버에 추가됩니다. 방문 횟수가 많으면 유지 관리성과 성능 간에 절충이 필요합니다.

링크(link)와 가져오기(@import)의 차이점

link는 CSS를 로드하는 것 외에도 RSS와 같은 다른 트랜잭션을 정의할 수도 있으며 @import는 CSS 범주에 속합니다. CSS만 로드할 수 있습니다.

link가 CSS를 참조하는 경우 페이지가 로드될 때 동시에 로드되지만 @import에서는 로드하기 전에 페이지가 완전히 로드되어야 합니다.

link는 XHTML 태그이며 호환성 문제가 없지만 @import는 CSS2.1에서 제안되었으며 하위 버전 브라우저에서는 지원되지 않습니다.

ink는 Javascript를 사용하여 DOM을 제어하여 스타일을 변경하도록 지원합니다. @import는 지원하지 않습니다.

@import는 CSS 파일에 다른 스타일 시트를 도입할 수 있습니다. 링크는 이를 지원하지 않습니다.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS 파일을 참조하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!