IntelliJ IDEA 2025.2 Help

样式表

使用 IntelliJ IDEA，您可以在 CSS 以及各种编译成 CSS 的语言中编写样式定义，例如 Sass、 Less、 SCSS 或 Stylus。

您还可以查阅样式表的文档，创建和移动规则集，引入变量等。

开始之前

请确保在设置中启用 CSS 插件。 按 Ctrl+Alt+S 打开设置，然后选择 插件。 点击 已安装 选项卡。 在搜索框中输入 CSS。 如需了解有关插件的更多信息，请参阅 管理插件。

代码补全

IntelliJ IDEA 为属性、属性值、选择器、变量和 mixins 提供代码补全。

样式表：基本代码补全

完整样式表类

在 HTML 文件、各种类型的模板（例如，Angular 或 Vue.js），以及 JSX 代码中，提供对 CSS、SCSS、Less 和 Sass 类和 id 的补全。

在 HTML 文件中，IntelliJ IDEA 首先建议来自 style 标签和包含 link 标签文件的 classes 和 ids。 如果没有找到匹配的结果，IntelliJ IDEA 还会建议项目中所有样式表文件中定义的符号。 要立即查看项目中定义的所有类和 id，在开始输入前，请按 Ctrl+Space 两次。

HTML 中对样式表符号的项目范围完成功能

完成来自外部库的 Style Sheet 类

使用 IntelliJ IDEA，您还可以为 Twitter Bootstrap 或其他从 CDN 链接到 HTML 文件的 CSS 库中的类名提供补全，无需将这些库添加到您的项目依赖项中。

启用对外部 CSS 库的补全功能

  1. 打开包含指向外部 CSS 库的 CDN 链接的 HTML 文件。 IntelliJ IDEA 突出了该链接。

  2. 要启用库的代码补全功能，请按 Alt+Enter 上的链接，然后从列表中选择 下载库。 或者，悬停在链接上并点击 下载库。

该库已添加到 设置 | 语言与框架 | JavaScript | 库 页面上的 JavaScript 库列表中。 有关更多信息，请参阅 配置通过 CDN 链接添加的库。

完成 Sass 和 SCSS 选择器

IntelliJ IDEA 也为 Sass 和 SCSS 选择器提供补全——包括 嵌套选择器和 使用 & 符号 (&) 创建的选择器。

Sass 和 SCSS 选择器的补全

样式表中的云补全和整行补全

IntelliJ IDEA 在 CSS、Less、Sass/SCSS 和 PostCSS 代码中提供了 Cloud Completion 和 Full Line completion 功能。

整行代码补全功能使用本地运行的深度学习模型来建议整行代码。 该功能在 IntelliJ IDEA Ultimate 中开箱即用，无需额外许可证。

在样式表中启用整行代码补全

  1. 按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。

  2. 选中 启用本地Full Line 补全建议 复选框，并确保选中 类 CSS 复选框。

    启用整行补全

由 AI Assistant 驱动的云补全可以基于项目上下文实时自动补全单行代码、代码块，甚至整个函数。

云补全会根据上下文建议语法上可接受的解决方案，并提前运行各种 代码检查 ，以排除会导致错误的选项。

启用云补全

  1. 安装并启用 AI Assistant 插件。

  2. 按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。

  3. 选中 Enable cloud completion suggestions 复选框，并确保选中 HTML 文件 复选框。

    在 CSS 中启用云补全

搜索和导航

SCSS 选择器导航

  • 若要查找样式表符号的用法，请将文本光标放在符号上并按 Alt+F7。 了解更多信息，请参阅 在项目中搜索用法。

  • 要从 Style Sheet 符号的使用跳转到其定义，请按 Ctrl+B。 类、id、选择器——包括嵌套选择器和带有 & 的选择器 &——以及变量和 mixin 的定义导航是可用的。

    了解更多信息，请点击 Go to declaration。

文档查找

