CSS를 사용하는 방법

Cascading Style Sheets의 전체 이름인 CSS는 웹 페이지 스타일을 디자인하는 데 사용되는 언어입니다. CSS는 HTML 문서의 콘텐츠와 프리젠테이션 스타일을 분리하여 페이지를 더욱 아름답고 디자이너의 요구 사항에 맞게 만들 수 있습니다. 이 기사에서는 초보자가 시작하는 데 도움이 되는 CSS의 기본 개념, 구문 및 실제 적용을 소개합니다.

1. CSS의 기본 개념

CSS는 선택자와 선언으로 구성됩니다. 선택기는 스타일을 적용할 HTML 요소를 지정하는 데 사용되며 선언은 적용할 스타일을 정의합니다. 다음은 몇 가지 중요한 기본 개념입니다.

1. 선택기

선택기는 어떤 HTML 요소에 스타일을 적용할지를 나타내는 코드입니다. 선택자는 아래에 소개하는 태그 선택자, 클래스 선택자, ID 선택자 등이 될 수 있습니다.

(1) 태그 선택기

태그 선택기는 HTML 문서에서 태그 이름으로 요소를 일치시키는 가장 일반적으로 사용되는 선택기입니다. 예를 들어, 다음 코드는 모든

요소의 텍스트 색상을 빨간색으로 설정합니다.

h1 {
    color: red;
}

(2) 클래스 선택기

클래스 선택기는 . 예를 들어, 다음 코드는 "text-center" 클래스가 있는 요소의 텍스트를 중앙에 배치합니다.

.text-center {
    text-align: center;
}

(3) ID 선택기

ID 선택기는 #과 일치하는 ID 이름을 사용합니다. HTML 문서의 각 요소는 하나의 ID만 가질 수 있으므로 ID 선택기와 일치하는 요소는 하나만 있을 수 있습니다. 예를 들어 다음 코드는 ID가 "main"인 요소의 배경색을 흰색으로 설정합니다.

#main {
    background-color: white;
}

2. 선언

선언은 해당 HTML 요소에 적용되는 스타일 설명을 참조합니다. 선언은 속성과 값으로 구성됩니다. 예를 들어, 다음 코드는 모든

요소의 텍스트 색상을 빨간색으로 설정합니다.

h1 {
    color: red;
}

여기서 color는 속성 이름이고 red는 해당 속성 값입니다. 각 명령문은 중괄호 안에 작성하고 세미콜론으로 끝나야 합니다.

2. CSS 구문

CSS의 구문은 키-값 쌍과 마찬가지로 매우 간단합니다. 각 CSS 규칙은 아래와 같이 선택기와 중괄호로 묶인 선언 블록으로 구성됩니다.

选择器 { 属性: 值; 属性: 值; }

이 규칙에서 선택기는 CSS 스타일이 적용되는 HTML 요소를 참조하고 속성과 값은 CSS입니다. 스타일 자체에 대한 설명입니다. 쉽게 읽을 수 있도록 여러 줄 규칙에서는 들여쓰기와 줄 바꿈을 사용하여 코드를 구성하는 경우가 많습니다.

그라디언트 배경을 적용하기 위한 CSS 코드는 다음과 같습니다.

body {
    background: linear-gradient(to right, #00bfff, #007fff);
}

이 규칙은 문서의 본문 요소에 그라데이션 배경을 적용하라는 내용입니다. 스타일은 왼쪽에서 오른쪽으로 #00bfff(연한 파란색)에서 #007fff(진한 파란색)까지 그라데이션으로 표시됩니다.

3. CSS 적용

HTML 문서에서는 인라인 스타일이나 외부 스타일 시트를 사용하여 CSS 스타일을 직접 적용할 수 있습니다.

1. 인라인 스타일

인라인 스타일 속성은 인라인 스타일 형태로 HTML 태그에 직접 삽입됩니다. 예를 들어, 다음 코드는 요소의 텍스트 색상을 빨간색으로 설정합니다.

<span style="color: red;">Hello, CSS!</span>

그러나 인라인 스타일은 지정된 HTML 요소에만 적용되며 다른 요소에서 상속될 수 없습니다. 따라서 필연적으로 HTML 코드가 더욱 복잡해집니다.

2. 외부 스타일 시트

HTML 코드에서 혼란을 야기하는 인라인 스타일을 피하기 위해 외부 스타일 시트를 사용할 수 있습니다. 외부 스타일 시트는 HTML 문서와 별도로 .css 파일 형식으로 저장되므로 페이지 관리가 더욱 편리해집니다. 다음은 외부 스타일시트의 간단한 예입니다.

/* 在style.css文件中定义以下规则 */

h1 {
    color: red;
}

.text-center {
    text-align: center;
}

#main {
    background-color: white;
}

이 예에서는 HTML의

에 해당하는 세 가지 규칙이 CSS 파일에 정의되어 있으며, 클래스는 "text-center"이고 id는 "main" 요소입니다. . 이 CSS 파일을 사용하려면 HTML 파일에 다음 태그를 추가해야 합니다.

<!-- 在HTML中引用style.css文件 -->
<link rel="stylesheet" type="text/css" href="style.css">

이렇게 하면 HTML 문서가 규칙에 정의된 스타일을 자동으로 적용합니다.

4. 요약

CSS는 웹 페이지를 더욱 아름답고 읽기 쉽고 유지 관리하기 쉽게 만드는 매우 중요한 디자인 언어입니다. CSS의 기본 개념, 구문 및 실제 적용을 이해하는 것은 웹 디자인의 필수적인 기초입니다. 이 기사가 CSS 사용을 더 잘 익히는 데 도움이 되기를 바랍니다.

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