>웹 프론트엔드 >프런트엔드 Q&A >CSS 스타일의 유형은 무엇입니까?

CSS 스타일의 유형은 무엇입니까?

青灯夜游
青灯夜游원래의
2021-05-06 17:28:5614356검색

CSS 스타일에는 세 가지 유형이 있습니다. 1. HTML 태그의 스타일 속성에 작성된 인라인 스타일 2. 스타일 태그에 작성된 인라인 스타일 3. 별도의 ".css" 파일에 작성된 외부 스타일 . 링크 태그나 "@import" 규칙을 사용하여 HTML에 도입해야 합니다.

CSS 스타일의 유형은 무엇입니까?

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

CSS 스타일에는 인라인 CSS 스타일, 인라인 CSS 스타일, 외부 CSS 스타일(외부 스타일)의 세 가지 유형이 있습니다.

1. 인라인 스타일(임베디드 스타일): 구조 내부, 즉 스타일 속성에서 태그의 시작 부분 안에 작성된 스타일입니다.

<标记 style="样式的属性名1:样式的属性值1;属性名2:属性值2;......"></标记>

예:

<div style="color:red"></div>

2. 내부 스타일(인라인 스타일): HTML 페이지 내부에 작성되며, head 태그에 저장되고, 스타일은 style 태그에 작성됩니다.

<style>选择器 {属性名:属性值;属性名:属性值;......}</style>

예:

<style>
  bdoy{font-size:14px;} 
</style>

3. 외부 스타일(외부 스타일): CSS 파일로 작성됩니다.

예:

CSS 스타일의 유형은 무엇입니까?

(동영상 공유 학습: css 동영상 튜토리얼, "html 동영상 튜토리얼")

HTML에는 CSS 파일을 참조하는 두 가지 방법이 있습니다:

1), 링크 태그 사용( 링크형)

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

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

2), @import(가져오기) 사용

CSS 파일을 소개하기 위해 @import를 사용하는 방법은 두 가지가 있습니다. 하나는 페이지의

@import url(index2.css);

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

@import "sub.css";

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

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS 스타일의 유형은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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