CSS 파일을 참조하는 link 방법과 @import 방법의 차이점

사용자는

요소가 참조하는 스타일을 자유롭게 변경할 수 있으며, 가져온 스타일 시트는 나머지 스타일 시트와 자동으로 통합됩니다.

CSS와 HTML 문서의 조합 4가지 방법:
1 요소를 사용하여 외부 스타일 파일에 연결
2

요소의 "style" 요소를 사용하여
3 CSS "@import" 태그를 사용하여 가져오기 스타일 시트
4 내부 요소의 "style" 속성을 사용하여 스타일을 정의합니다

예:

css 데모

첫 번째는 Write입니다. CSS를 html 페이지에서 직접 추출하는 반면, 두 번째와 세 번째 방법은 외부 참조 스타일을 사용하여 파일을 별도로 추출합니다.

질문 1. link와 @import의 차이점은 무엇인가요?
먼저 정의를 살펴보겠습니다

링크 요소
HTML과 XHTML 모두 웹 페이지 작성자가 HTML 문서에 관련된 추가 정보를 추가할 수 있는 구조를 가지고 있습니다. 이러한 추가 리소스는 스타일 정보(CSS), 탐색 보조 도구, 다른 형식의 정보(RSS), 연락처 정보 등이 될 수 있습니다.

@import
가져온 외부 스타일 시트와 대상 장치 유형을 지정합니다.
사실 link와 @import의 가장 근본적인 차이점은 link는 html의 태그인 반면 @import는 css의 태그라는 점입니다.
link는 CSS를 호출하는 것 외에도 다음과 같은 다른 기능을 가질 수 있습니다. 페이지 링크 속성 선언으로 디렉토리, RSS 등을 선언하고 @import는
CSS만 호출할 수 있습니다. CSS를 외부에서만 참조한다면 위의 보스가 다르다는 점만 빼면 기능은 기본적으로 동일합니다. :)

질문 2. 링크와 임포트 중 어느 것이 더 좋나요?
위에서 언급한 것처럼 위의 보스들이 다르기 때문에 사용상 세부적인 차이가 있을 것입니다. 일반적으로 누가 더 좋고 누가 더 나쁘다고 말할 수는 없습니다.
구체적인 상황만 분석할 수는 있습니다.
1) 스타일 선택을 위해 자바스크립트를 사용하고 싶습니다.
링크는 html 요소이고 자바스크립트를 사용하면 dom 요소를 제어하여 최종적으로 다음과 같은 효과를 얻을 수 있으므로 링크를 사용해야 합니다. 스타일을 바꾸는 것.
다음 코드를 보세요

이것은 페이지 스타일을 변경하는 매우 고전적인 코드입니다. , 오늘 우리의 주요 주제는 링크 및 가져오기이므로 여기에는 참조된 CSS 부분만 나열합니다.
먼저 링크의 각 속성이 무엇을 의미하는지 살펴보겠습니다.
[1]rel: 링크 개체의 역할이나 유형을 선언하는 데 사용됩니다.
예를 들어 위 코드에서 "스타일시트"는 기본 CSS에 연결하는 것을 의미하고, "대체 스타일시트"는 대체 CSS에 연결하는 것을 의미합니다.
[2]href: 더 이상 말할 필요가 없습니다. CSS 파일 경로에.
[3]스타일: 파일 형식
[4]미디어: 애플리케이션 장치, "화면"은 애플리케이션이 화면에 있음을 의미합니다.
[5]title: CSS의 이름입니다.
이 코드에는 총 5개의 CSS가 있습니다. 첫 번째는 기본 스타일이고 나머지 4개는 스타일 스타일입니다. 기본 표시 스타일 제목을 제어하려면 자바스크립트를 사용하면 됩니다.

2) 인쇄 스타일을 적용하고 싶습니다.
인쇄 스타일은 이름 그대로 페이지를 인쇄할 때의 스타일입니다.
이 스타일은 일반 탐색에는 영향을 주지 않으며 인쇄할 때만 적용됩니다.
페이지의 인쇄 스타일을 별도로 참조하려면 link와 @import를 모두 사용할 수 있습니다.

링크 코드

@import 코드

CSS 메서드에 대한 다른 방법도 있습니다. @media:

@media print {
@import "print.css"
}
@media를 사용하여 먼저 인쇄하도록 장치를 설정한 다음 @impor 링크를 사용하세요

