HTML 페이지에 CSS를 포함하는 방법-CSS 튜토리얼-php.cn

HTML 페이지에 CSS를 포함하는 방법

WBOY

풀어 주다： 2023-09-19 18:57:02

앞으로

820명이 탐색했습니다.

세 가지 방법으로 HTML 페이지에 CSS를 포함할 수 있습니다. 그들은 -

Inline
여기서 요소의 스타일 속성에 CSS 스타일을 지정합니다. 그러나 CSS의 내부 또는 외부 연결을 통해 파일을 모듈화하는 것이 좋습니다.
내부
External
로컬이나 서버에 배치할 수 있는 .css 파일 태그에 대한 링크를 사용할 수 있습니다. 외부 링크를 사용하여 파일을 리팩토링하면 여러 웹 페이지에서 사용할 수 있는 공통 CSS 파일을 가질 수 있습니다.

Syntax

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

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

로그인 후 복사

예제

다음 예는 HTML 페이지에 CSS 파일을 포함하는 방법을 보여줍니다

Inline CSS

Live Demo

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:mistyrose; height: 50px;"></div>
<p style="letter-spacing: 16px; font-size: 1.3em;">
<u>Demo text here</u>
</p>
</body>
</html>

로그인 후 복사

Output

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

如何在 HTML 页面中包含 CSS

예

내부 링크

라이브 데모

<!DOCTYPE html>
<html>
<head>
<style>
table, table *{
   border: 5px double green;
   margin: auto;
   padding: 20px;
}
tr {
   box-shadow: 0 0 0 3px red;
}
td {
   border-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

로그인 후 복사

출력

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

如何在 HTML 页面中包含 CSS

예

외부 링크

HTML 파일

실제 시간 데모

<!DOCTYPE html>
<html>
<head>
<link rel=&rdquo;stylesheet&rdquo; type=&rdquo;text/css&rdquo; href=&rdquo;style.css&rdquo;>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

로그인 후 복사

CSS 파일

div {
   margin: auto;
   padding: 15px;
   width: 33%;
   border: 2px solid;
   border-radius: 50%;
}
div > div {
   border-color: green;
}
div > div > div {
   border-color: red;
}

로그인 후 복사