웹 디자인에서는 CSS(Cascading Style Sheets)가 널리 사용됩니다. CSS는 웹 페이지에 스타일, 서식, 레이아웃과 같은 기능을 추가하여 웹 페이지를 더욱 아름답고 읽기 쉽게 만들 수 있습니다. 따라서 CSS 파일을 연결하는 방법을 아는 것은 웹 디자인 학습에 중요한 단계입니다. 다음으로 이 글에서는 CSS를 연결하는 방법을 자세히 설명합니다.
1. 인라인 CSS
인라인 CSS는 CSS 코드를 HTML 파일에 직접 삽입하는 방법입니다. 인라인 CSS를 사용하려면 HTML head 태그에 style 태그를 추가하고 CSS 코드를 작성해야 합니다. 예는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>이 예에서는 <style> 태그를 사용하여 CSS 코드를 HTML 파일에 삽입했습니다. CSS 코드는 h1 및 p 태그의 스타일을 정의하여 h1 태그의 텍스트를 파란색으로, p 태그의 텍스트를 빨간색으로 만들고 글꼴 크기를 늘립니다. <style>标签将CSS代码嵌入到HTML文件中。CSS代码定义了h1和p标签的样式，使h1标签的文本变为蓝色，p标签的文本变为红色，并增加了字体大小。
尽管内嵌CSS非常方便，但在实践中很少使用。这是因为内嵌CSS会使HTML文件变得混乱，难以维护。当网站规模逐渐扩大时，使用外部CSS文件是更好的方法。
二、外部CSS文件
外部CSS文件是将CSS代码存储在单独的文件中，然后在HTML文件中引用该文件的一种方法。
首先，您需要创建一个CSS文件并将所有CSS代码存储在该文件中。命名您的文件时，请使用.css
.css를 사용하세요. CSS 파일을 생성할 때 작성하는 코드가 잘 구조화되어 있는지 확인해야 합니다. 예는 다음과 같습니다. /* styles.css */
h1 {
color: blue;
}
p {
color: red;
font-size: 20px;
}<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
<!DOCTYPE html> <html> <head> </head> <body> <h1 style="color:blue;">This is a heading</h1> <p style="color:red;font-size:20px;">This is a paragraph.</p> </body> </html>
/* styles.css */
@import url("small-styles.css") screen and (max-width: 600px);
h1 {
color: blue;
}
p {
color: red;
}
/* small-styles.css */
p {
font-size: 20px;
}위 내용은 CSS를 연결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