3) 여러 스타일을 참조하고 싶습니다.
한 페이지에서 여러 스타일을 참조하여 효과를 내고 싶다면 link와 @import를 모두 사용할 수 있습니다.

링크코드

;

@가져오기 코드

그러나 개인적으로 @import를 사용하여 여러 항목을 참조하는 것이 더 명확하다고 생각합니다. 파일
또한 여러 스타일의 경우 link와 @import의 조합이 있습니다.
먼저 링크를 사용하여 CSS 파일을 참조

한 다음 이 CSS 파일에서 참조하세요.

이 방법의 장점은 사이트의 모든 페이지에서 참조하는 스타일이 동일하고
여러 CSS가 있는 경우, 각 페이지에 4~5개의 동일한 CSS 스타일을 추가하면 코드와 에너지가 낭비됩니다.
따라서 모든 페이지가 하나의 CSS를 참조하고 하나의 CSS가 여러 CSS를 참조하는 것이 좋습니다. 🎜> 관리 및 유지.

css 링크 로딩과 @import의 차이점: 실제로 link와 @import는 표시 효과에 큰 차이가 있습니다. 기본적으로 페이지가 표시되기 전에 링크가 완전히 추가되지만 @ 파일을 읽은 후 가져오기가 추가되므로 네트워크 속도가 매우 좋거나 매우 빠르면 먼저 CSS 정의가 없는 다음 CSS 정의가 로드됩니다. @import가 페이지를 로드할 때 처음에는 깜박인 다음(스타일 시트가 없는 페이지) 정상으로 돌아갑니다(스타일 로드 후 페이지). Link에는 이 문제가 없습니다.

방법은 동일하지만 브라우저 인식에 약간의 차이가 있습니다. link는 CSS를 지원하는 브라우저에서 지원되는 반면, @import는 5.0 한 줄 버전에서만 유효하며 가능합니다. 탐색에도 사용할 수 있습니다. 브라우저 필터링은 해킹을 사용하며 일부 이전 버전의 브라우저와 호환됩니다. 따라서 더 강력한 링크 유니버셜 타입을 사용하는 것이 더 좋지만 상위 버전의 브라우저, 즉 현재 브라우저의 경우 실제로는 동일하므로 이는 큰 의미가 없습니다.

@import를 작성하는 가장 좋은 방법: 일반적으로 @import를 작성하는 방법은 다음과 같습니다.

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/ IE5/NS4 인식되지 않음
@import "style.css" //Windows IE4/NS4, Macintosh IE4/NS4에서 인식되지 않음
@import url(style.css) //Windows NS4, Macintosh NS4에서 인식되지 않음
@import url('style.css') //Windows NS4, Mac OS에서는 인식되지 않음 >위 분석을 통해 @import url(style.css) 및 @import url("style.css")을 알 수 있습니다. )이 최선의 선택이며 대부분의 브라우저와 호환됩니다. 바이트 최적화 관점에서 볼 때 @import url(style.css)은 가장 권장되는 작성 방법이 될 가치가 있습니다.

CSS 코드 형식을 사용하면 스타일 시트 파일의 크기를 줄일 수 있습니다
CSS 스타일 시트를 작성할 때 나중에 스타일 정의 코드를 읽기 쉽도록 각 코드를 한 줄에 작성하겠습니다. 하지만 CSS 코드는 결국 프로그램 코드만큼 논리적이지 않기 때문에 이런 방식으로 작성하는 것은 좋지 않은 것 같습니다. 주로 이름과 값에 상응하는 방식으로 작성됩니다. 따라서 같은 줄에 쓰는 것은 읽기에 특별히 영향을 미치지 않습니다. 반대로 많은 개행 문자와 공백이 줄어들기 때문에 스타일시트 파일의 크기가 줄어듭니다. 테스트해본 결과 파일 크기가 약 12% 정도 줄어들 수 있는 것으로 나타났습니다. 스타일 시트 파일이 상대적으로 크거나 파일 수가 많은 경우 클라이언트의 다운로드 볼륨이 크게 줄어들고 웹 페이지 열기 속도가 빨라집니다.

스타일 이름의 콜론과 다음 값 사이에는 공백이 없습니다. 두 스타일을 공백으로 구분하세요.

구체적인 형식은 다음과 같습니다.
프로그램 코드:
div {margin:20px; background-color:#F00;}