1. 创建CSS文件
首先，你需要创建一个独立的CSS文件，通常使用 .css 作为文件扩展名。你可以使用文本编辑器，如Visual Studio Code、Sublime Text、Notepad等。
/* style.css */
/* 在这里编写你的CSS规则 */
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
2. 链接CSS文件到HTML文档
将CSS文件链接到HTML文档中，可以通过使用 <link> 元素在文档的 <head> 部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- HTML内容在这里 -->
</body>
</html>
3. 编写CSS规则
在CSS文件中，你可以编写样式规则，这些规则定义了如何样式化HTML元素。每个规则由一个选择器和一组样式声明组成。
/* 选择器 */
body {
/* 样式声明 */
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
4. 选择器
学习各种选择器是CSS中的重要一步。常见的选择器包括标签选择器、类选择器、ID选择器、属性选择器等。
/* 标签选择器 */
p {
font-size: 14px;
}
/* 类选择器 */
.my-class {
color: red;
}
/* ID选择器 */
#my-id {
background-color: blue;
}
5. 实验和调试
在编辑CSS时，不断尝试、实验，查看效果。使用浏览器的开发者工具（通常按下 F12 或右键点击页面并选择 "检查"）来检查元素和样式，帮助调试和调整样式。
6. 学习进阶内容
随着对CSS基础的熟悉，可以深入学习CSS的进阶主题，如盒模型、布局、响应式设计、动画等。
这只是一个简单的入门指南。随着实践和学习，你将更加熟悉CSS，并能够创建出符合设计需求的样式。
转载请注明出处：http://www.zyzy.cn/article/detail/3994/CSS