# CSS3教程 - 2 开发环境

开始之前，先准备一下开发环境。

# 2.1 编辑器的选择

开发工具现在最常用的就是 Visual Studio Code（简称VS Code）、WebStorm。

这里推荐免费的用VS Code，如果用收费的就用WebStorm（可以说是最牛逼的开发工具）。

下面我们在学习的过程中也是选择使用的VS Code，VS Code强大的地方就是它可以安装很多插件。

官方地址：https://code.visualstudio.com，下载安装即可。

VS Code 有明亮和黑暗两种主题，按自己喜好选择。

# 2.2 安装VS Code插件

为 VSCode 安装插件，便于我们进行更好的开发工作。

点击左侧的插件菜单，输入要搜索的插件，点击安装就可以，非常的easy。

下面我们安装如下插件：

Chinese (Simplified) Language Pack for Visual Studio Code：中文（简体）语言包，安装完成，VS Code会显示为中文，如果习惯使用英文，可以不安装；
Ayu：简单的主题与明亮的颜色，可以不安装，VS Code 本身也有明亮的主题。
vscode-icons：好看的图标，可以不安装，只是让各个文件有对应好看的图标
Live Server：A Quick Development Live Server with live browser reload，即提供一个 live 服务器，并且支持代码与浏览器之间的实时同步刷新，当我们编写完代码后保存，浏览器会自动刷新，可以实时看到效果，安装。

# 2.3 新建工作区

首先在指定的目录下（自己想放的路径下）新建一个文件夹作为工作区，例如我这里新建了一个 hello-css3 的文件夹，然后打开VS Code，用 VS Code 打开新建的文件夹。

打开的时候可能会提示是否信任，点击信任即可。

然后新建 HTML 页面，点击右上角的 新建文件，输入文件名即可。

新建页面完成，在页面中编写 HTML 源码，在输入 ! 后，会有提示，选择一个 ! 的提示，回车，就会自动生成 HTML5 的基本结构，太方便了。

生成的 HTML5 基本结构

# 2.4 使用插件Live-Server

上面已经安装了Live-Server，现在说明一下如何使用。

# 1 使用 Live-Server 运行页面

按照之前编写 HTML5 基本结构中的代码，编辑到上面新建的 index.html 中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>网页的标题</title>
  </head>
  
  <body>
    <!-- h1网页的一级标题 -->
    <h1>网页的大标题</h1>
  </body>
</html>