# CSS

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

## 开始之前

请确保在设置中已启用  CSS  插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择  `插件` 。 在搜索字段中，输入  CSS 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。

## 代码补全

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/css_intro_completion.mp4)

代码补全功能的可用性因订阅类型而异。

社区配色方案启动页免费属性标题:

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

HTML 文件中提供 CSS 类和 id 的补全，

旗舰版:

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

HTML 文件、各种类型的模板（例如 Angular 或 Vue.js）以及 JSX 代码中均提供 CSS 类和 ID 的补全。

### 补全 HTML 标记中的 CSS 类名称

在 HTML 文件中，IntelliJ IDEA 首先建议来自  `样式`  标签和包含  `link`  标签文件的 classes 和 ids。 如果没有找到匹配的结果，IntelliJ IDEA 还会建议项目中所有样式表文件中定义的符号。

来自样式块:

![对样式块中定义的类进行补全](https://resources.jetbrains.com/help/img/idea/2026.3/ws_style_sheets_completion_search_scope_style_block.png)

来自链接的文件:

![对链接的 CSS 文件中定义的类进行补全](https://resources.jetbrains.com/help/img/idea/2026.3/ws_style_sheets_completion_search_scope_linked_css_file.png)

来自项目中的所有样式表文件:

要立即查看项目中定义的所有类和 id，请在开始输入前按两次 `Ctrl+Space` (Windows), `⌃ Space` (macOS), `⌃ Space` (IntelliJ IDEA Classic (macOS)), `⌃ Space` (macOS System Shortcuts), `Ctrl+Space` (XWin), `Ctrl+Space` (GNOME), `Ctrl+Space` (KDE), `Alt+/` (Emacs), `Ctrl+Space` (Sublime Text), `⌃ Space` (Sublime Text (macOS)), `Ctrl+Space` (Visual Studio), `⌃ Space` (Visual Studio (macOS)), `Ctrl+Space` (NetBeans), `Ctrl+Space` (Eclipse), `⌃ Space` (Eclipse (macOS))。

![HTML 中样式表符号的项目范围补全](https://resources.jetbrains.com/help/img/idea/2026.3/ws_html_completion_for_css.png)

### 补全模板文件中的 CSS 类名称

![补全模板文件中的 CSS 类名称](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_complete_class_in_template.png)

### 补全 JSX 代码中的 CSS 类名称

![CSS 类名补全](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_classname.png)

### 补全来自外部库的 CSS 类名称

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

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_enable_completion_for_external_libs.mp4)

Procedure:

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

2. 要启用库的代码补全功能，请按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) 上的链接，然后从列表中选择  `下载库` 。 或者，悬停在链接上并点击   下载库  。

该库已添加到  `设置 | 语言与框架 | JavaScript | 库`  页面上的 JavaScript 库列表中。 有关更多信息，请参阅 [配置通过 CDN 链接添加的库](configuring-javascript-libraries.html#ws_js_external_library_downloaded_from_CDN)。

## 搜索与导航

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/css_go_to_definition.mp4)

Procedure:

* 若要查找样式表符号的用法，请将文本光标放在符号上并按 `Alt+F7` (Windows), `⌥ F7` (macOS), `⌥ F7` (IntelliJ IDEA Classic (macOS)), `⌃ U` (macOS System Shortcuts), `Alt+F7` (XWin), `Alt+Shift+7` (GNOME), `Alt+Shift+7` (KDE), `Alt+F7` (Emacs), `Alt+F7` (Sublime Text), `⌥ F7` (Sublime Text (macOS)), `Shift+F12` (Visual Studio), `⇧ F12` (Visual Studio (macOS)), `Alt+F7` (NetBeans), `Ctrl+G` (Eclipse), `⌘ ⇧ G` (Eclipse (macOS))。 了解更多信息，请参阅 [在项目中搜索用法](find-highlight-usages.html#find-usages)。

* 要从 Style Sheet 符号的使用跳转到其定义，请按 `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `Ctrl+B` (NetBeans), `F3` (Eclipse), `F3` (Eclipse (macOS))。 导航到定义适用于类、ID、选择器 – 包括嵌套选择器和带有和号  `&`  的选择器 - 以及变量和 mixin。

了解更多信息，请点击 [Go to declaration](navigating-through-the-source-code.html#go_to_declaration)。

## 文档查找

对于属性和伪元素，IntelliJ IDEA 可以向您显示相应的 [MDN 文章](https://developer.mozilla.org/en-US/docs/Web/CSS) 摘要。 此摘要显示在   文档   弹出窗口中，该窗口会显示属性及其值的简要说明，以及其 [Web 平台基线状态](https://web.dev/baseline)。

广泛可用:

![样式表快速文档：Baseline，广泛可用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_quick_doc_compatibility.png)

新近可用:

![样式表快速文档：Baseline，新近可用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_quick_doc_compatibility_newly_available.png)

可用性有限:

![样式表快速文档：Baseline，可用性有限](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_quick_doc_compatibility_limited.png)

对于选择器，IntelliJ IDEA 还显示其 [特异性](https://www.w3.org/TR/selectors-3/#specificity)。

![文档查找：选择器的特异性](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_quick_doc_specificity.png)

Procedure: 查看属性文档

* 将文本光标定位在属性上，然后按 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS)) 或从主菜单中选择  `查看 | 快速文档查找` 。

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

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

Procedure: 配置文档弹出窗口的行为

* 要关闭在悬停代码符号时自动显示文档的功能，请点击弹出窗口中的 ![显示选项菜单图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.more.svg)，并禁用   在鼠标移动时显示   选项。

* 要调整   文档   弹出窗口的显示速度，请打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 常规 | 代码补全 | 弹出窗口` ，然后选择   显示文档弹窗   复选框，并指定延迟时间。

Procedure: 在浏览器中打开 MDN 文档

* 在   文档  弹出窗口 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))中，点击底部的链接。

