>  기사  >  웹 프론트엔드  >  HTML에서 CSS를 사용하는 방법은 무엇입니까?

HTML에서 CSS를 사용하는 방법은 무엇입니까?

青灯夜游
青灯夜游원래의
2021-05-06 16:01:3534947검색

HTML에서 CSS를 사용하는 방법에는 4가지가 있습니다. 1. HTML 태그의 style 속성을 사용하여 CSS 스타일을 설정합니다. 2. head 태그의 style 태그를 사용하여 CSS 스타일을 설정합니다. 외부 CSS 파일을 가져오려면 4. 외부 CSS 파일을 가져오려면 "@import" 규칙을 사용하세요.

HTML에서 CSS를 사용하는 방법은 무엇입니까?

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

HTML에서 CSS를 사용하는 방법에는 4가지가 있습니다.

  • 인라인 메서드(인라인 스타일)

  • 내부 메서드(인라인 스타일)

  • 링크 태그 사용(링크 스타일)

  • @import 사용 (가져오기)

1. 인라인 모드(인라인 스타일)

HTML 태그의 style 속성을 사용하여 CSS 스타일을 설정하세요.

형식:

<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

예:

<p style="color:orange;font-size:18px">在HTML中如何使用css样式</p>

기능: 이에 대해서만 작동합니다. 꼬리표.

2. 내부 방식(임베디드 스타일)

머리 태그에 스타일 태그를 사용하여 CSS 스타일을 설정하는 것입니다.

형식:

<style type="text/css"> ....css样式代码 </style>

기능: 현재 페이지 전체에 적용됩니다.

3. 링크 태그(링크형)

CSS 코드를 별도의 파일에 작성하고 링크 태그를 사용하여 해당 파일을 페이지에 직접 소개합니다. 페이지는 여러 외부 CSS 파일을 도입하기 위해 여러 번 사용할 수 있습니다. 일반적으로 나중에 소개되는 CSS 파일은 이전에 소개된 CSS 파일과 동일한 효과를 덮어씁니다. CSS를 도입하는 이 방법은 현재 가장 널리 사용됩니다. CSS 코드는 재사용 및 유지 관리를 용이하게 하기 위해 각 웹 사이트 범위 내에서 계획할 수 있습니다. 그러나 이는 코드의 양이 너무 많을 수 있으며 쉽습니다. 제대로 유지되지 않으면 혼란이 발생합니다.

<link rel="stylesheet" type="text/css" href="style.css">

4. @import(가져오기) 사용

CSS 파일을 도입하는 데는 두 가지 방법이 있습니다. 하나는 페이지의 c9ccee2e6ea535a969eb3f532ad9fe89...531ac245ce3e4fe3d50054a55f265927 다음과 같습니다:

@import url(index2.css);

또한 CSS 파일에서도 사용할 수 있습니다. 사용법은 다음과 같습니다.

@import "sub.css";

@import를 사용하여 CSS를 도입하면 외부 파일의 CSS 코드를 쉽게 도입할 수 있어 유지 관리 및 계획이 용이합니다. 그러나 CSS 파일이 추가될 때마다 연결 요청이 서버에 추가됩니다. 방문 횟수가 많으면 유지 관리성과 성능 간에 절충이 필요합니다.

추천 튜토리얼: "html 비디오 튜토리얼"

위 내용은 HTML에서 CSS를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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