1、内联样式
内联样式是将CSS直接应用到HTML元素上，通过元素的style属性。这种方法适用于单个元素的样式定制，但不推荐用于大规模样式定义，因为它不利于样式的重用和维护。直接在HTML元素中使用 style 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式示例</title>
</head>
<body>
<h1 style="color: red; font-size: 24px;">这是一个红色的标题</h1>
<p style="color: blue; background-color: yellow;">这是一个蓝色文字和黄色背景的段落。</p>
</body>
</html>
2、内部样式表
内部样式表通过在HTML文档的<head>部分使用<style>标签定义。这种方法适用于单个页面的样式定义，可以集中管理该页面的所有样式。在HTML文档的 <head>部分使用 <style> 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<style>
body {
font-family: Arial, sans-serif; /* 设置页面的字体 */
background-color: #f4f4f4; /* 设置页面的背景颜色 */
margin: 0;
padding: 20px;
}
h1 {
color: navy; /* 设置标题的颜色 */
text-align: center; /* 标题居中对齐 */
}
p {
color: #333; /* 设置段落文字颜色 */
line-height: 1.6; /* 设置行高 */
}
.highlight {
color: red; /* 为具有highlight类的元素设置文字颜色 */
font-weight: bold; /* 加粗字体 */
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个示例网页，演示如何使用内部样式表来设计页面。</p>
<p class="highlight">这是一段高亮显示的文本。</p>
</body>
</html>
3、外部样式表
通过创建一个单独的CSS文件，然后在HTML文件的<head>部分通过<link>标签引入。这是最常用且推荐的方法，特别适合需要统一样式的多页面网站或大型项目。创建一个单独的CSS文件，并通过 <link> 标签在HTML的 <head> 部分链接。
1）styles.css
可以编写所有的CSS规则。
/* styles.css */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
h1 {
color: #007BFF;
}
p {
margin-bottom: 20px;
}
2）HTML文件
要在HTML文件中使用这个外部样式表，需要在HTML的<head>部分使用<link>标签来链接这个CSS文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入外部样式表 -->
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph to demonstrate the external CSS styling.</p>
</body>
</html>