"."/> ".">

 >  기사  >  웹 프론트엔드  >  CSS 외부 스타일 시트에는 두 가지 참조 방법이 있습니다.

CSS 외부 스타일 시트에는 두 가지 참조 방법이 있습니다.

青灯夜游
青灯夜游원래의
2021-02-22 15:10:4815948검색

방법: 1. 스타일 태그에서 "@import"를 통한 참조, 구문은 "@import url(URL)" 2. 링크 태그를 통한 참조, "d3cc8917df1e08649b5d1906f3cf6a43".

CSS 외부 스타일 시트에는 두 가지 참조 방법이 있습니다.

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

CSS 외부 스타일 시트

CSS 스타일이 웹 페이지 문서 외부의 파일에 배치된 경우 이를 외부 스타일 시트라고 합니다. CSS 스타일 시트 문서는 외부 스타일 시트를 나타냅니다.

실제로 외부 스타일 시트는 확장자가 .css인 텍스트 파일일 뿐입니다. CSS 스타일 코드를 텍스트 파일에 복사하여 .css 파일로 저장하면 외부 스타일 시트입니다.

외부 스타일 시트를 도입하는 방법:

HTML 파일은 확장자가 .css인 스타일 시트를 참조합니다. 링크 유형과 가져오기 유형의 두 가지 방법이 있습니다.

1. @import 지시어를 통한 소개

@import 지시어를 사용하는 경우 HTML의 c9ccee2e6ea535a969eb3f532ad9fe89 태그에 이 지시어를 추가하세요.

<html>
<head>
<style type="text/css">    
    @import url(css/styles.css);
</style>
<!--此处的type属性是针对HTML4.01的,若在HTML5中则不需要加-->
</head>

<body>
......
</body>
</html

[추천 튜토리얼:

CSS 비디오 튜토리얼

] 2. 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 통한 소개

<link type="text/css" href="style.css" rel="stylesheet" />
<!--同理,type属性是针对HTML4.01的-->

두 가지 방법의 차이점은

2cdf5bf648cf2f33323966d7f58a7f3f 태그이며, @import는 CSS에서 제공하는 방법입니다. 2cdf5bf648cf2f33323966d7f58a7f3f 태그는 CSS를 가져올 수 있을 뿐만 아니라 다른 작업도 수행할 수 있습니다. @import는 CSS만 가져올 수 있습니다.

로딩 순서의 차이: 페이지를 탐색할 때 링크에 의해 소개된 CSS는 동기식으로 로드되는 반면, @import에서 참조하는 CSS는 다른 모든 요소가 다운로드될 때까지 로드되지 않습니다.

호환성 차이: @import는 CSS2.1에서만 지원되므로 하위 버전 브라우저에서는 이 문제가 발생하지 않습니다. 스타일을 변경하기 위해 DOM을 제어하기 위해 javascript를 사용하는 경우 @import는 DOM에서 제어할 수 없으므로 2cdf5bf648cf2f33323966d7f58a7f3f 태그만 사용할 수 있습니다.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 CSS 외부 스타일 시트에는 두 가지 참조 방법이 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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