IntelliJ IDEA 2025.1 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 功能。

整行代码补全功能使用本地运行的深度学习模型来建议整行代码。

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

  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 文章 摘要。 此摘要显示在 文档 弹出窗口中，展示了属性及其值的简要描述，以及其与各种浏览器的兼容性信息。

样式表快速文档：兼容的浏览器已列出

如果该属性在所有版本的浏览器中都可用，IntelliJ IDEA 不会显示任何有关其兼容性的信息。

否则，此 文档 弹出窗口还会列出支持该属性的浏览器及其版本。

对于选择器，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)。 如需更多信息，请参阅 Prettier。

重构

借助 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 节点并选择 属性的浏览器兼容性。 在 选项 区域，选择您要针对的浏览器及其最低版本。

CSS 兼容性检查设置

更改颜色值

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

在样式表中编辑颜色值

选择颜色

  1. 打开所需的样式表进行编辑。

  2. 请键入 color: ，然后按 Ctrl+Space。

  3. 从建议列表中选择所需的颜色值或 选择颜色... 来自定义选择。

改变颜色

  1. 打开需要编辑的样式表，找到您想要更改的 color 属性。

  2. 请点击边距中的颜色图标。

    """ 或者，如果图标未显示，请按 Alt+Enter 并从列表中选择 更改颜色。 """ 请参见下文 在边距中显示彩色图标。

  3. 在打开的 选择颜色 对话框中，选择所需的新颜色并点击 选择。

预览颜色代码

  • IntelliJ IDEA 使用对应颜色的边距图标标记每个 color 属性。 当您将鼠标悬停在颜色图标上时，IntelliJ IDEA 会显示一个弹出窗口，显示颜色预览及其十六进制代码。

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

在装订区域显示彩色图标

默认情况下，IntelliJ IDEA 在规线栏中显示彩色图标。 如果它们被隐藏，您可以随时返回。

  1. 在 设置 对话框（Ctrl+Alt+S ）中，前往 编辑器 | 常规 | 侧边图标。 间距图标页将打开。

  2. 在 通用 区域，选择 颜色预览 复选框。

查看应用于标签的样式

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

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

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

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

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

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

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

配置语法高亮

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

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

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

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