웹 개발에서 HTML은 웹 페이지 콘텐츠를 담당하는 언어이고 CSS는 웹 페이지 스타일을 담당하는 언어입니다. HTML과 CSS는 상호 의존적이며 CSS는 웹 페이지에 더 나은 스타일과 레이아웃 효과를 추가합니다. 그렇다면 HTML에 CSS를 추가하는 방법은 무엇입니까? 다음 기사에서는 다음과 같은 측면을 자세히 소개합니다.
1. 인라인 스타일
인라인 스타일은 CSS 스타일 시트를 변환하는 것입니다. HTML 요소 내에서 직접 HTML 태그의 스타일 속성을 통해 CSS 스타일을 설정합니다. 예:
<p style="color: red;">这是一个段落</p>
위 코드에서는 스타일 속성을 통해 단락 태그 p에 빨간색 글꼴을 설정했습니다.
그러나 인라인 스타일은 특정 HTML 요소에만 적용할 수 있기 때문에 사용이 제한됩니다. 물론 대규모 웹사이트의 유지 관리에도 도움이 되지 않습니다. 따라서 일반적으로 사용을 권장하지 않습니다. 인라인 스타일.
2. 내부 스타일 시트
내부 스타일 시트는 헤드 태그의 스타일 태그에 스타일 코드를 배치합니다. 해당 스타일은 현재 페이지에서만 유효하며 다른 페이지에서는 사용할 수 없습니다. 특정 페이지의 스타일을 설정하는 데 사용할 수 있습니다.
예제는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>위 코드에서는 head 태그 내부에 스타일을 배치하고 요소 p의 글꼴 색상을 빨간색(#FF0000)으로 설정하여 단락의 글꼴 색상을 변경했습니다.
3. 외부 스타일 시트
외부 스타일 시트는 CSS 코드를 외부 CSS 파일에 저장한 후 링크 태그를 통해 HTML 파일에 연결합니다. 이 방법을 사용하면 별도의 스타일 시트에서 스타일 규칙을 정의한 다음 이를 여러 HTML 페이지에 적용할 수 있습니다.
샘플 코드는 다음과 같습니다.
CSS 파일(style.css):
p {
color: red;
}HTML 코드:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>这是一个段落。</p> </body> </html>
위 코드를 사용하면 "style.css" 파일의 스타일 규칙으로 이동할 수 있으므로 여러 페이지에서 사용할 수 있습니다. 동일한 스타일 코드를 사용하세요.
4. 스타일 시트 가져오기
스타일 시트 가져오기는 외부 스타일 시트와 거의 동일한 기능이지만 @import 태그를 통해 CSS 파일을 가져옵니다. 샘플 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <style> @import url(style.css); </style> </head> <body> <p>这是一个段落。</p> </body> </html>
위 코드는 외부 스타일 시트 방식과 유사하지만 스타일 코드를 외부 CSS 파일(예: "style.css")에 배치하지만 가져오기 위해 @import 태그를 사용합니다. CSS 파일을 HTML 파일로 변환합니다.
요약:
웹 디자인 및 개발에 있어 CSS와 HTML은 모두 매우 중요한 언어이며 상호 의존적입니다. HTML에서는 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트, 가져온 스타일 시트 등 네 가지 방법으로 CSS 스타일을 추가할 수 있습니다. 다양한 방법은 상황에 따라 장점과 단점이 다릅니다. 개발자는 실제 상황에 따라 선택을 해야 합니다.
위 내용은 HTML에 CSS를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
