1. 内部样式表
使用 <style> 标签在HTML文件中嵌入CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #0066cc;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph with some text.</p>
</body>
</html>
2. 外部样式表
将CSS规则放入一个独立的外部样式表文件，然后在HTML文件中使用 <link> 标签引用它。
<!-- styles.css -->
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #0066cc;
}
p {
font-size: 16px;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph with some text.</p>
</body>
</html>
3. 行内样式
直接在HTML元素中使用 style 属性定义样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML CSS Example</title>
</head>
<body>
<h1 style="color: #0066cc;">This is a Heading</h1>
<p style="font-size: 16px;">This is a paragraph with some text.</p>
</body>
</html>
这些示例演示了在HTML中如何使用CSS来设置背景颜色、字体、颜色等样式。在实际项目中，通常使用外部样式表或内部样式表，以便更好地组织和维护样式。
转载请注明出处：http://www.zyzy.cn/article/detail/3119/HTML