* 按 `Shift+F1` (Windows), `⇧ F1` (macOS), `⇧ F1` (IntelliJ IDEA Classic (macOS)), `⇧ F1` (macOS System Shortcuts), `Shift+F1` (XWin), `Shift+F1` (GNOME), `Shift+F1` (KDE), `Shift+F1` (Emacs), `Shift+F1` (Sublime Text), `⇧ F1` (Sublime Text (macOS)), `Shift+F1` (Visual Studio), `⇧ F1` (Visual Studio (macOS)), `Shift+F1` (NetBeans), `Shift+F2` (Eclipse), `⇧ F2` (Eclipse (macOS)) 或从主菜单中选择  `视图 | 外部文档` 。

## 格式设置

使用 IntelliJ IDEA 内置格式化程序，可以重新格式化样式表代码片段以及整个文件和文件夹，以满足特定语言的代码样式要求。 格式化程序在您生成或重构代码时也会自动唤醒。

Procedure:

* 要配置样式表语言的格式设置，请打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 代码样式 | 样式表 | <您的样式表语言>` ，并配置特定语言的选项，例如制表符和缩进、空格、换行和大括号、硬边距和软边距等。

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

* 在 CSS、SCSS 和 Less 上下文中，IntelliJ IDEA 默认对  `import`  语句和 URL 中生成的字符串文字使用双引号。 要使用单引号，请打开   其他  标签，并从   单引号  选项中选择   引号标记  列表。

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

> **Note:**
> 目前，更改引号配置不会影响注入的样式表和  `<style>`  选项卡内的 CSS 代码。

* 若要重新格式化代码片段，请在编辑器中选择它并按 `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS))。

