인라인 스타일, 내부 스타일 시트, 외부 스타일 시트를 포함하여 HTML에 CSS 스타일을 추가하는 방법에는 여러 가지가 있습니다. 아래에서는 각 방법을 자세히 설명하고 해당 예제 코드를 제공하겠습니다.
인라인 스타일:
인라인 스타일은 HTML 요소 내부에 직접 작성되며 스타일 속성을 통해 정의됩니다. 이 방법은 단일 요소의 스타일 정의에 적합하며 HTML 코드를 복잡하게 만들고 유지 관리가 어렵게 만들 수 있으므로 대규모 프로젝트에서 널리 사용하는 것은 권장되지 않습니다.
샘플 코드:
<p style="color: red;">这是一段红色的文本。</p>
내부 스타일 시트:
내부 스타일 시트는 HTML 문서의 93f0f5c25f18dab9d176bd4f6de5d30e 태그 내에 위치하며 c9ccee2e6ea535a969eb3f532ad9fe89 태그를 사용하여 정의됩니다. 이 방법은 단일 HTML 파일의 스타일 정의에 적합합니다. 여러 HTML 파일에서 동일한 스타일을 사용해야 하는 경우 코드를 복사해야 하므로 코드 재사용 및 유지 관리에 도움이 되지 않습니다.
샘플 코드:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一段红色的文本。</p>
</body>
</html>외부 스타일 시트:
외부 스타일 시트는 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 통해 HTML 파일에서 참조되는 독립형 CSS 파일입니다. 이는 스타일과 콘텐츠를 분리하여 유지하고 코드 유지 관리성을 향상시키기 때문에 가장 권장되는 방법입니다. 동시에 외부 스타일 시트를 여러 HTML 파일에서 참조하여 코드를 재사용할 수 있습니다.
다음 콘텐츠가 포함된 styles.css라는 CSS 파일이 있다고 가정합니다.
p {
color: red;
}HTML 파일에서 이 CSS 파일을 참조하는 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>这是一段红色的文本。</p> </body> </html>
위 코드에서 href 속성은 경로를 지정합니다. CSS 파일. CSS 파일과 HTML 파일이 같은 디렉터리에 있으면 파일 이름을 직접 사용할 수 있습니다. 동일한 디렉터리에 있지 않은 경우 상대 경로 또는 절대 경로를 제공해야 합니다.
위의 세 가지 방법 외에도 @import 문을 사용하여 CSS 스타일을 참조할 수도 있습니다. @import 문은 HTML 문서의 어느 곳에서나 사용할 수 있지만 일반적으로 93f0f5c25f18dab9d176bd4f6de5d30e 태그 내에 배치됩니다. @import 문을 사용할 때 가져올 CSS 파일의 경로를 지정해야 합니다.
샘플 코드:
<!DOCTYPE html>
<html>
<head>
<style>
@import url('styles.css');
</style>
</head>
<body>
<p>这是一段红色的文本。</p>
</body>
</html>위 내용은 HTML에 CSS 스타일을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!