对于属性和伪元素，IntelliJ IDEA 可以向您显示相应的 MDN 文章 摘要。 此摘要显示在 文档 弹出窗口中，该窗口会显示属性及其值的简要说明，以及其 Web 平台基线状态。

样式表快速文档：基准，广泛可用
样式表快速文档：基准，新近可用
样式表快速文档：基准，可用性受限

对于选择器，IntelliJ IDEA 还显示其 特异性。

文档查找：选择器的特异性

查看属性文档

  • 将文本光标定位在属性上，然后按 Ctrl+Q 或从主菜单中选择 查看 | 快速文档查找。

  • 当您悬停在某属性上时，IntelliJ IDEA 会立即在 文档 弹出窗口中显示其引用。

    您可以关闭此行为或配置弹出窗口的显示速度，更快或更慢，详见下文 配置文档弹出窗口的行为。

配置文档弹出窗口的行为

  • 要关闭在悬停代码符号时自动显示文档的功能，请点击弹出窗口中的 显示选项菜单图标 ，并禁用 在鼠标移动时显示 选项。

  • 要调整 文档 弹出窗口的显示速度，请打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 常规 | 代码完成 ，然后选择 显示文档弹窗 复选框并指定延迟时间。

在浏览器中打开 MDN 文档

  • 在 文档 弹出窗口 Ctrl+Q 中，点击底部的链接。

  • 按 Shift+F1 或从主菜单中选择 查看 | 外部文档。

格式设置

通过 IntelliJ IDEA 内置格式化工具，您可以重新格式化样式表代码片段、整个文件及文件夹，以符合特定语言的代码风格要求。 格式化程序在您生成或重构代码时也会自动唤醒。

  • 要配置样式表语言的格式设置，请打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 代码样式 | 样式表 | <您的样式表语言> ，并配置特定语言的选项，例如制表符和缩进、空格、换行和大括号、硬边距和软边距等。

    当您更改设置时， 预览 区域会显示这些更改如何影响格式化。

  • 在 CSS 、 SCSS 和 Less 的环境中， IntelliJ IDEA 默认在 import 语句和 URLs 中采用双引号来生成字符串字面值。 要使用单引号，请打开 其他 标签，并从 单一 选项中选择 引号标记 列表。

    在重新格式化后，要将所选样式应用于整个文件，请在列表下方选择 设置格式时强制 复选框。

  • 若要重新格式化代码片段，请在编辑器中选择它并按 Ctrl+Alt+L。

  • 要重新格式化文件或文件夹，请在 项目 工具窗口 Alt+1 中选择它，然后按 Ctrl+Alt+L。 有关详细信息，请参阅 重新格式化并重排代码。

  • 或者，您可以使用 Prettier （Ctrl+Alt+Shift+P）。

重构

借助 IntelliJ IDEA，您可以将样式表中的表达式转换为变量，并使用 var(--var-name) 语法在 .css 文件中引入这些变量，或使用 $ 语法在 .scss 和 .sass 文件中引入。

样式表：引入变量

引入变量

  1. 在编辑器中，将文本光标放在要转换为变量的表达式处，然后按 Ctrl+Alt+V 或从上下文菜单或主菜单中选择 重构 | 引入 | 引入变量。

  2. 如果找到多个所选表达式的匹配项，请从 发现多个事件 列表中选择 仅替换此项 或 替换所有匹配项。

  3. 对于 .scss 和 .sass ，选择 全局或 本地范围的变量。

  4. 在红色边框的字段中，接受建议的变量名或指定自定义名称。 按 Enter 准备。

使用 IntelliJ IDEA，您可以从 CSS、SCSS、Sass 或 Less 文件中的现有声明创建新的规则集，甚至可以通过重构和意图操作在文件之间移动整个规则集。

引入规则集

  1. 请选择要引入的声明。 如果您只需要一个声明，只需将文本光标放在其中。

  2. 按 Alt+Enter 并从列表中选择 引入规则集。

