CSS 기본 튜토리얼

CSS 박스 모델

CSS3기본 강의

CSS 참조 가이드

CSS @규칙(RULES)

CSS 문법 CSS 소개

CSS 입문

CSS 파일은 .css 확장자로 저장된 순수 텍스트 파일입니다.

CSS 초보자

이 튜토리얼에서는 CSS를 사용하여 웹 페이지에 스타일과 포맷 설정 정보를 추가하는 것이 얼마나 쉬운지 배울 것입니다. 하지만 시작하기 전에, HTML의 사용에 대한 일부 지식을 가지고 있는지 확인해 주세요.

만약 Web 개발 분야에 처음 접근한 경우, please从这里开始学习»

지금 바로 캐시케이드 스타일 시트(CSS)를 사용해 보겠습니다.

HTML 문서에 CSS 포함

CSS는 독립된 문서로 추가할 수도 있으며, HTML 문서 자체에 내장할 수도 있습니다. HTML 문서에 CSS를 포함하는 방법은 세 가지가 있습니다:

인라인 스타일 -사용styleHTML 시작 태그의 속성.
내장 스타일 -사용<style>문서 헤더의 요소.
외부 스타일 시트 -사용<link>요소가 외부 CSS 파일을 가리킵니다.

이 튜토리얼에서는 모든 세 가지 CSS 삽입 방법을 단계별로 소개할 것입니다.

주의:인라인 스타일의 우선순위가 가장 높으며, 외부 스타일 시트의 우선순위가 가장 낮습니다. 이는, 만약내장스타일 시트와외부 스타일 시트모두 요소에 스타일을 지정하면내장스타일 시트에서 충돌하는 스타일 규칙은 외부 스타일 시트를 덮습니다.

인라인 스타일

인라인 스타일은 CSS 규칙을 시작 태그에 직접 넣어 요소에 독특한 스타일 규칙을 적용하는 데 사용됩니다. 사용할 수 있습니다style속성은 요소에 추가됩니다.

이style속성은 일련의 CSS 속성과 값 쌍을 포함합니다. 매"property: value"사이에 분号（；）사이에 분号（

예제

<h1　style="color:red;　font-size:30px;">This　is　a　heading</h1>
<p　style="color:green;　font-size:22px;">This　is　a　paragraph.</p>
<div　style="color:blue;　font-size:14px;">This　is　some　text　content.</div>

테스트를 보세요‹/›

내장 스타일을 사용하는 것은 일반적으로 좋지 않은 방법으로 간주됩니다. 스타일 규칙이 HTML 태그 내에 직접 내장되기 때문에, 시각 표현과 문서 내용이 혼합되어 코드를 유지보수하기 어렵게 만듭니다. 이는 CSS 사용 목적을 무효화합니다.

주의:로 내장 스타일을 설정합니다.를 사용하여와를 사용하여와외부 스타일 시트스타일은 더 이상 가능하지 않습니다. 따라서 코드에서 스타일 속성을 사용하는 것을 피해야 합니다.

HTML 문서에 스타일을 추가하는 데 사용되는 가장 선호하는 방법입니다.

내장 스타일 시트

내장 또는 내부 스타일 시트는 그들이 포함된 문서에 영향을 미칩니다.<head>내장 스타일 시트는<style>HTML 문서의 어떤 부분에서든 사용할 수 있습니다.<style>요소 정의가 반드시 나타나야 합니다. 요소 정의를 사용하여<head>와</HTML 문서에서 어떤 요소를 정의할 수 있지만, 그들은head>

예제

<!DOCTYPE html><html lang="en"><head>
　　　　<title>My HTML Document</title>
　　　　<style>
　　　　　　　　표지 사이에 정의되어야 합니다. 예를 들어:-body　{　background
　　　　　　　　color:　YellowGreen;　}
　　　　</p　{　color:　#fff;　}/head><body>
　　　　<h1>This is a heading</h1>
　　　　<p>This is a paragraph of text.</p></body></html>

테스트를 보세요‹/›

팁:style><와 태그의type5표준 스타일 시트 언어와 기본 스타일 시트 언어, 따라서 이 설정을 무시할 수 있습니다. 이 속성은 단순히 정보를 제공하는 것이며, CSS가 HTML<style><link>type="text/css"

외부 스타일 시트

스타일이 웹사이트의 많은 페이지에 적용될 때, 외부 스타일 시트는 이상적인 선택입니다.

외부 스타일 시트는 모든 스타일 규칙을 하나의 별도의 문서에 저장합니다. 따라서 웹사이트의 어떤 HTML 파일에서든 링크할 수 있습니다. 외부 스타일 시트는 하나의 파일을 변경하면 전체 웹사이트의 외관을 변경할 수 있는 가장 유연한 방법입니다.

외부 스타일 시트를 추가할 수 있는 두 가지 방법이 있습니다.- 링크와导入。

외부 스타일 시트 링크

빈칸에 링크하기 전에, 먼저 스타일 시트를 생성해야 합니다. 귀하의 좋아하는 코드 편집기를 엽니다. 그런 다음, 새 파일을 생성하여 다음 CSS 코드를 입력하고 'style.css'로 저장합니다.

body　{
　　　　background:　lightyellow;
　　　　font:　18px　Arial,　sans-serif;}h1　}
　　　　color: orange;}

사용할 수 있습니다<link>태그는 외부 스타일 시트를 HTML 문서에 링크합니다. 이<link>태그로 내부에 접근<head>부분에서, 아래 예제에서 볼 수 있습니다:

예제

<!DOCTYPE html><html lang="en"><head>
　　　　<title>My HTML Document</title>
　　　　<link rel="stylesheet" href="css/style.css"></head><body>
　　　　<h1>This is a heading</h1>
　　　　<p>This is a paragraph of text.</p></body></html>

테스트를 보세요‹/›

팁:이 세 가지 방법 중, 외부 스타일 시트를 사용하는 것은 스타일을 정의하고 HTML 문서에 적용하는 최선의 방법입니다. 외부 스타일 시트에서는 영향을 받는 HTML 파일이 마크업 변경에 대해 최소한입니다.

외부 스타일 시트 가져오기

이@import규칙은 외부 스타일 시트를 로드하는 또 다른 방법입니다. 이@import문장은 브라우저가 외부 스타일 시트를 로드하고 그 스타일을 사용하도록 지시합니다.

이를 사용할 수 있는 두 가지 방법이 있습니다. 가장 간단한 방법은 문서의 제목 내에 사용하는 것입니다. 주의, 다른 CSS 규칙이 여전히<style>요소에. 이는 예제입니다:

예제

<style>
　　　　@import url("css/style.css);
　　　　p {
　　　　　　　　color: blue;
　　　　　　　　font-size:　16px;
　　　　}
　　</style>

테스트를 보세요‹/›

동일하게, 다음과 같은 방법을 사용할 수 있습니다.@import규칙은 다른 스타일 시트에서 스타일 시트를 가져옵니다.

예제

@import url("css/layout.css");
@import url("css/color.css);body {
　　　　color: blue;
　　　　font-size:　14px;}

테스트를 보세요‹/›

주의:모든@import모든 규칙은 스타일 시트의 시작 부분에 나타내야 합니다. 스타일 시트에서 정의된 모든 스타일 규칙은 가져온 스타일 시트에서의 충돌 규칙을 자동으로 덮어씁니다. 그러나 성능 문제로 인해 또 다른 스타일 시트에서 스타일 시트를 가져오는 것을 권장하지 않습니다.

CSS 문법 CSS 소개