* 要重新格式化文件或文件夹，请在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中选择它，然后按 `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS))。 有关详细信息，请参阅 [重新格式化并重排代码](reformat-and-rearrange-code.html)。

* 或者，您可以使用 [Prettier](prettier.html)（ `Ctrl+Alt+Shift+P` (Windows), `⌘ ⌥ ⇧ P` (macOS), `⌘ ⌥ ⇧ P` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ ⇧ P` (macOS System Shortcuts), `Ctrl+Alt+Shift+P` (XWin), `Ctrl+Alt+Shift+P` (GNOME), `Ctrl+Alt+Shift+P` (KDE), `Ctrl+Alt+Shift+P` (Emacs), `Ctrl+Alt+Shift+P` (Sublime Text), `⌘ ⌥ ⇧ P` (Sublime Text (macOS)), `Ctrl+Alt+Shift+P` (Visual Studio), `⌘ ⌥ ⇧ P` (Visual Studio (macOS)), `Ctrl+Alt+Shift+P` (NetBeans), `Ctrl+Alt+Shift+P` (Eclipse), `⌘ ⌥ ⇧ P` (Eclipse (macOS))）。

## 重构

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

![样式表：引入变量](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_extract_variable.animated.gif)

Procedure: 引入变量

1. 在编辑器中，将文本光标放在要转换为变量的表达式处，然后按 `Ctrl+Alt+V` (Windows), `⌘ ⌥ V` (macOS), `⌘ ⌥ V` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ V` (macOS System Shortcuts), `Ctrl+Alt+V` (XWin), `Ctrl+Alt+V` (GNOME), `Alt+Shift+V` (KDE), `Ctrl+Alt+V` (Emacs), `Ctrl+Alt+V` (Sublime Text), `Ctrl+Alt+V` (Sublime Text (macOS)), `Ctrl+R, V` (Visual Studio), `⌘ R, V` (Visual Studio (macOS)), `Alt+Shift+V` (NetBeans), `Alt+Shift+L` (Eclipse), `⌘ ⌥ L` (Eclipse (macOS)) 或从上下文菜单或主菜单中选择  `重构 | 引入 | 引入变量` 。

2. 如果找到所选表达式的多个出现位置，请从   找到多个出现位置   列表中选择   仅替换此处   或   替换所有出现位置  。

3. 对于  `.scss`  和  `.sass` ，请为变量选择  全局  或  局部  作用域。

4. 在红色边框的字段中，接受建议的变量名或指定自定义名称。 按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) 准备。

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

Procedure: 引入规则集

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

2. 按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))并从列表中选择   引入规则集  。

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

Procedure: 将规则集移到其他文件

1. 请将文本光标放在规则集中任意位置并按 `F6` (Windows), `F6` (macOS), `F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ I` (macOS System Shortcuts), `F6` (XWin), `F6` (GNOME), `F6` (KDE), `F6` (Emacs), `F6` (Sublime Text), `F6` (Sublime Text (macOS)), `Ctrl+R, O` (Visual Studio), `⌘ R, O` (Visual Studio (macOS)), `Ctrl+M` (NetBeans), `Alt+Shift+V` (Eclipse), `⌘ ⌥ V` (Eclipse (macOS))。

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

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

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

![重命名重构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_sass_rename.animated.gif)

## 检查与浏览器的兼容性

除了 [在文档弹出窗口中查找](#ws_css_documentation_lookup)外，您还可以即时检查样式表属性与特定浏览器的兼容性。 此检查基于 [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data)，每当某个属性在目标浏览器之一中不受支持时，系统都会向您显示警告。

![样式表兼容性检查弹出窗口](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_documentation_lookup_check_compatibility_inspection_warning_popup.png)

Procedure: 打开兼容性检查

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 检查` 。

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

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

![CSS 兼容性检查设置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_documentation_lookup_check_compatibility_inspection_settings.png)

## 管理颜色

