HTML에 CSS 스타일을 추가하는 방법은 무엇입니까?-HTML 튜토리얼-php.cn

HTML에 CSS 스타일을 추가하는 방법은 무엇입니까?

青灯夜游

풀어 주다： 2019-06-01 10:16:29

원래의

26587명이 탐색했습니다.

HTML에 CSS 스타일을 추가하는 방법은 무엇입니까?

HTML에 CSS 스타일을 추가하는 세 가지 방법이 있습니다. 즉, 인라인(특정 HTML 태그 내에서 사용되는 스타일 속성 사용), 인라인(스타일 태그는 CSS 코드를 특정 페이지의 헤드 부분에 배치), 및 외부 링크(링크 태그를 사용하여 외부 CSS 파일을 HTML로 링크).

1. 인라인

특정 HTML 태그 내에서 CSS 스타일을 설정하려면 스타일 속성을 사용하세요.

HTML 태그마다 스타일을 별도로 지정해야 하므로 인라인 CSS만 사용하지 않는 것이 좋습니다. 인라인 CSS만 사용하면 웹사이트 관리가 매우 어려워질 수 있습니다. 그러나 특정 상황에서는 유용할 수 있습니다. 예를 들어 CSS 파일에 액세스할 수 없거나 단일 요소에만 스타일을 적용해야 하는 경우가 있습니다. 인라인 CSS가 포함된 HTML 페이지의 예는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
   </body>
</html>

로그인 후 복사

2. 인라인

인라인 CSS 스타일은 특정 페이지의 섹션에 CSS 코드를 배치하는 것입니다. 인라인 CSS는 태그 사이에 배치되어야 합니다.

클래스와 ID는 CSS 코드를 참조하는 데 사용될 수 있지만 해당 특정 페이지에서만 활성화됩니다. 이러한 방식으로 포함된 CSS 스타일은 페이지가 로드될 때마다 다운로드되므로 로드 속도가 향상될 수 있습니다. 인라인 스타일 시트를 사용하면 모든 것이 한 페이지에 있으므로 미리보기를 보는 것이 훨씬 쉽습니다.

내부 스타일 시트의 예:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

로그인 후 복사

3. 외부 링크

외부 링크는 링크 태그 요소를 사용하여 외부 CSS 파일(.css 파일)을 HTML 페이지로 참조하는 것입니다. 페이지의

이것은 HTML 페이지에 CSS를 추가하는 가장 편리한 방법입니다. 이렇게 하면 외부 CSS 파일에 대한 모든 변경 사항이 웹 사이트에 반영됩니다.

외부 스타일 시트의 예:

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

로그인 후 복사

style.css에는 모든 스타일 규칙이 포함되어 있습니다. 예:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

로그인 후 복사

요즘 대부분의 웹사이트는 별도의 문서에 작성된 후 다양한 웹 문서에 추가되는 스타일인 외부 스타일 시트를 사용합니다. 외부 스타일 시트는 연결된 모든 파일에 영향을 미칩니다. 즉, 20페이지 웹사이트가 있고 각 페이지가 동일한 스타일 시트를 사용하는 경우 변경이 필요할 때 스타일 시트를 간단히 편집하여 해당 페이지를 완료할 수 있습니다. 사이트 관리가 더 쉬워졌습니다.

위 내용은 HTML에 CSS 스타일을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!