如何使用代码编辑器设置CSS和HTML练习项目

介绍

在本教程中，您将设置探索 CSS 和构建网站所需的文件夹和文件。使用代码编辑器，您将为我们的网站创建一个项目目录，为我们的 CSS 代码创建一个文件夹和文件，为我们的 HTML 代码创建一个文件，以及一个用于图像的文件夹。本教程系列使用 Visual Studio Code，一个可免费用于 Mac、Windows 或 Linux 的代码编辑器，但您可以使用您喜欢的任何代码编辑器。请注意，如果您使用不同的编辑器，可能需要稍微修改某些说明。

如何创建 HTML 和 CSS 文件和文件夹

打开您喜欢的文本编辑器后，打开一个新的项目文件夹并将其命名为 css-practice。您将使用此文件夹来存储您在本教程系列课程中创建的所有文件和文件夹。

要在 Visual Studio Code 中创建新的项目文件夹，请导航到顶部菜单中的“文件”菜单项，然后选择“将文件夹添加到工作区”。在新窗口中，单击“新建文件夹”按钮并创建一个名为 css-practice 的新文件夹：

接下来，在 css-practice 中创建一个新文件夹，并将其命名为 css。在这个文件夹中，在您的项目目录中打开一个新文件并将其保存为 styles.css——这是您将用来存储我们的 CSS 样式规则的文件。如果您使用 Visual Studio Code，您可以在 css-practice 文件夹中使用 Right Click（在 Windows 上）或 CTRL + Left Click（在 Mac 上）创建一个新文件夹，选择“New文件夹”并创建 css 文件夹。然后，在新建的css文件夹中点击Right Click（Windows）或CTRL + Left Click（Mac），选择“新建文件”，创建文件[X129X ] 如下图所示：

保存文件并保持打开状态。

您还需要创建一个文件来添加我们的 HTML 内容——将在浏览器中呈现的文本、图像和 HTML 元素。在项目目录 css-practice 中，打开一个额外的新文件并将其另存为 index.html，方法与您在上面创建 styles.css 文件的方式相同。 确保将这个 index.html 文件保存在 css-practice 文件夹中，而不是 css 文件夹中。

接下来，您需要在 index.html 文档中添加一行代码，指示浏览器使用 styles.css 文件作为我们的样式表。为此，您将使用 HTML <link> 标记并链接到 styles.css 文件。将以下代码片段添加到您的 HTML 文档中：

索引.html

<link rel="stylesheet" href="css/styles.css">

此代码片段告诉浏览器根据位于 css/styles.css. 的样式表解释 HTML 代码在整个教程系列中向 index.html 文件添加或删除内容时，请确保不要删除此行. 保存您的 index.html 文件并保持打开状态。

最后，在 css-practice 中创建一个附加文件夹，并将其命名为 images，方法与您在上面创建的 css 文件夹相同。此文件夹将用于保存您在本教程系列中使用的任何图像。

您现在应该有一个名为 css-practice 的项目文件夹，其中包含在本教程系列中探索 CSS 所需的文件夹和文件：

一个名为 css 的文件夹，其中包含文件 styles.css
一个名为 images 的空文件夹
一个名为 index.html 的文件

如果您使用的是 Visual Studio Code，您的编辑器现在应该显示以下文件树和打开的文件：

请注意，文件名包括扩展名（.html 和 .css），这些扩展名指的是它们包含的内容类型。您将在后续教程的动手练习中向这些文件添加内容。

CSS 和 HTML 的调试和故障排除

使用 HTML 和 CSS 时，精度很重要。即使是额外的空格或输入错误的字符也会使您的代码无法按预期工作。

如果您的 HTML 或 CSS 代码未按预期在浏览器中呈现，请确保您编写的代码与教程中所写的完全一致。尽管我们鼓励您出于学习目的手动编写代码，但复制和粘贴有时会有助于确保您的代码与示例匹配。

HTML 和 CSS 错误可能由多种原因引起。检查您的标记和 CSS 规则是否有多余或缺失的空格、缺失或拼写错误的标签以及缺失或不正确的标点或字符。您还应该确保您不会意外使用文字处理器经常使用的“卷曲”或“智能”引号，例如 “ 和 "。弯引号是为人类可读的文本设计的，并且会导致代码错误，因为它们不会被浏览器识别为引号。通过直接在代码编辑器中输入引号，您可以确保您使用的是正确的类型。

此外，每次更改代码时，请务必先保存文件，然后再将其重新加载到浏览器中以检查结果。

关于自动 HTML 支持功能的快速说明

一些代码编辑器（例如我们在本系列中使用的 Visual Studio Code 编辑器）为编写 HTML 代码提供自动支持。对于 Visual Studio Code，支持的包括智能建议和自动完成。虽然这种支持通常很有用，但请注意，如果您不习惯使用这些支持功能，您可能会生成额外的代码，这些代码会产生错误。如果您发现这些功能让人分心，您可以在代码编辑器的首选项中将其关闭。

结论

您现在已准备好继续本教程系列。在下一个教程中，您将开始探索如何使用 CSS 规则来控制网页上 HTML 内容的样式和布局。