HTML에 CSS 스타일을 추가하는 방법-HTML 튜토리얼-php.cn

HTML에 CSS 스타일을 추가하는 방법

藏色散人

풀어 주다： 2022-12-30 11:12:14

원래의

12562명이 탐색했습니다.

HTML에 CSS 스타일을 추가하는 방법: 1. CSS 스타일을 인라인으로 추가합니다. 2. CSS 코드를 인라인을 통해 특정 페이지의 헤드 부분에 넣습니다. 3. 링크 태그를 사용하여 외부에 추가합니다. CSS 파일을 HTML에 연결할 수 있습니다. .

HTML에 CSS 스타일을 추가하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터.

추천: "HTML 비디오 튜토리얼"

프론트 엔드를 배울 때 CSS는 HTML 태그에 다양한 스타일을 추가하여 브라우저에 이러한 태그의 콘텐츠를 표시하는 방법을 알려준다는 것을 알아야 합니다. CSS는 HTML에 다양한 스타일을 추가하는 데 사용되는데 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!