HTML에 CSS 스타일을 추가하는 방법은 무엇입니까? 인라인, 임베디드, 외장의 장점과 단점
- 青灯夜游원래의
- 2018-11-02 14:32:3116083검색
HTML에 CSS 스타일을 추가하는 방법은 무엇입니까? 이 기사에서는 HTML에 CSS 스타일을 추가하는 세 가지 방법, 즉 인라인 스타일, 임베디드 스타일, 외부 스타일의 장점과 단점을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
먼저 HTML에 CSS 스타일을 추가하는 세 가지 방법이 무엇인지 이해해야 합니다.
1. 특정 요소에 규칙을 적용하려면 인라인
2. 내부 CSS를 사용하고 93f0f5c25f18dab9d176bd4f6de5d30e HTML 문서 섹션에 CSS 규칙을 포함합니다.
3 .모든 CSS 규칙이 포함된 외부 파일(.css 파일), 즉 외부 스타일에 연결합니다
이제 인라인, 인라인, 외부 스타일의 구현 방법과 장단점을 자세히 소개하겠습니다.
1. 인라인
인라인 CSS는 특정 HTML 태그 내에서 사용해야 합니다. c9ccee2e6ea535a969eb3f532ad9fe89 속성은 특정 HTML 태그의 스타일을 설정하는 데 사용됩니다. 각 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>인라인 CSS의 장점:
1 변경 사항을 테스트하고 미리 보려는 경우 매우 유용합니다.
2. 빠른 수리에 매우 유용합니다.
3. HTTP 요청을 줄입니다.
인라인 CSS의 단점:
인라인 CSS는 모든 요소에 적용되어야 합니다.
2. 인라인
인라인 CSS 스타일은 CSS 코드를 특정 페이지의 93f0f5c25f18dab9d176bd4f6de5d30e 섹션에 배치하는 것입니다. 클래스와 ID는 CSS 코드를 참조하는 데 사용될 수 있지만 해당 특정 페이지에서만 활성화됩니다. 이러한 방식으로 포함된 CSS 스타일은 페이지가 로드될 때마다 다운로드되므로 로드 속도가 향상될 수 있습니다. 인라인 스타일 시트를 사용하면 모든 것이 한 페이지에 있으므로 미리보기를 보는 것이 훨씬 쉽습니다. 인라인 CSS는 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 태그 사이에 배치되어야 합니다. 내부 스타일 시트의 예:
<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 파일에 대한 참조는 페이지의 93f0f5c25f18dab9d176bd4f6de5d30e 섹션에 있어야 합니다. 예:
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!