CSS를 호출하는 방법
- WBOY원래의
- 2023-05-27 11:39:07848검색
CSS(Cascading Style Sheets)는 웹 페이지 스타일을 정의하는 데 사용되는 언어로 웹 페이지의 레이아웃, 색상, 글꼴 등을 제어할 수 있습니다. 웹페이지 제작에서는 일반적으로 웹페이지의 스타일 효과를 얻기 위해 CSS 파일과 HTML 파일을 결합해야 합니다. 그럼 이제 CSS를 호출하는 방법에 대해 이야기해 보겠습니다.
- 내부 스타일 시트
내부 스타일 시트는 HTML 파일의 헤드에 CSS 스타일을 정의하여 쉽게 전환할 수 있도록 하고 해당 코드를 HTML 파일에 삽입하는 방식입니다. 이 방법은 현재 페이지에만 필요한 특정 스타일에 적합하며 다음과 같이 호출됩니다.
<head>
<title>我的页面</title>
<style>
/* CSS样式代码 */
</style>
</head>- 외부 스타일 시트
외부 스타일 시트는 다른 파일에 정의된 후 전달되는 CSS 스타일입니다. HTML 파일 링크는 파일의 메소드를 참조합니다. 이 방법은 여러 페이지에 동일한 스타일이 필요한 상황에 적합하며 다음과 같이 호출됩니다.
(1) CSS 파일에 스타일 코드 정의
/* style.css */
body {
background: #f6f6f6;
font-family: Arial, "Helvetica Neue", sans-serif;
font-size: 14px;
}
h1 {
font-size: 24px;
font-weight: bold;
color: #333;
}(2) HTML 파일에 CSS 파일 연결
<head>
<title>我的页面</title>
<link rel="stylesheet" href="style.css">
</head>- 인라인 스타일 시트
인라인 스타일 시트는 CSS 스타일을 HTML 태그에 직접 작성하는 방법입니다. 이 방법은 하나의 태그에 대해서만 스타일을 정의하면 되는 상황에 적합합니다. 호출 방법은 다음과 같습니다.
<h1 style="color:red;">这是一个标题</h1>
- 스타일 시트 가져오기
스타일 시트 가져오기는 다른 파일에 CSS 스타일을 정의하고 그런 다음 이 파일을 다른 CSS 파일로 가져오는 방법에 전달합니다. 이 방법은 외부 스타일 시트 구조와 유사하지만 호출 방법이 약간 다릅니다.
(1) main.css 파일에 style.css 파일을 도입합니다.
/* main.css */
@import url('style.css');
/* 下面是对样式的调用 */
body {
margin: 0;
}
.container {
width: 960px;
margin: 0 auto;
}(2) HTML 파일
<head>
<title>我的页面</title>
<link rel="stylesheet" href="main.css">
</head> - Inherited Styles
Inherited styles은 상위 태그의 스타일을 하위 태그에 적용하는 방법입니다. 이 방법은 요소의 스타일이 동일한 상황에 적합하며, 상위 태그의 스타일로 코드를 단순화할 수 있습니다. 예:
div {
font-family: Arial, "Helvetica Neue", sans-serif;
font-size: 14px;
color: #333;
}
h1 {
font-size: 24px;
font-weight: bold;
}
/* 这里的h1将继承div中的color和font-family */요약하자면 CSS를 호출하는 방법은 다양하며 실제 필요에 따라 다양한 호출 방법을 선택할 수 있습니다. 웹 페이지 제작 시 적절한 CSS 호출 방법을 사용하면 웹 페이지 스타일의 효과를 더 잘 얻을 수 있고 사용자 경험을 향상시킬 수 있습니다.
위 내용은 CSS를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!