上查看所有课程
CSS（层叠样式表）是一种在网页开发中广泛使用的语言，用于对 HTML 等标记文档进行样式设置。
要运行你的 CSS 程序，你需要一个网页浏览器和一个文本编辑器。既然你正在阅读本文，说明你已经安装了网页浏览器，所以我们接下来将介绍如何安装文本编辑器。
但是，如果你不想安装文本编辑器，只想试用 CSS，你可以使用我们的 CSS 编辑器。
在你的电脑上安装 VS Code
VS Code 是一种广泛用于 CSS 和一般编程的代码编辑器。所以接下来，我们将介绍在 Windows、macOS 和 Linux (Ubuntu) 上安装 VS Code 的方法
访问 VS Code 官方网站并下载 Windows 安装程序。下载完成后，运行安装程序并按照安装过程进行操作。
现在，你可以在你的设备上编写 CSS 程序了。
要在你的 Mac 上安装 VS Code，只需遵循以下步骤
要在 Mac 上安装 VS Code，请从 VS Code 官方网站 下载压缩文件。下载完成后，打开压缩文件。
在 Finder 中，打开一个新窗口并导航到“应用程序”文件夹。要从 zip 文件安装 VS Code 应用程序，请将其拖到“应用程序”文件夹中。
您现在可以直接从应用程序文件夹启动 VS Code。
Linux 有各种发行版，它们的安装过程略有不同。目前，我们将重点介绍 Ubuntu。
打开终端并输入，
sudo apt update 此命令会更新您的软件包列表，以确保您获得软件的最新版本。
继续使用以下命令安装 VS Code
sudo snap install code --classic 命令执行完成后，VS Code 即可使用。
运行你的第一个 CSS 程序
你需要设置一些东西来运行你的第一个 CSS 程序。
- 创建新文件
- 在 VS Code 中安装 Live Server 扩展
- 编写你的程序
- 运行你的程序
1. 创建新文件。
首先，打开 VS Code，点击顶部菜单中的文件，然后选择新建文件。
然后，通过再次单击文件，然后另存为，并输入以.html结尾的文件名，保存此文件。（这里，我们将其另存为index.html）再次使用类似步骤，创建另一个以.css结尾的文件并将其另存为style.css。
2. 在 VS Code 中安装 Live Server 扩展
在编码之前，请确保在 VS Code 中安装了 Live Server 扩展。打开 VS Code 并单击左侧边栏上的扩展。搜索 Live Server 扩展并单击安装。
3. 编写你的程序
现在，将以下代码写入你的 hello.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, World</h1>
</body>
</html>
以下行
<link rel="stylesheet" href="style.css">告诉浏览器加载 style.css 文件中定义的样式并将其应用于 HTML 文档
同样，将以下内容添加到你的 style.css 文件中
h1 {
color: red;
}
4. 运行你的程序
点击屏幕左下角的上线选项。这应该会自动在你的浏览器上打开一个新标签页，你会在屏幕上看到红色的Hello World。
现在你已经设置好在电脑上运行 CSS 程序所需的一切，在下一个教程中，你将学习 CSS 中的基本程序是如何工作的。