IntelliJ IDEA中样式表的使用

样式表

使用IntelliJ IDEA,您可以使用最常见的样式选择器:通用选择器(*),类型选择器(.a),后代选择器(.a.b),子选择器(.a .b),ID选择器(#b),伪类和类选择器(DIV.warning)。

由于IntelliJ IDEA集成了各种将代码编译到CSS中的工具,因此您还可以在Sass,Less, SCSS或Stylus中编写样式定义。

使用样式声明

IntelliJ IDEA允许您从现有声明创建新规则集,甚至使用CSS感知意图操作和重构来移动整个规则集其他文件。

提取规则集

  1. 选择要提取的声明。如果只需要一个声明,只需将光标放在其中即可。

  2. 按下Alt+Enter然后从列表中选择“提取规则集”。

IntelliJ IDEA使用相同的选择器创建一个新的规则集,并将选定的声明移动到它。如果选择包含注释,嵌套选择器等,则它们也会移动到新规则集。

将规则集移动到另一个文件

  1. 将光标放在规则集中的任意位置,然后按下F6键。

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

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

完成CSS类

IntelliJ IDEA首先建议样式标记和链接文件中的class和ID。但如果找不到匹配的结果,IntelliJ IDEA还会建议在项目中的所有样式表文件中定义符号。

HTML中CSS项符号的项目范围完成

要在开始输入之前立即查看项目中定义的所有class和ID,请按下Ctrl+Space两次。

更改样式表中的颜色值

注意:此功能仅在Ultimate版本中受支持。

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

ad460037-64c3-4905-917c-04ce0f5d9b05

选择颜色

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

  2. 键入color:,然后按下Ctrl+Space。

  3. 从建议列表中选择所需的颜色值,或“选择颜色...”以选择自定义颜色值:

    选择一种颜色

改变颜色

  1. 打开所需的样式表进行编辑,然后找到要更改的颜色属性。

  2. 单击装订线中的颜色图标。

    或者,如果未显示图标,请按下Alt+Enter,然后从列表中选择“更改颜色”。

    使用意图动作更改颜色
  3. 在打开的“选择颜色”对话框中,选择所需的新颜色,然后单击 “选择”。

    挑一种颜色

预览颜色代码

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

    将鼠标悬停在装订线上的彩色图标上进行颜色预览

    要使用代码而不是人类可读的颜色名称,请按下Alt+Enter,然后从列表中选择“将颜色转换为<color code system>”,其中<color code system>是HEX, HSL,HWB或RGB

在装订线中显示颜色图标

默认情况下,IntelliJ IDEA在装订线中显示颜色图标。如果出于某种原因隐藏它们,您可以随时返回它们。

  1. 在“设置/首选项”对话框(Ctrl+Alt+S)中,转到:编辑器|通用|装订线图标。将打开“装订线图标”页面。

  2. 在“公共”区域中,选择“颜色预览”复选框。

格式化样式表

每次IntelliJ IDEA生成,重构或重新格式化样式表代码时,它都会自动应用特定于语言的代码样式设置。

或者,您可以使用Prettier格式化程序。

使用Prettier格式化样式表

  • 选择要在编辑器中重新格式化的代码片段,或在“项目”工具窗口中选择文件或文件夹,然后按N/A。

查看应用于标记的样式

注意:此功能仅在Ultimate版本中受支持。

对于HTML,XHTML,JSP,JSPX文件,IntelliJ IDEA提出了一种探索应用于任意标记的所有样式的方法。

每个标记的结果显示在“CSS样式”工具窗口的专用选项卡中。使用此工具窗口,您可以查看应用于标记的样式列表以及这些样式的定义。除此之外,您还可以从样式导航到源代码中的相应标记。

  1. 在编辑器中打开所需文件,然后右键单击要探索应用样式的标记。

  2. 从上下文菜单中,选择“显示应用的标签样式”。

  3. 在“CSS样式”工具窗口的专用选项卡中查看结果:

    查看应用于标签body的样式
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部