IntelliJ IDEA 支持 [CSS 颜色](https://www.w3.org/TR/css-color-5/)管理，包括 [代码补全](auto-completing-code.html)、 [快速文档查询](null)和 [颜色预览](#ws_css_change_color_values_use_preview)。 为绝对颜色、相对颜色和混合颜色提供编码辅助。

![颜色管理的编码辅助](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_change_color_values_intro.png)

Procedure: 指定颜色

* 将文本光标放在  `color`  属性处，按 `Ctrl+Space` (Windows), `⌃ Space` (macOS), `⌃ Space` (IntelliJ IDEA Classic (macOS)), `⌃ Space` (macOS System Shortcuts), `Ctrl+Space` (XWin), `Ctrl+Space` (GNOME), `Ctrl+Space` (KDE), `Alt+/` (Emacs), `Ctrl+Space` (Sublime Text), `⌃ Space` (Sublime Text (macOS)), `Ctrl+Space` (Visual Studio), `⌃ Space` (Visual Studio (macOS)), `Ctrl+Space` (NetBeans), `Ctrl+Space` (Eclipse), `⌃ Space` (Eclipse (macOS))，然后选择所需的颜色值，或选择   选择颜色...   来选取自定义颜色。

![选择颜色](https://resources.jetbrains.com/help/img/idea/2026.3/ws_chooseColor.png)

* 要使用代码而不是可读的颜色名称，请按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) 并从列表中选择   将颜色转换为 <颜色代码系统>  ，其中 <颜色代码系统> 为 [HEX](https://www.w3schools.com/colors/colors_hexadecimal.asp)、 [HSL](https://www.w3schools.com/colors/colors_hsl.asp)、 [HWB](https://www.w3schools.com/colors/colors_hwb.asp)、 [RGB](https://www.w3schools.com/colors/colors_rgb.asp)、 [lch](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/lch)、 [oklch](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) 或 [oklab](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklab)。

![使用代码而不是颜色名称](https://resources.jetbrains.com/help/img/idea/2026.3/chooseColor.png)

Procedure: 更改颜色

* 点击装订区域中的颜色图标，然后在弹出窗口中选取所需颜色。

![选取颜色](https://resources.jetbrains.com/help/img/idea/2026.3/ws_colorPicker.png)

* 或者，将文本光标置于颜色属性处，按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))，从列表中选择   更改颜色  ，然后在弹出窗口中选取所需的颜色。

![更改颜色 - 上下文菜单](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_change_color_values_change_color_context_action.png)

Procedure: 切换颜色预览

IntelliJ IDEA 会显示绝对颜色、相对颜色和混合颜色的预览。

![颜色预览简介](https://resources.jetbrains.com/help/img/idea/2026.3/ws_css_change_color_values_use_preview.png)

* 默认情况下，IntelliJ IDEA 会在装订区域中将颜色预览显示为图标。 要在背景中显示颜色预览，请打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 外观`  并选中   将 CSS 颜色预览显示为背景   复选框。

![在背景中显示颜色预览](https://resources.jetbrains.com/help/img/idea/2026.3/colorPreview_background.png)

* 要恢复装订区域中的颜色预览图标，请打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 常规 | 装订线图标` ，并在   常规   区域中选中   颜色预览   复选框。

![在装订区域启用颜色预览](https://resources.jetbrains.com/help/img/idea/2026.3/colorPreview.png)

## 查看应用于标签的样式

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

![查看应用到 <body> 标签的样式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_show_styles.png)

Procedure:

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

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

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

* 跳转到标签，请点击左侧窗格工具栏上的 ![“导航到标记”工具栏按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.preview.svg) 。

* 要跳转到某属性的定义，请在左侧窗格中选择它，然后点击右侧窗格工具栏上的 ![“导航到样式源”按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.preview.svg)。

## 配置语法高亮

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

Procedure:

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 配色方案 | CSS` 。

2. 选择配色方案，接受从默认设置继承的高亮设置，或按照 [颜色与字体](configuring-colors-and-fonts.html) 中的说明进行自定义。