HTML에 CSS 스타일을 추가하는 방법
- 藏色散人원래의
- 2021-01-20 09:14:5612569검색
HTML에 CSS 스타일을 추가하는 방법: 1. CSS 스타일을 인라인으로 추가합니다. 2. CSS 코드를 인라인을 통해 특정 페이지의 헤드 부분에 넣습니다. 3. 링크 태그를 사용하여 외부에 추가합니다. CSS 파일을 HTML에 연결할 수 있습니다. .
이 튜토리얼의 운영 환경: 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 스타일은 특정 페이지의 93f0f5c25f18dab9d176bd4f6de5d30e 섹션에 CSS 코드를 배치하는 것입니다. 인라인 CSS는 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 태그 사이에 배치되어야 합니다.
클래스와 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 페이지에 참조하는 것입니다. 3597ade1a421c07245111059aecd1819
이것은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!