사용자는
요소가 참조하는 스타일을 자유롭게 변경할 수 있으며, 가져온 스타일 시트는 나머지 스타일 시트와 자동으로 통합됩니다.
CSS와 HTML 문서의 조합 4가지 방법:
1 요소를 사용하여 외부 스타일 파일에 연결
2
예:
첫 번째는 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를 참조하는 것이 좋습니다. 🎜> 관리 및 유지.
@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;}