CSS 编辑器

编写 CSS 本质上就是在写「文本」，所以任何能编辑纯文本的软件都可以用来写 CSS。下面从零基础到进阶，介绍几种常见选择。

1. 记事本 / 系统自带文本编辑器

适合：只想先试试、不想装软件时。

• Windows：记事本（Notepad）
• macOS：文本编辑（TextEdit），需在「格式」里选「制作纯文本」

优点：无需安装，随手可用。
缺点：没有高亮、没有提示、没有自动补全，写多了会不方便。

建议

只适合写几行 CSS 体验一下。正式学习或做项目时，建议换用下面任意一种编辑器。

2. 代码编辑器（推荐）

这类编辑器专门为写代码设计，会提供语法高亮、自动补全、多文件管理等功能，写 CSS 会轻松很多。

Visual Studio Code（VS Code）

• 下载：https://code.visualstudio.com/
• 特点：免费、跨平台、插件多、社区活跃，是目前最流行的前端编辑器之一。
• 写 CSS 时：自带 HTML/CSS 高亮和补全，也可以安装「Live Server」等插件在浏览器里实时预览页面。

常用操作：

• 新建文件：Ctrl + N（Windows）或 Cmd + N（Mac）
• 保存：Ctrl + S / Cmd + S
• 在 HTML 里写 CSS 时，输入 style 或选择器名时会有补全提示

Cursor

• 基于 VS Code，集成 AI 辅助写代码，适合在「边学边问」的场景下写 HTML/CSS。

Sublime Text

• 轻量、启动快，也支持 CSS 高亮和插件，可当作备选。

3. 在线编辑器（不用安装）

如果暂时不想在电脑上装软件，可以用在线编辑器写 HTML + CSS，在网页里直接看效果。

• CodePen：https://codepen.io/ — 写 HTML、CSS、JS，实时预览。
• JSFiddle：https://jsfiddle.net/ — 类似，适合做小 demo。
• W3School 在线编辑器：教程里常带的「试一试」环境，适合跟着教程练手。

优点：不用安装，分享链接即可给别人看效果。
缺点：不适合做多文件、大项目，本地还是要用编辑器。

4. 集成开发环境（IDE）

如 WebStorm、PhpStorm 等，会包含更强大的代码提示、重构、版本管理集成等，适合做完整网站项目。对「只学 CSS」来说，不是必须，VS Code 就够用。

如何用编辑器写 CSS？

1. 新建文件：例如 style.css（纯 CSS）或 index.html（在 <style> 里写 CSS）。
2. 写代码：在 .css 文件或 <style>...</style> 里写选择器和属性。
3. 保存：养成经常 Ctrl + S / Cmd + S 保存的习惯。
4. 预览：
   • 若用 .css 文件，需在 HTML 里用 <link href="style.css" rel="stylesheet"> 引入，再用浏览器打开该 HTML。
   • 若用 VS Code，可安装「Live Server」右键「Open with Live Server」，保存后浏览器会自动刷新。

小结

• 写 CSS 用任意文本编辑器都可以，但代码编辑器（如 VS Code）会更好用。
• VS Code 免费、通用，是学习 CSS 的推荐选择。
• 在线编辑器（如 CodePen）适合不安装软件、快速试验和分享。
• 选好一个编辑器后，坚持用一段时间，熟悉快捷键和补全，写 CSS 会越来越顺手。

下一步我们将介绍「CSS AI 编程」和「CSS 语法」，让你真正开始写第一条样式。