VS CodeVisual Studio Code简称 VS Code是一个由微软开发同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器编辑器中内置了扩展程序管理的功能。VS Code 安装教程参考VSCode 教程 | 菜鸟教程安装必备插件 (Extensions):点击 VS Code 左侧边栏的方块图标Extensions搜索并安装以下两个插件它们对新手至关重要Live Server:允许你在浏览器中实时预览网页保存代码后浏览器会自动刷新。HTML CSS Support:增强 CSS 的智能提示。第一步: 建立项目结构在你的电脑上创建一个名为 my-first-css 的文件夹在 VS Code 中打开 点击 VS Code 左上角的 File - Open Folder...选择刚才的文件夹。在左侧资源管理器空白处右键新建文件 index.html (这是网页骨架)。再次右键新建文件 style.css (这是网页的皮肤)。第二步编写 HTML 骨架CSS 必须依附于 HTML 存在以下是 index.html 文件代码。在body标签内输入以下代码并一定要加上link标签来关联 CSS 文件!DOCTYPE html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的 CSS 练习/title link relstylesheet hrefstyle.css /head body div classcard h1Hello, CSS!/h1 p这是我用 VS Code 写的第一个样式卡片。/p button点击我/button /div /body /html第三步编写 CSS 样式在 style.css 文件中输入以下代码:实例/* 给整个页面加个背景色 */body {background-color: #f0f2f5;font-family: Segoe UI, sans-serif;display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 占满屏幕高度 */margin: 0;}/* 设计卡片样式 */.card {background-color: white;width: 300px;padding: 30px;border-radius: 15px; /* 圆角 */box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 阴影 */text-align: center;}/* 标题颜色 */h1 {color: #333;}/* 按钮样式 */button {background-color: #007bff;color: white;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;transition: background 0.3s; /* 动画过渡 */}/* 鼠标悬停在按钮上的效果 */button:hover {background-color: #0056b3;}第四步运行与预览回到index.html文件。在编辑区任意位置点击鼠标右键。选择Open with Live Server。此时你的默认浏览器会自动弹出你应该能看到一个居中的白色卡片上面有标题和按钮。当你把鼠标放在按钮上时颜色会变深。运行显示结果类似如下: