Pycharm 简明教程
Pycharm - HTML and CSS Integration
PyCharm 编辑器很好地支持 HTML 和 CSS。PyCharm 编辑器包括一个特殊的速记,并为 HTML 提供标签完成功能。
HTML and CSS are well supported in PyCharm Editor. PyCharm Editor includes a special shorthand and provides tag completion for HTML.
Emmet
Emmet 是在 PyCharm 编辑器中使用的速记。它包括各种功能,例如缩写预览、自动 URL 识别和 HTML 和 CSS 文件的编辑点。设置部分的用户界面显示在下面的屏幕截图中 −
Emmet is the shorthand used in PyCharm editor. It includes various features such as abbreviation preview, automatic URL recognition and edit points, for HTML and CSS files.The user interface of the settings section is shown in the screenshot given below −

Creating HTML and CSS files
PyCharm 具有用于创建 HTML 和 CSS 文件的内置功能。创建新的 HTML 和 CSS 文件的基本步骤如下 −
PyCharm includes an inbuilt feature for creating HTML and CSS files. The basic steps for creating new HTML and CSS files are as follows −

现在,创建 HTML 文件时,需在项目中指定文件名称,如下所示 −
Now, mention the name of file while creating HTML files in the project as shown below −

这将创建 sample-file.html 文件,如下所示 −
This creates the sample-file.html file as shown below −

Creating CSS file
创建 CSS 文件的步骤如下 −
The steps for creating a CSS file are shown here −
从 New 菜单中,选择 File 选项,如下所示 −
From the New menu, select the File option as shown below −

创建时指定 CSS 名称,如下所示 −
Specify the name of CSS during its creation as shown here −

您可以看到完成的项目结构,其中包含以不同颜色组合指定的各种文件,如下所示 −
You can see the complete project structure with various files mentioned in different color combinations as shown below −
