CSS 编辑器

可以使用专业的 CSS 编辑器来编辑 CSS，为大家推荐几款常用的编辑器：

你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

接下来我们将为大家演示如何使用 VS Code 工具来创建 CSS 文件。

VS Code

Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

VS Code 安装教程参考：https://www.runoob.com/vscode/vscode-tutorial.html

安装必备插件 (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 charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的 CSS 练习</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <h1>Hello, 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;
}

第四步：运行与预览

  1. 回到 index.html 文件。
  2. 在编辑区任意位置点击 鼠标右键。
  3. 选择 "Open with Live Server"。

此时，你的默认浏览器会自动弹出，你应该能看到一个居中的白色卡片，上面有标题和按钮。当你把鼠标放在按钮上时，颜色会变深。

运行显示结果类似如下: