CSS 스타일을 호출하는 방법
- PHPz원래의
- 2023-04-21 11:26:131175검색
인터넷의 지속적인 발전과 함께 웹 디자인과 개발이 점점 더 중요해지고 있습니다. CSS(Cascading Style Sheet)는 웹 페이지의 스타일을 제어하는 데 사용되는 언어이자, 웹 개발에 있어서 반드시 숙달해야 하는 기술이기도 합니다. 그러나 일부 초보자는 CSS 스타일을 호출하는 방법을 모를 수도 있습니다. 이 기사에서는 CSS 스타일 호출 방법을 자세히 소개합니다.
1. 포함된 스타일 시트
포함된 스타일 시트를 정의하려면 HTML 파일의 스타일 태그를 사용하세요. 스타일 시트에 정의된 스타일은 다음과 같이 현재 페이지에만 유효합니다.
<!DOCTYPE html>
<html>
<head>
<title>内嵌样式表</title>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>欢迎访问我的网站</h1>
<p>这里是我的个人主页，欢迎来逛逛。</p>
</body>
</html>
위의 예에서는 두 가지 스타일은 스타일 태그를 통해 내부적으로 정의됩니다. 웹 페이지의 배경색과 제목 글꼴 색상을 설정하는 데 사용되는 스타일입니다. 코드를 실행하면 페이지의 배경색이 회색으로 변경되고 제목의 글꼴 색상이 빨간색으로 변경되는 것을 확인할 수 있습니다.
2. 외부 스타일 시트
외부 스타일 시트를 소개하려면 HTML 파일의 링크 태그를 사용하세요. 이 스타일 시트는 HTML 파일에 포함되지 않지만 CSS 파일에 독립적으로 존재하며 여러 HTML에서 공유할 수 있습니다. 다음과 같이 HTML 파일의 구조를 더 간결하고 쉽게 유지 관리할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>外部样式表</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>欢迎访问我的网站</h1> <p>这里是我的个人主页，欢迎来逛逛。</p> </body> </html>
위의 예에서는 style.css라는 이름의 CSS 파일이 이 파일에 정의될 수 있으며, 스타일 재사용을 위해 이 스타일 시트를 여러 HTML 파일로 공유할 수 있습니다. style.css에서 스타일을 정의하는 방법은 인라인 스타일 시트와 유사합니다. 예:
body {
background-color: #f0f0f0;
}
h1 {
color: red;
}
이 예에서는 body 선택기를 사용하여 웹 페이지의 배경색을 설정하고 h1 선택기를 사용하여 설정합니다. 제목 글꼴 색상입니다. 이 스타일 시트가 여러 HTML 파일에서 참조되면 이러한 스타일이 공유됩니다.
3. 인라인 스타일
인라인 스타일 시트는 HTML 태그에서 스타일을 정의합니다. 스타일은 다음과 같이 특정 태그에 직접 적용될 수 있습니다.
<!DOCTYPE html> <html> <head> <title>内联样式表</title> </head> <body> <h1 style="color:red">欢迎访问我的网站</h1> <p>这里是我的个人主页，欢迎来逛逛。</p> </body> </html>
위 예에서는 인라인 스타일 시트가 h1 태그에 정의되어 있습니다. 제목 글꼴 색상을 빨간색으로 설정합니다. 인라인 스타일 시트 및 외부 스타일 시트와 달리 인라인 스타일 시트는 현재 마크업에만 유효하며 재사용할 수 없습니다. 스타일이 많으면 HTML 코드가 무질서하게 나타나 유지 관리에 도움이 되지 않습니다.
요약:
요약하면 HTML 파일에서 CSS 스타일을 호출하는 방법에는 내장 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트 등 세 가지가 있습니다. 복잡한 웹 애플리케이션을 개발하려면 외부 스타일 시트 방식을 사용하는 것이 좋습니다. 여러 HTML 파일에서 스타일을 공유할 수 있어 개발 및 유지 관리가 더 쉬워지기 때문입니다. 그러나 간단한 애플리케이션의 경우 인라인 스타일 시트와 인라인 스타일 시트도 좋은 선택입니다. 다양한 시나리오와 요구 사항에는 다양한 기술 선택이 필요합니다. 위의 CSS 스타일 호출 방법을 익히면 웹 개발을 더욱 효율적이고 유연하게 만들 수 있습니다.
위 내용은 CSS 스타일을 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!