HTML 파일에 CSS를 넣는 방법
- 藏色散人원래의
- 2021-03-22 11:22:4229812검색
CSS를 HTML 파일에 넣는 방법: 1. HTML 태그의 스타일 속성에 CSS를 직접 추가합니다. 2. HTML 헤더의 스타일 태그 아래에 CSS를 작성합니다. 3. 외부 CSS 파일을 삽입하려면 head 태그를 사용합니다. 4. CSS 규칙을 사용하여 외부 CSS 파일을 도입합니다.
이 기사의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터
HTML에 CSS를 도입하는 방법
HTML에 CSS를 도입하는 방법에는 4가지가 있습니다. 그 중 2개는 HTML 파일에 직접 CSS 코드를 추가하는 것이고, 나머지 2개는 외부 CSS 파일을 도입하는 것입니다. 이러한 방법과 장단점을 살펴보겠습니다.
인라인 방식
인라인 방식이란 HTML 태그의 스타일 속성에 CSS를 직접 추가하는 것을 말합니다.
예:
<div style="background: red"></div>
이것은 일반적으로 나쁜 작성 방법입니다. 현재 태그의 스타일만 변경합니다. 여러 개의 dc6dce4a544fdca2df29d5ac0ea9906b가 동일한 스타일을 갖도록 하려면 각 dc6dce4a544fdca2df29d5ac0ea9906b ; 동일한 스타일을 추가하려면, 모든 스타일의 코드를 수정해야 합니다. 분명히 CSS 코드를 인라인으로 도입하면 HTML 코드가 장황해지고 웹 페이지를 유지 관리하기 어려워집니다.
임베딩 방법
임베딩 방법은 HTML 헤더의 c9ccee2e6ea535a969eb3f532ad9fe89 태그 아래에 CSS 코드를 작성하는 것을 의미합니다.
예:
<head>
<style>
.content {
background: red;
}
</style>
</head>임베디드 CSS는 현재 웹페이지에만 유효합니다. CSS 코드가 HTML 파일에 있기 때문에 코드가 더 집중적으로 만들어지며 이는 일반적으로 템플릿 웹 페이지를 작성할 때 유리합니다. 템플릿 코드를 보는 사람은 HTML 구조와 CSS 스타일을 한눈에 볼 수 있기 때문입니다. 포함된 CSS는 현재 페이지에만 유효하기 때문에 여러 페이지에 동일한 CSS 코드를 도입해야 하는 경우 이러한 방식으로 작성하면 코드 중복이 발생하고 유지 관리에 도움이 되지 않습니다.
링크 방법
링크 방법은 HTML 헤더에 93f0f5c25f18dab9d176bd4f6de5d30e 태그를 사용하여 외부 CSS 파일을 삽입하는 것을 의미합니다.
예:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>CSS를 소개하는 가장 일반적이고 권장되는 방법입니다. 이 접근 방식을 사용하면 모든 CSS 코드가 단일 CSS 파일에만 존재하므로 유지 관리성이 좋습니다. 그리고 모든 CSS 코드는 CSS 파일에만 존재합니다. CSS 파일은 나중에 페이지를 전환할 때 HTML 파일만 로드하면 됩니다.
가져오기 방법
가져오기 방법은 CSS 규칙을 사용하여 외부 CSS 파일을 도입하는 것을 의미합니다.
예:
<style>
@import url(style.css);
</style>링크 방법과 가져오기 방법 비교
링크 방법(아래 링크로 대체)과 가져오기 방법(아래 @import로 대체) 모두 외부 CSS 파일을 도입하는 방법입니다. . 메소드를 사용하고 @import가 권장되지 않는 이유를 설명합니다.
link는 HTML에 속하며, 2cdf5bf648cf2f33323966d7f58a7f3f 태그의 href 속성을 통해 외부 파일이 도입되는 반면, @import는 CSS에 속하므로 import 문은 CSS로 작성해야 한다는 점에 유의하세요. 그렇지 않으면 외부 스타일 파일을 올바르게 가져올 수 없습니다.
@import는 CSS2.1에서만 나타나는 개념이므로 브라우저 버전이 낮을 경우 외부 스타일 파일을 가져올 수 없습니다.
HTML 파일이 로드되면 링크에서 참조하는 파일이 로드되고 @import에서 참조하는 파일은 로드되기 전에 페이지가 완전히 다운로드될 때까지 기다립니다. 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하여 외부 CSS 파일을 가져오고 다른 세 가지 방법을 피하거나 덜 사용하세요.
【추천 학습:
css 동영상 튜토리얼위 내용은 HTML 파일에 CSS를 넣는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!