HTML에서 CSS를 사용하는 방법

HTML과 CSS는 현대 웹 디자인의 두 가지 핵심 기술입니다. HTML은 웹 페이지의 콘텐츠를 만드는 데 사용되고 CSS는 스타일과 레이아웃에 사용됩니다. 이 글에서는 HTML 페이지에 CSS를 적용하여 웹 사이트에 아름답고 개인화된 터치를 추가하는 방법을 알아봅니다.

1. CSS 파일 소개

HTML 페이지에서 CSS를 사용하는 첫 번째 단계는 CSS 파일을 HTML 파일에 도입하는 것입니다. HTML 헤더에 링크 요소를 추가하면 됩니다. 이 요소는 다음과 같이 CSS 파일의 위치를 ​​가리켜야 합니다.

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

2. Applying CSS to HTML Elements

CSS 파일이 HTML 페이지에 제대로 도입되면 CSS 스타일 적용을 시작할 수 있습니다. 귀하의 HTML 요소. 다양한 선택기를 사용하여 요소를 선택한 다음 다음과 같이 스타일 속성을 요소에 적용할 수 있습니다.

h1 {
  color: red;
  text-align: center;
  font-size: 36px;
}

이 CSS 스타일 선택기는 페이지의 모든 h1 요소에 적용됩니다. 요소의 텍스트 색상을 빨간색으로 변경하고 텍스트를 중앙에 배치하며 요소의 글꼴 크기를 변경합니다.

3. 중첩 스타일

한 요소의 스타일 선언을 다른 요소의 스타일 선언 내에 중첩하여 모든 요소에 스타일을 추가할 수 있습니다. 예를 들어, 단락에서 강조된 모든 텍스트를 기울임꼴로 표시하고 색상을 파란색으로 변경할 수 있습니다.

p em {
  font-style: italic;
  color: blue;
}

이제 e388a4556c0f65e1904146cc1a846bee标签中的907fae80ddef53131f3292ee4f81644b 태그 내의 모든 텍스트는 기울임꼴로 파란색으로 표시됩니다.

4. 카테고리 선택기

카테고리 선택기는 동일한 유형의 여러 요소에 스타일을 지정하는 데 사용할 수 있는 선택기입니다. 클래스 이름의 CSS 스타일 선택기를 사용하면 카테고리의 모든 요소에 동일한 스타일을 적용할 수 있습니다. 다음은 카테고리 선택기의 예입니다.

.blue-text {
  color: blue;
}

이 스타일 선택기는 "blue-text"라는 클래스를 정의합니다. 이러한 유형의 스타일을 적용하려면 이 클래스를 필수 요소에 부여하면 됩니다:

<p class="blue-text">这段文字会变成蓝色的。</p>

참고: 클래스 속성을 사용하면 동일한 페이지에서 여러 개의 다른 클래스를 설정하고 필요한 경우 추가할 수 있습니다. 이 클래스는 다른 HTML에 할당됩니다. 강요. 여러 클래스를 결합하여 더 복잡한 스타일을 설정할 수도 있으므로 잘 활용하시기 바랍니다.

5. 다른 선택자

CSS에는 ID 선택자, 하위 선택자, 하위 선택자, 의사 클래스 선택자 등을 포함한 많은 다른 선택자가 있습니다. 이러한 선택기는 특정 요소의 스타일을 지정해야 할 때 유용합니다. 다음은 기타 선택기에 대한 소개입니다.

• ID 선택기: ID를 정의하여 페이지의 특정 요소에 스타일을 지정할 수 있습니다.
• Descendant 선택자: 지정된 요소의 하위 요소를 선택하는 데 사용됩니다.
• 하위 선택기: 자손 선택기와 유사하지만 직접 하위 요소만 선택합니다.
• 의사 클래스 선택기: 마우스 오버, 액세스 또는 선택 상태와 같은 특정 상태의 요소를 선택하는 데 사용됩니다.

6. CSS 상자 모델

CSS 상자 모델은 웹 페이지 요소의 레이아웃과 위치를 지정하는 기본 개념입니다. 이 모델은 콘텐츠 영역, 패딩, 테두리 및 여백과 같은 다양한 부분을 포함하는 HTML 요소 주변의 상자를 설명합니다.

각 상자의 크기와 위치를 설정하여 HTML 요소의 레이아웃을 정밀하게 제어할 수 있습니다. 다음은 CSS 상자 모델에서 일반적으로 사용되는 몇 가지 속성입니다.

• box-sizing: 요소의 상자 모델을 설정합니다.
• width: 요소의 너비를 설정합니다.
• height: 요소의 높이를 설정합니다.
• margin: 요소의 여백을 설정합니다.
• padding: 요소의 패딩을 설정합니다.
• border: 요소의 테두리를 설정합니다.

이러한 속성을 사용하여 웹 페이지의 다양한 요소를 배치하고 조정하여 원하는 스타일과 레이아웃을 얻을 수 있습니다.

요약

이 글에서는 CSS를 사용하여 HTML 요소의 스타일을 지정하는 방법을 다루었습니다. CSS 파일을 생성하고 HTML 페이지에 연결하여 CSS를 사용할 수 있습니다. 그런 다음 선택기를 사용하여 각 요소에 다양한 스타일을 적용할 수 있습니다. CSS 상자 모델을 사용하여 페이지의 요소를 배치하고 제어할 수도 있습니다. 이러한 기술을 익히면 아름답고 개인화된 웹사이트 디자인으로 자랑스러워할 수 있는 웹페이지를 만들 수 있습니다.

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