Appearance
CSS开发环境搭建（零配置，5分钟搞定）
2.1 浏览器开发者工具：快速查看/修改CSS样式
打开开发者工具
- 方法1：按F12键
- 方法2：右键点击网页元素，选择「检查」
- 方法3：浏览器菜单 → 更多工具 → 开发者工具
样式面板使用
- 元素选择：点击左上角的选择器图标，然后点击网页上的元素
- 样式查看：在右侧「样式」面板中查看该元素的CSS样式
- 样式修改：直接在样式面板中修改CSS属性值，实时查看效果
- 样式添加：点击「+」号添加新的CSS规则
- 样式禁用：点击样式前的勾选框可以临时禁用样式
常见用途
- 快速调试CSS样式
- 查看元素的盒模型
- 检查样式优先级
- 测试不同设备的显示效果
2.2 VS Code CSS相关配置
安装VS Code
从VS Code官网下载并安装适合你操作系统的版本。
推荐插件
- CSS IntelliSense：提供CSS代码自动补全和提示
- Color Picker：在编辑器中直接选择颜色
- Live Server：启动本地服务器，实时预览网页
- Prettier：自动格式化CSS代码，保持代码风格一致
- CSS Peek：快速查看CSS定义
基础配置
- 字体设置：选择等宽字体，如Consolas或Fira Code
- 缩进设置：建议使用2个空格作为缩进
- 自动保存：开启自动保存功能
- 文件关联：确保.css文件使用正确的语法高亮
2.3 第一个HTML+CSS文件
创建HTML文件
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个CSS页面</title>
<style>
/* 这里将添加CSS样式 */
</style>
</head>
<body>
<h1>欢迎学习CSS！</h1>
<p>这是一个使用CSS美化的页面。</p>
<p>CSS可以让网页变得更加美观。</p>
</body>
</html>添加CSS样式
html
<style>
/* 美化标题 */
h1 {
color: blue;
text-align: center;
font-size: 32px;
}
/* 美化段落 */
p {
color: #333;
font-size: 16px;
line-height: 1.5;
margin: 10px 0;
}
</style>运行页面
- 保存文件为
index.html - 使用Live Server插件打开，或直接在浏览器中打开
2.4 CSS代码运行与调试
常见报错及解决方法
语法错误
- 症状：样式不生效
- 解决：检查CSS语法，确保所有括号和分号都正确
选择器错误
- 症状：样式不应用到目标元素
- 解决：检查选择器是否正确，使用开发者工具确认元素选择器
优先级问题
- 症状：样式被其他样式覆盖
- 解决：检查样式优先级，使用更具体的选择器
路径错误
- 症状：背景图片或外部CSS文件不加载
- 解决：检查文件路径是否正确
调试技巧
- 使用开发者工具：实时查看和修改样式
- 添加注释：标记代码块，提高可读性
- 分步骤测试：每次只修改一个样式，观察效果
- 使用简写属性：简化代码，减少错误
- 参考文档：遇到问题时查阅MDN Web Docs