HTML 문서에 CSS 포함

<시간/>

HTML 문서에 CSS를 포함하려면 내부적으로, 인라인으로 포함하거나 외부 파일을 링크할 수 있습니다.

구문

HTML에 CSS 파일을 포함하는 구문은 다음과 같습니다.

/*inline*/
<element style="/*declarations*/"></element>
/*internal*/
<head>
<style>
/*declarations*/
</style>
</head>
/*external*/
<head>
<link rel="stylesheet" href="#location">
</head>

예시

다음 예는 HTML 문서에서 CSS 파일의 링크를 보여줍니다.

인라인 CSS

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family: Forte;">Demo text</p>
<p style="background-color: lightblue;">This is Demo text</p>
<img src="https://www.tutorialspoint.com/memcached/images/memcached.jpg" style="border: 3px groove orange;">
</body>
</html>

출력

이것은 다음과 같은 출력을 제공합니다 -

HTML 문서에 CSS 포함

예시

내부 연결

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   padding: 15px;
   width: 33%;
   border: 2px solid;
   border-radius: 5%;
}
div > div {
   border-color: transparent;
   box-shadow: inset 0 0 6px red;
}
div > div > div {
   border-color: red;
}
</style>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

출력

이것은 다음과 같은 출력을 제공합니다 -

HTML 문서에 CSS 포함

예시

외부 연결

CSS에서는 외부 CSS 파일을 포함하고 여기에 CSS 스타일을 배치할 수도 있습니다. 아래 예와 같이 HTML 파일에서도 동일하게 참조할 수 있습니다. -

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Demo text</p>
<p>Demo text again</p>
</body>
</html>

출력

이것은 다음과 같은 출력을 제공합니다 -

HTML 문서에 CSS 포함

다음은 style.css입니다 -

p {
   text-decoration: overline;
   text-transform: capitalize;
}