HTML에 CSS 스타일을 추가하는 방법은 무엇입니까? 인라인, 임베디드, 외장의 장점과 단점-CSS 튜토리얼-php.cn

HTML에 CSS 스타일을 추가하는 방법은 무엇입니까? 인라인, 임베디드, 외장의 장점과 단점

青灯夜游

풀어 주다： 2018-11-02 14:32:31

원래의

16072명이 탐색했습니다.

HTML에 CSS 스타일을 추가하는 방법은 무엇입니까? 이 기사에서는 HTML에 CSS 스타일을 추가하는 세 가지 방법, 즉 인라인 스타일, 임베디드 스타일, 외부 스타일의 장점과 단점을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 HTML에 CSS 스타일을 추가하는 세 가지 방법이 무엇인지 이해해야 합니다.

1. 특정 요소에 규칙을 적용하려면 인라인

2. 내부 CSS를 사용하고 HTML 문서 섹션에 CSS 규칙을 포함합니다.

3 .모든 CSS 규칙이 포함된 외부 파일(.css 파일), 즉 외부 스타일에 연결합니다

이제 인라인, 인라인, 외부 스타일의 구현 방법과 장단점을 자세히 소개하겠습니다.

1. 인라인

인라인 CSS는 특정 HTML 태그 내에서 사용해야 합니다. 태그 사이에 배치되어야 합니다. 내부 스타일 시트의 예:

<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>

로그인 후 복사

임베디드 CSS의 장점:

1. 스타일 시트는 한 페이지에만 영향을 미칩니다.

2. 내부 스타일 시트는 클래스와 ID를 사용할 수 있습니다.

3. 여러 파일을 업로드할 필요가 없습니다. HTML과 CSS는 같은 파일에 있을 수 있습니다.

임베디드 CSS의 단점:

1. 페이지 로딩 시간이 늘어납니다.

2. 한 페이지에만 영향을 미칩니다. 여러 문서에서 동일한 CSS를 사용하려는 경우에는 쓸모가 없습니다.

3. 외부 링크

아마도 HTML 페이지에 CSS를 추가하는 가장 편리한 방법은 이를 외부 파일(.css 파일)에 링크하는 것입니다. 이렇게 하면 외부 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;
}

로그인 후 복사

외부 CSS의 장점:

1 HTML 페이지의 크기가 더 작고 구조가 더 명확합니다.

2. 로딩 속도가 빨라졌습니다.

3. 동일한 .css 파일을 여러 페이지에서 사용할 수 있습니다.

외부 CSS의 단점:

1. 외부 CSS가 로드되기 전에는 페이지가 올바르게 렌더링되지 않을 수 있습니다.

결론

위는 HTML 페이지에 CSS를 추가하는 다양한 방법을 소개하고 인라인, 외부 및 내부 스타일 시트의 차이점을 이해하는 이 기사의 전체 내용입니다. CSS 스타일을 추가하기 위해 다양한 방법을 사용할 수 있습니다. 학습에 도움이 되기를 바랍니다. [추천 영상 학습: css 튜토리얼]

위 내용은 HTML에 CSS 스타일을 추가하는 방법은 무엇입니까? 인라인, 임베디드, 외장의 장점과 단점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!