HTML 페이지에 CSS를 작성하는 방법
- 王林원래의
- 2023-05-09 10:59:372511검색
CSS(Cascading Style Sheets)는 HTML 페이지를 디자인하고 아름답게 만드는 데 사용되는 기술입니다. CSS 스타일은 HTML 문서 내의 c9ccee2e6ea535a969eb3f532ad9fe89 태그를 통해 또는 외부 CSS 파일에서 생성하고 참조할 수 있습니다.
다음은 HTML 페이지에 CSS 스타일을 작성하는 방법에 대한 자세한 소개입니다.
- 인라인
인라인은 c9ccee2e6ea535a969eb3f532ad9fe89 태그를 사용하여 CSS 코드를 래핑하여 HTML 페이지에 직접 CSS 스타일을 포함하는 것을 말합니다. 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌式CSS样式表</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一段普通的文字</p>
</body>
</html>위의 예에서는 먼저 e8e496c15ba93d81f6ea4fe5f55a2244 태그를 사용하여 문서의 문자 집합을 설정한 다음 93f0f5c25f18dab9d176bd4f6de5d30e 태그에 c9ccee2e6ea535a969eb3f532ad9fe89 태그를 사용하여 CSS 스타일을 작성합니다. . c9ccee2e6ea535a969eb3f532ad9fe89 태그 내에서 문서 배경색, 글꼴 스타일 및 제목 텍스트 색상을 설정합니다.
c9ccee2e6ea535a969eb3f532ad9fe89 태그는 93f0f5c25f18dab9d176bd4f6de5d30e 태그 내에 배치되어야 하며 모든 CSS 스타일은 c9ccee2e6ea535a969eb3f532ad9fe89 태그 내에 배치되어야 합니다. 6c04bd5ca3fcae76e30b72ad730ca86d 태그 내에서 CSS 스타일을 직접 사용할 수 없습니다.
- 외부 스타일
외부 스타일 시트는 CSS 스타일을 별도의 파일에 넣은 다음 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 통해 HTML 페이지에 참조하는 것을 의미합니다. 외부 스타일 시트는 다양한 용도로 사용할 수 있고 유지 관리가 쉽다는 장점이 있습니다.
이 경우 CSS 스타일을 저장하려면 확장자가 .css인 파일을 사용해야 합니다. 파일은 서버나 로컬 컴퓨터에 위치할 수 있습니다. 예:
/* css/style.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}HTML 페이지에서 외부 CSS 파일을 HTML 문서와 연결하려면 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용해야 합니다. 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部式CSS样式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一段普通的文字</p>
</body>
</html>위 코드에서는 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하여 style.css 파일을 HTML 문서와 연결합니다. href 속성은 CSS 파일의 URL이나 상대 경로를 가리켜야 합니다. CSS 파일이 HTML 문서와 동일한 디렉토리에 있는 경우 href 속성은 CSS 파일 이름을 직접 가리킬 수 있습니다.
- 인라인 스타일
인라인 스타일은 CSS 스타일을 HTML 요소에 직접 적용하는 것을 말합니다. 스타일시트에서 정의하는 대신 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内式CSS样式表</title>
</head>
<body>
<h1 style="color: #333; text-align: center;">欢迎来到我的网站</h1>
<p style="font-family: Arial, sans-serif;">这是一段普通的文字</p>
</body>
</html>Inline에서는 HTML 요소의 스타일 속성에 CSS 스타일을 정의합니다. 각 속성은 세미콜론으로 구분해야 하며 속성 값은 따옴표로 묶어야 합니다. 인라인을 사용하면 HTML 코드가 복잡해지고 유지 관리가 어려워질 수 있습니다. 따라서 실제 프로젝트에서는 인라인을 사용하는 것이 일반적으로 권장되지 않습니다.
요약
HTML 페이지에서 CSS 스타일을 작성할 때 인라인, 외부 및 인라인 방법을 사용하여 이를 구현할 수 있습니다. 그 중 외부 스타일(External Style)이 가장 일반적으로 사용되는 방식으로, 스타일을 하나의 파일에 집중시켜 유지 관리가 용이하고 다양한 용도로 사용할 수 있습니다. 인라인 및 인라인 형식의 경우 필요한 경우에만 사용하는 것이 좋습니다. 그렇지 않으면 HTML 코드가 복잡해지고 유지 관리가 어려워질 수 있습니다.
위 내용은 HTML 페이지에 CSS를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!