样式表
借助 PyCharm，您不仅可以在 CSS 中编写样式定义，还可以使用可编译为其的多种语言，例如 Sass、 Less、 SCSS 或 Stylus。
您还可以查阅样式表文档、创建并移动规则集、引入变量等。
开始之前
请确保在设置中启用了 CSS 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，键入 CSS。 有关插件的详细信息，请参阅 管理插件。
代码补全
PyCharm 为属性、其值、选择器、变量和 mixin 提供代码补全。
补全样式表类名
在 HTML 文件、各种类型的模板（例如 Angular 或 Vue.js）以及 JSX 代码中，提供对 CSS、SCSS、Less 和 Sass 类名与 id 的补全。
在 HTML 文件中，PyCharm 会首先建议来自 style 标签以及通过 link 标签链接的文件中的类名和 id。 如果未找到匹配结果，PyCharm 还会建议项目中所有样式表文件里定义的符号。 若要在开始输入之前立即查看项目中定义的所有类名和 id，请连续按两次 Ctrl+Space。
补全来自外部库的样式表类名
借助 PyCharm，即使不将这些库添加到项目依赖项中，您也可以在 HTML 文件中为通过 CDN 链接的 Twitter Bootstrap 或其他 CSS 库的类名获取补全。
打开包含指向外部 CSS 库的 CDN 链接的 HTML 文件。 PyCharm 会高亮显示该链接。
要为该库启用补全，请在链接上按 Alt+Enter ，并在列表中选择 。 或者，将鼠标悬停在链接上并点击 下载库。
该库会添加到 页面上的 JavaScript 库列表中。 有关更多信息，请参阅 配置通过 CDN 链接添加的库。
补全 Sass 和 SCSS 选择器
PyCharm 还为 Sass 和 SCSS 选择器提供补全——包括 嵌套选择器 和 使用和号（&）创建的选择器。
样式表中的云端代码补全和整行代码补全
PyCharm 在 CSS、Less、Sass/SCSS 和 PostCSS 代码中提供 云补全 和 整行补全。
整行代码补全功能使用本地运行的深度学习模型来建议整行代码。 该功能在 PyCharm 中开箱即用，无需额外许可。
在样式表中启用整行代码补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选中 启用本地Full Line 补全建议 复选框，并确保已选中 类似 CSS 复选框。
由 AI Assistant 提供支持的云端补全可基于项目上下文实时自动完成单行、代码块，甚至整个函数。
云端补全会在考虑上下文的情况下建议语法上可接受的解决方案，并预先运行各种 代码检查 ，以拒绝会导致错误的候选项。
启用云端代码补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选中 Enable cloud completion suggestions 复选框，并确保已选中 HTML 复选框。
查找与导航
文档查阅
对于属性和伪元素，PyCharm 可以向您显示相应的 MDN 文章 摘要。 此摘要显示在 文档 弹出窗口中，该窗口会显示属性及其值的简要说明，以及其 Web 平台基线状态。
对于选择器，PyCharm 还显示其 特异性。
查看属性的文档
将文本光标定位在属性上，然后按 Ctrl+Q 或从主菜单中选择 。
当您悬停在某属性上时，PyCharm 会立即在 文档 弹出窗口中显示其引用。
您可以关闭此行为，或配置弹出窗口显示得更快或更慢。请参阅下文的 配置文档弹出窗口的行为。
配置文档弹出窗口的行为
要在将鼠标悬停在代码符号上时关闭自动显示文档，请在弹出窗口中点击
，并禁用 在鼠标移动时显示 选项。要使 文档 弹出窗口显示得更快或更慢，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，然后选中 显示文档弹出窗口 复选框并指定延迟时间。
在浏览器中打开 MDN 文档
在 文档 弹出窗口 Ctrl+Q 中，点击底部的链接。
按 Shift+F1 或在主菜单中选择 。
格式化
使用 PyCharm 内置的格式化程序，您可以重新设置样式表代码片段以及整个文件和文件夹的格式，以满足特定语言的代码样式要求。 格式化程序在您生成或重构代码时也会自动唤醒。
要配置样式表语言的格式化设置，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并配置特定语言的选项，例如制表符和缩进、空格、换行和大括号、硬边距和软边距等。
当您更改设置时， 预览 区域会显示这些更改如何影响格式化。
在 CSS、SCSS 和 Less 上下文中，PyCharm 默认在
import语句和 URL 中对生成的字符串字面量使用双引号。 要使用单引号，请打开 其他 标签，并从 单引号 选项中选择 引号 列表。要在重新格式化后将所选样式应用于整个文件，请选择列表下方的 格式化时强制执行 复选框。
若要重新格式化代码片段，请在编辑器中选择它并按 Ctrl+Alt+L。
要重新格式化文件或文件夹，请在 项目 工具窗口 Alt+1 中选择它并按 Ctrl+Alt+L。 有关详细信息，请参阅 重新格式化并重排代码。
或者，您可以使用 Prettier （Ctrl+Alt+Shift+P）。
重构
借助 PyCharm，您可以将样式表中的表达式转换为变量，并使用 var(--var-name) 语法在 .css 文件中引入这些变量，或使用 $ 语法在 .scss 和 .sass 文件中引入。
引入变量
在编辑器中，将文本光标放在要转换为变量的表达式处，然后按 Ctrl+Alt+V 或从上下文菜单或主菜单中选择 。
如果找到所选表达式的多个出现，请在 找到多个出现位置 列表中选择 仅替换此处 或 替换所有出现。
对于 .scss 和 .sass ，请为变量选择 全局 或 局部 作用域。
在红色边框的字段中，接受建议的变量名或指定自定义名称。 准备就绪后，按 Enter。
使用 PyCharm，您可以从 CSS、SCSS、Sass 或 Less 文件中的现有声明创建新的规则集，甚至可以通过重构和意图操作在文件之间移动整个规则集。
引入规则集
请选择要引入的声明。 如果您只需要一个声明，只需将文本光标放在其中。
按 Alt+Enter ，并在列表中选择 引入规则集。
PyCharm 创建一个具有相同选择器的新规则集，并将选定声明移到其中。 如果选中内容包含注释、嵌套选择器等，它们也会移到新的规则集中。
将规则集移动到其他文件
请将文本光标放在规则集中任意位置并按 F6。
在打开的对话框中，指定要移动规则集的文件。 如果指定的文件不存在，PyCharm将建议创建它。
默认情况下，PyCharm 会自动打开规则集所在的文件。 要更改此行为，请清除 在编辑器中打开 复选框。
常见的重构操作，如 Copy、 Move或 Rename ，也可用。
检查与浏览器的兼容性
除了 在文档弹出窗口中查找外，您还可以即时检查样式表属性与特定浏览器的兼容性。 此检查基于 MDN Browser Compatibility Data ，每当某个属性在目标浏览器之一中不受支持时，系统都会向您显示警告。
启用兼容性检查
在 设置 对话框（Ctrl+Alt+S ），转到 。
展开 CSS 节点并选择 属性与所选浏览器不兼容。 在 选项 区域，选择您要针对的浏览器及其最低版本。
在 选项 区域中，选择用于检查属性可用性的浏览器。 指定所选浏览器的目标版本。
管理颜色
使用 PyCharm，您可以轻松地在样式表中更改颜色值，而无需输入十六进制代码。
要指定颜色，请将插入符号置于
color属性处，按 Ctrl+Space ，然后选择所需的颜色值，或使用 选择颜色... 来选择自定义颜色。
要使用代码代替可读的颜色名称，请按 Alt+Enter 并从列表中选择 将颜色转换为 <颜色编码系统> ，其中<color code system>为 HEX、 HSL、 HWB或 RGB。
要更改颜色，请点击装订区域中的颜色图标，并在弹出窗口中选择所需的颜色。
或者，将插入符号置于颜色属性处，按 Alt+Enter ，在列表中选择 更改颜色 ，然后在弹出窗口中选取所需的颜色。
默认情况下，PyCharm 会在标尺中以图标显示颜色预览。 要在背景中显示颜色预览，请打开 设置 对话框（Ctrl+Alt+S ），转到 并选中 将 CSS 颜色预览显示为背景 复选框。
要恢复装订区域中的颜色预览图标，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并在 通用 区域中选中 颜色预览 复选框。
查看应用于标签的样式
在 HTML 和 XHTML 文件中，PyCharm 可以显示应用于任意标签的所有样式。
从标签的上下文菜单中选择 。
PyCharm 打开 CSS 样式 工具窗口，工具窗口有两个窗格，左侧窗格显示标签的样式，右侧窗格显示它们的定义。 对于每个标签，PyCharm 会打开一个单独的选项卡。
从工具窗口，您可以导航到源代码中的标签和属性定义。
跳转到标签，请点击左侧窗格工具栏上的
。要跳转到某属性的定义，请在左侧窗格中选择它，然后点击右侧窗格工具栏上的
。
配置语法高亮
您可以根据自己的偏好和习惯配置 CSS-aware 语法高亮。
在 设置 对话框（Ctrl+Alt+S ），转到 。
选择配色方案，接受继承自默认设置的高亮设置，或按照 颜色与字体 中的说明对其进行自定义。