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