IntelliJ IDEA 创建一个具有相同选择器的新规则集，并将选定声明移到其中。 如果选中内容包含注释、嵌套选择器等，它们也会移到新的规则集中。

将规则集移到其他文件

  1. 请将文本光标放在规则集中任意位置并按 F6。

  2. 在打开的对话框中，指定要移动规则集的文件。 如果指定的文件不存在，IntelliJ IDEA将建议创建它。

  3. 默认情况下，IntelliJ IDEA 会自动打开规则集所在的文件。 要更改此行为，请清除 在编辑器中打开 复选框。

常见的重构操作，如 Copy、 Move或 Rename ，也可用。

“重命名”重构

检查与浏览器的兼容性

除了 在文档弹出窗口中查找外，您还可以即时检查样式表属性与特定浏览器的兼容性。 此检查基于 MDN Browser Compatibility Data ，每当某个属性在目标浏览器之一中不受支持时，系统都会向您显示警告。

样式表兼容性检查弹出窗口

打开兼容性检查

  1. 在 设置 对话框（Ctrl+Alt+S ）中，前往 编辑器 | 检查。

  2. 展开 CSS 节点并选择 属性与所选浏览器不兼容。 在 选项 区域，选择您要针对的浏览器及其最低版本。

  3. 在 选项 区域中，选择用于检查属性可用性的浏览器。 指定所选浏览器的目标版本。

CSS 兼容性检查设置

管理颜色

使用 IntelliJ IDEA，您可以轻松地在样式表中更改颜色值，而无需输入十六进制代码。

在样式表中编辑颜色值

  • 要指定颜色，请将插入符号置于 color 属性处，按 Ctrl+Space ，然后选择所需的颜色值，或使用 选择颜色... 来选择自定义颜色。

    选择颜色

  • 要使用代码代替可读的颜色名称，请按 Alt+Enter 并从列表中选择 将颜色转换为 <颜色编码系统> ，其中<color code system>为 HEX、 HSL、 HWB或 RGB。

    使用代码替代颜色名称

  • 要更改颜色，请点击边距中的颜色图标，然后在弹出窗口中选择所需颜色。

    拾取颜色

    或者，将插入符号置于颜色属性处，按 Alt+Enter ，在列表中选择 更改颜色 ，然后在弹出窗口中选取所需的颜色。

  • 默认情况下，IntelliJ IDEA 会在边距以图标形式显示颜色预览。 要在背景中显示颜色预览，请打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 外观 并选中 将 CSS 颜色预览显示为背景 复选框。

    在背景中显示颜色预览

    要恢复装订区域中的颜色预览图标，请打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 常规 | 侧边图标 ，并在 通用 区域中选中 颜色预览 复选框。

    在边距启用颜色预览

查看应用于标签的样式

在 HTML、XHTML、JSP 和 JSPX 文件中，IntelliJ IDEA 可以向您显示应用于任意标签的所有样式。

查看应用到 <body> 标签的样式

  • 从标签的上下文菜单中选择 显示标签的应用样式。

    IntelliJ IDEA 打开 CSS 样式 工具窗口，工具窗口有两个窗格，左侧窗格显示标签的样式，右侧窗格显示它们的定义。 对于每个标签，IntelliJ IDEA 会打开一个单独的选项卡。

    从工具窗口，您可以导航到源代码中的标签和属性定义。

    • 跳转到标签，请点击左侧窗格工具栏上的 “导航到标签”工具栏按钮。

    • 要跳转到某属性的定义，请在左侧窗格中选择它，然后点击右侧窗格工具栏上的 “导航到样式来源”按钮。

配置语法高亮

您可以根据自己的偏好和习惯配置 CSS-aware 语法高亮。

  1. 在 设置 对话框（Ctrl+Alt+S ）中，前往 编辑器 | 配色方案 | CSS。

  2. 选择配色方案，接受从默认值继承的高亮设置，或按照 颜色和字体 中所述自定义它们。

最后修改日期： 2025年 9月 22日
HTML 文件压缩 CSS