CSS를 HTML에 도입하는 방법-프런트엔드 Q&A-php.cn

CSS를 HTML에 도입하는 방법

WBOY

풀어 주다： 2023-05-29 19:55:06

원래의

1508명이 탐색했습니다.

CSS를 HTML에 도입하는 방법

프론트엔드 개발의 기초로서 HTML과 CSS의 관계는 서로를 보완합니다. HTML은 페이지 구조와 내용을 구성하는 역할을 담당하고, CSS는 이를 바탕으로 페이지에 색상을 추가하고 아름답게 만드는 역할을 담당합니다. 그렇다면 CSS 스타일을 HTML 문서에 어떻게 도입할 수 있을까요? 이번 글에서는 CSS를 소개하는 방법과 주의할 점을 소개하겠습니다.

HTML 헤드에서 외부 CSS 참조

CSS를 참조하는 가장 일반적이고 권장되는 방법입니다. 일반적인 페이지 구조를 예로 들면, HTML 헤더 태그에 링크 태그를 추가합니다:

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
      页面内容
  </body>
</html>

로그인 후 복사

그중 링크 태그에는 세 가지 속성이 있습니다.

rel: 스타일 시트와 현재 문서 간의 관계를 나타냅니다. 외부 스타일 시트. 값은 "stylesheet"입니다.
type: 스타일 시트 파일의 MIME 유형을 나타내며, 값은 "text/css"입니다.
href: 스타일 시트의 참조 경로를 나타냅니다. 파일.

여기서 href 속성의 경로는 CSS 파일이 있는 상대 경로가 아닌 현재 HTML 경로를 기반으로 해야 한다는 점에 유의해야 합니다. CSS 파일이 현재 HTML과 동일한 디렉터리에 있다고 가정하면 참조 스타일은 다음과 같이 작성해야 합니다.

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

로그인 후 복사

여기서 "."는 현재 디렉터리를 나타내며 파일 이름 접미사 ".css"는 생략할 수 없습니다.

HTML 헤더에 내부 CSS 삽입

HTML 문서에서는 스타일 태그를 통해 내부 CSS를 삽입할 수 있습니다. 이 방법을 사용하면 HTML 파일의 크기가 커질 수밖에 없지만 일부 단순하고 작은 웹사이트의 경우 외부 파일 요청 및 다운로드 시간을 절약하고 페이지 응답 속도를 높일 수 있습니다. 다음은 샘플 코드입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
    <style type="text/css">
      /* CSS样式内容 */
      body {background-color: #F1F1F1;}
      h1 {color: orange;}
    </style>
  </head>
  <body>
      页面内容
  </body>
</html>

로그인 후 복사

그 중 스타일 태그의 내용은 스타일 태그 내부에 스타일 코드가 직접 작성된다는 점만 제외하면 외부 CSS 파일과 동일한 형식을 갖습니다. 스타일 오염(CSS 스타일이 서로 영향을 줌)을 방지하려면 내부 CSS가 의미 있는 CSS 선택기를 사용하여 스타일 범위를 제한해야 한다는 점에 유의해야 합니다.

HTML 요소에 인라인 스타일 삽입

인라인 스타일은 CSS 스타일 코드를 HTML 요소의 스타일 속성에 직접 삽입하는 것을 의미합니다. 이 방법은 매우 유연하지만 코드 재사용 및 유지 관리에 도움이 되지 않습니다. 다음은 샘플 코드입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <h1 style="color:orange;">页面标题</h1>
    <p style="font-size:18px;">页面内容</p>
  </body>
</html>

로그인 후 복사

인라인 스타일을 사용할 때 스타일 코드가 페이지의 접근성과 사용성에 영향을 미치지 않도록 주의해야 합니다. 시각 효과와 유사한 일부 스타일의 경우 외부 스타일 또는 내부 스타일을 사용해야 합니다.

참조: