CSS 스타일을 도입하는 데 어떤 태그가 사용됩니까?

CSS 스타일을 소개하는 데 사용되는 태그는 ""입니다. 링크 태그는 문서와 외부 리소스 간의 관계를 정의하는 데 사용됩니다. 가장 일반적으로 사용되는 구문은 "입니다. . 페이지가 로드되면 링크 태그에 의해 도입된 CSS 스타일이 동시에 로드됩니다.

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

CSS 스타일을 소개하는 데 사용되는 태그는 ""입니다.

CSS 외부 스타일 시트를 브라우저에서 인식하고 구문 분석하려면 먼저 웹 문서로 가져와야 합니다. 외부 스타일 시트 파일은 두 가지 방법으로 HTML 문서로 가져올 수 있습니다.

• 태그를 사용하여 가져오기

• @import 키워드를 사용하여 소개

다음 글에서는 태그에 대해 자세히 설명합니다.

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

참고:

• HTML에서는 태그에 닫는 태그가 없습니다.

• XHTML에서는 태그를 올바르게 닫아야 합니다.

링크 태그를 사용하여 CSS 스타일의 구문을 소개합니다.

<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />

각 속성 설명:

• href 속성은 외부 스타일 시트 파일의 주소를 설정하며, 이는 상대 주소 또는 절대 주소일 수 있습니다. 주소.

• rel 속성은 관련 문서를 정의하며, 여기서는 관련 스타일 시트를 의미합니다.

• type 속성은 스타일 요소와 마찬가지로 CSS 텍스트 파일을 나타냅니다.

참고:

일반적으로 태그를 정의할 때 위의 세 가지 기본 속성을 정의해야 하며, 그 중 href는 필수 설정 속성입니다.

link 요소에 title 속성을 추가하여 선택적 스타일 시트의 제목을 설정할 수도 있습니다. 즉, 웹 문서에서 여러 스타일 시트를 가져올 때 title 속성 값을 통해 적용할 스타일 시트 파일을 선택할 수 있습니다. .

제목 속성은 rel 속성과 관련이 있습니다. W3C 조직의 계획에 따르면 향후 웹 문서에서는 스타일 시트 파일, 스크립트 파일, 테마 파일과 같은 다양한 외부 파일을 가져오기 위해 여러 요소를 사용할 예정입니다. 개인 파일까지 맞춤화된 추가 보충 파일도 있습니다. 다양한 유형과 이름의 파일을 너무 많이 가져온 후에는 title 속성을 사용하여 선택할 수 있습니다. 이때 rel 속성의 역할은 웹 페이지 파일이 처음 표시될 때 적용되는 가져온 파일 형식을 지정할 수 있습니다. 현재는 CSS 스타일 시트 유형에만 연결할 수 있습니다.

외부 스타일은 CSS 애플리케이션을 위한 최상의 솔루션입니다. 하나의 스타일 시트 파일은 여러 웹 페이지에서 참조할 수 있으며, 하나의 웹 페이지 파일은 링크 요소를 반복적으로 사용하여 여러 스타일 시트를 가져올 수 있습니다.

확장된 지식: link와 @import의 차이점

1. 소속의 차이

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

2. 로드 순서의 차이

페이지를 로드할 때 링크 태그에 의해 도입된 CSS가 동시에 로드됩니다. 페이지가 로드된 후에 @import에 의해 도입된 CSS가 로드됩니다.

3. 호환성 차이

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

4. DOM 제어성의 차이

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

(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드)

위 내용은 CSS 스타일을 도입하는 데 어떤 태그가 사용됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!