CSS 스타일을 호출하는 방법-프런트엔드 Q&A-php.cn

CSS 스타일을 호출하는 방법

PHPz

풀어 주다： 2023-04-21 13:36:57

원래의

1222명이 탐색했습니다.

인터넷의 지속적인 발전과 함께 웹 디자인과 개발이 점점 더 중요해지고 있습니다. CSS(Cascading Style Sheet)는 웹 페이지의 스타일을 제어하는 데 사용되는 언어이자, 웹 개발에 있어서 반드시 숙달해야 하는 기술이기도 합니다. 그러나 일부 초보자는 CSS 스타일을 호출하는 방법을 모를 수도 있습니다. 이 기사에서는 CSS 스타일 호출 방법을 자세히 소개합니다.

1. 포함된 스타일 시트

포함된 스타일 시트를 정의하려면 HTML 파일의 스타일 태그를 사용하세요. 스타일 시트에 정의된 스타일은 다음과 같이 현재 페이지에만 유효합니다.

<!DOCTYPE html>
<html>
<head>
  <title>内嵌样式表</title>
  <style>
    body {
      background-color: #f0f0f0;
    }
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

로그인 후 복사

위의 예에서는 두 가지 스타일은 스타일 태그를 통해 내부적으로 정의됩니다. 웹 페이지의 배경색과 제목 글꼴 색상을 설정하는 데 사용되는 스타일입니다. 코드를 실행하면 페이지의 배경색이 회색으로 변경되고 제목의 글꼴 색상이 빨간색으로 변경되는 것을 확인할 수 있습니다.

2. 외부 스타일 시트

외부 스타일 시트를 소개하려면 HTML 파일의 링크 태그를 사용하세요. 이 스타일 시트는 HTML 파일에 포함되지 않지만 CSS 파일에 독립적으로 존재하며 여러 HTML에서 공유할 수 있습니다. 다음과 같이 HTML 파일의 구조를 더 간결하고 쉽게 유지 관리할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>外部样式表</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

로그인 후 복사

위의 예에서는 style.css라는 이름의 CSS 파일이 이 파일에 정의될 수 있으며, 스타일 재사용을 위해 이 스타일 시트를 여러 HTML 파일로 공유할 수 있습니다. style.css에서 스타일을 정의하는 방법은 인라인 스타일 시트와 유사합니다. 예:

body {
  background-color: #f0f0f0;
}
h1 {
  color: red;
}

로그인 후 복사

이 예에서는 body 선택기를 사용하여 웹 페이지의 배경색을 설정하고 h1 선택기를 사용하여 설정합니다. 제목 글꼴 색상입니다. 이 스타일 시트가 여러 HTML 파일에서 참조되면 이러한 스타일이 공유됩니다.

3. 인라인 스타일

인라인 스타일 시트는 HTML 태그에서 스타일을 정의합니다. 스타일은 다음과 같이 특정 태그에 직접 적용될 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>内联样式表</title>
</head>
<body>
  <h1 style="color:red">欢迎访问我的网站</h1>
  <p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>

로그인 후 복사

위 예에서는 인라인 스타일 시트가 h1 태그에 정의되어 있습니다. 제목 글꼴 색상을 빨간색으로 설정합니다. 인라인 스타일 시트 및 외부 스타일 시트와 달리 인라인 스타일 시트는 현재 마크업에만 유효하며 재사용할 수 없습니다. 스타일이 많으면 HTML 코드가 무질서하게 나타나 유지 관리에 도움이 되지 않습니다.

요약:

요약하면 HTML 파일에서 CSS 스타일을 호출하는 방법에는 내장 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트 등 세 가지가 있습니다. 복잡한 웹 애플리케이션을 개발하려면 외부 스타일 시트 방식을 사용하는 것이 좋습니다. 여러 HTML 파일에서 스타일을 공유할 수 있어 개발 및 유지 관리가 더 쉬워지기 때문입니다. 그러나 간단한 애플리케이션의 경우 인라인 스타일 시트와 인라인 스타일 시트도 좋은 선택입니다. 다양한 시나리오와 요구 사항에는 다양한 기술 선택이 필요합니다. 위의 CSS 스타일 호출 방법을 익히면 웹 개발을 더욱 효율적이고 유연하게 만들 수 있습니다.

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