집 > 기사 > 웹 프론트엔드 > CSS를 HTML에 도입하는 방법

CSS를 HTML에 도입하는 방법

墨辰丷원래의: 2018-05-16 11:26:592403검색

HTML에 CSS를 도입하는 네 가지 주요 방법은 인라인, 임베디드, 링크 및 가져오기입니다.

1. 인라인 스타일
인라인 스타일은 태그의 스타일 속성에 CSS 스타일을 설정하는 것입니다. 이 방법은 CSS의 장점을 반영하지 않으므로 권장되지 않습니다.
2. Embedded
Embedded는 웹페이지의 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 태그 쌍에 CSS 스타일을 함께 작성하는 것입니다. 형식은 다음과 같습니다.

<head>
        <style type="text/css">
               ...此处写CSS样式
       </style>
      </head>

단점은 많은 웹페이지를 포함하는 웹사이트의 경우 웹페이지마다 임베드를 사용하고 스타일을 수정하는 것이 매우 번거롭다는 것입니다. 단일 웹페이지에는 삽입 사용을 고려할 수 있습니다.

3. 가져오기 방법
HTML 파일에 독립적인 .css 파일을 도입합니다. 가져오기 방법은 CSS 규칙을 사용하여 c9ccee2e6ea535a969eb3f532ad9fe89 태그에도 작성됩니다.

<style type="text/css">
                    @import"mystyle.css"; 此处要注意.css文件的路径
         </style>

가져오기 공식은 전체 웹페이지를 로드한 후 CSS 파일을 로드하므로 웹페이지가 상대적으로 크면 먼저 페이지 스타일이 없는 문제가 발생합니다. 스타일이 나타납니다. 이는 수입품의 본질적인 결함입니다.

4. Link -type 是도 HTML 파일에 .css 파일을 도입했지만 HTML 규칙의 링크 사용이 외부 CSS 파일에 도입되었습니다. ; 외부 스타일 테이블 파일을 소개하는 표시입니다. 문법 사용은 다음과 같습니다.

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

링크를 사용할 경우 웹 파일을 로드하기 전에 CSS 파일을 로드합니다. 처음부터 스타일이 지정되지 않은 웹 페이지가 먼저 표시되지 않고 가져오기 유형과 같이 스타일이 지정된 웹 페이지가 표시됩니다. 이것이 링크 유형의 장점입니다.

요약: 일반적으로 웹 사이트를 구축할 때 스타일은 대부분 여러 스타일 시트 파일로 작성되므로 먼저 링크를 사용하여 일반 CSS 파일을 소개한 다음 가져오기를 사용하여 이 CSS 파일에 다른 CSS 파일을 소개합니다. CSS 파일. 그러나 JavaScript를 통해 CSS 파일을 동적으로 도입하는 경우에는 연결만 사용할 수 있습니다.

CSS를 HTML에 도입하는 방법

관련 기사