집 > 기사 > 웹 프론트엔드 > HTML에서 CSS를 참조하는 방법은 무엇입니까?

HTML에서 CSS를 참조하는 방법은 무엇입니까?

php中世界最好的语言원래의: 2018-02-11 10:51:542098검색

이번에는 HTML에서 CSS를 참조하는 방법과 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

HTML에서 CSS를 도입하는 주요 방법은 인라인, 임베디드, 임포트, 링크입니다.

인라인: 즉, 마크의 스타일 속성에 CSS 스타일을 설정하는 방식입니다. 이 방법은 본질적으로 CSS의 장점을 반영하지 않습니다.
사용을 권장하지 않음:

      <html>
      <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
      </head>
      <body>
<h1 style=color:white;background-color=blue;>
This is a line of Text.
</h1>
      </body>
      </html>

Embedded: Embedded는 93f0f5c25f18dab9d176bd4f6de5d30e와 9c3bca370b5104690d9ef395f2c5f8d1 사이의 페이지에 있는 다양한 요소에 대한 설정을 작성하는 데 중점을 둡니다. 이 방법은 매우 편리합니다. 그러나 많은 페이지를 포함하는 웹 사이트의 경우 각 페이지가 자체 스타일을 인라인으로 설정하면 CSS가 제공하는 큰 이점을 잃게 됩니다. 따라서 웹 사이트는 일반적으로 다음 두 가지 방법 중 하나를 사용하여 독립적인 CSS 스타일 시트 파일을 작성합니다.

HTML 문서에 도입되었습니다. 예:

      <html>
      <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
<style type="text/css">
h1{
      color:white;
      background-color:boue;
      }
</style>
      </head>
      <body>
<h1>This is a line of Text.</h1>
<h1>This is another line of Text.</h1>
      </body>
      </html>

가져오기 유형 및 링크 유형: 가져오기 유형과 링크 유형의 목적은 독립적인 CSS 파일을 HTML 파일에 도입하는 것이며 둘 사이에는 상응하는 차이점이 있습니다.

실제로 둘 사이의 가장 큰 차이점은 링크 유형은 HTML 태그를 사용하여 외부 CSS 파일을 소개하는 반면, 가져오기 유형은 CSS 규칙을 사용하여 외부 CSS 파일을 소개한다는 것입니다. 따라서 구문도 다릅니다.
링크 스타일을 사용하는 경우 다음 문을 사용하여 외부 CSS 파일을 도입해야 합니다.

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

import를 사용하는 경우 다음 문을 사용해야 합니다.

<style type="text/css">
       @import"mystyle.css";
</style>

그리고 이 두 가지 방법을 사용한 후의 디스플레이 효과도 약간 다릅니다. 링크 방식을 사용할 경우 CSS 파일은 설치 페이지의 주요 부분 이전에 로드되므로 표시되는 웹 페이지는 처음부터 스타일 효과가 나타납니다. 가져오기 방식을 사용할 경우 CSS 파일은 설치 페이지 이후에 로드됩니다. 전체 페이지가 로드되는 경우 일부 브라우저의 경우 웹 페이지 파일의 크기가 상대적으로 크면 스타일이 지정되지 않은 페이지가 먼저 표시되고 플래시 후에 스타일 설정 효과가 나타납니다. 뷰어의 관점에서 보면 이는 가져오기 사용의 단점입니다. 상대적으로 큰 일부 웹 사이트의 경우 유지 관리를 용이하게 하기 위해 모든 CSS 스타일을 여러 CSS 파일에 넣을 수 있습니다. 이런 식으로 링크 가져오기를 사용하는 경우 CSS 파일을 별도로 가져오기 위한 여러 명령문이 필요합니다. CSS 파일의 분류를 조정하려면 HTML 파일도 동시에 조정해야 합니다. 이는 유지 관리 작업의 단점입니다. 가져오기 방법을 사용하는 경우 일반 CSS 파일만 가져올 수 있으며 이 파일에 있는 다른 독립 CSS 파일을 가져올 수 있습니다. 링크 방법에는 이 기능이 없습니다.

여기에 제안 사항이 있습니다. CSS 파일을 도입해야 하는 경우 링크 방법을 사용하고, 여러 CSS 파일을 도입해야 하는 경우 먼저 링크 방법을 사용하여 "디렉토리" CSS 파일, 즉 이 "디렉토리"를 삽입하세요. " CSS 파일 그런 다음 가져오기를 사용하여 다른 CSS 파일을 가져옵니다.

JavaScript를 통해 가져올 CSS 파일을 동적으로 결정하려면 링크 방법을 사용해야 합니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!