IntelliJ IDEA中樣式表的使用

樣式表

使用IntelliJ IDEA，您可以使用最常見的樣式選擇器：通用選擇器（*），類型選擇器（.a），后代選擇器（.a.b），子選擇器（.a .b），ID選擇器（#b），偽類和類選擇器（DIV.warning）。

由于IntelliJ IDEA集成了各種將代碼編譯到CSS中的工具，因此您還可以在Sass，Less， SCSS或Stylus中編寫樣式定義。

使用樣式聲明

IntelliJ IDEA允許您從現(xiàn)有聲明創(chuàng)建新規(guī)則集，甚至使用CSS感知意圖操作和重構(gòu)來移動整個規(guī)則集其他文件。

提取規(guī)則集

1. 選擇要提取的聲明。如果只需要一個聲明，只需將光標(biāo)放在其中即可。

2. 按下Alt+Enter然后從列表中選擇“提取規(guī)則集”。

IntelliJ IDEA使用相同的選擇器創(chuàng)建一個新的規(guī)則集，并將選定的聲明移動到它。如果選擇包含注釋，嵌套選擇器等，則它們也會移動到新規(guī)則集。

將規(guī)則集移動到另一個文件

1. 將光標(biāo)放在規(guī)則集中的任意位置，然后按下F6鍵。

2. 在打開的對話框中，指定要將規(guī)則集移動到的文件。如果指定的文件不存在，IntelliJ IDEA將建議創(chuàng)建它。

3. 默認(rèn)情況下，IntelliJ IDEA會自動打開移動規(guī)則集的文件。要更改此行為，請清除“在編輯器中打開”復(fù)選框。

完成CSS類

IntelliJ IDEA首先建議樣式標(biāo)記和鏈接文件中的class和ID。但如果找不到匹配的結(jié)果，IntelliJ IDEA還會建議在項目中的所有樣式表文件中定義符號。

要在開始輸入之前立即查看項目中定義的所有class和ID，請按下Ctrl+Space兩次。

更改樣式表中的顏色值

注意：此功能僅在Ultimate版本中受支持。

使用IntelliJ IDEA，您可以輕松更改樣式表中的顏色值，而無需鍵入十六進制代碼。

選擇顏色

1. 打開所需的樣式表進行編輯。

2. 鍵入color:，然后按下Ctrl+Space。

3. 從建議列表中選擇所需的顏色值，或“選擇顏色...”以選擇自定義顏色值：

   

改變顏色

1. 打開所需的樣式表進行編輯，然后找到要更改的顏色屬性。

2. 單擊裝訂線中的顏色圖標(biāo)。

   或者，如果未顯示圖標(biāo)，請按下Alt+Enter，然后從列表中選擇“更改顏色”。

   

3. 在打開的“選擇顏色”對話框中，選擇所需的新顏色，然后單擊 “選擇”。

   

預(yù)覽顏色代碼

• IntelliJ IDEA 使用相應(yīng)顏色的裝訂線圖標(biāo)標(biāo)記每個color屬性。當(dāng)您將鼠標(biāo)懸停在顏色圖標(biāo)上時，IntelliJ IDEA會顯示一個彈出窗口，其中顯示顏色預(yù)覽及其十六進制代碼。

  

  要使用代碼而不是人類可讀的顏色名稱，請按下Alt+Enter，然后從列表中選擇“將顏色轉(zhuǎn)換為<color code system>”，其中<color code system>是HEX， HSL，HWB或RGB

在裝訂線中顯示顏色圖標(biāo)

默認(rèn)情況下，IntelliJ IDEA在裝訂線中顯示顏色圖標(biāo)。如果出于某種原因隱藏它們，您可以隨時返回它們。

1. 在“設(shè)置/首選項”對話框（Ctrl+Alt+S）中，轉(zhuǎn)到：編輯器|通用|裝訂線圖標(biāo)。將打開“裝訂線圖標(biāo)”頁面。

2. 在“公共”區(qū)域中，選擇“顏色預(yù)覽”復(fù)選框。

格式化樣式表

每次IntelliJ IDEA生成，重構(gòu)或重新格式化樣式表代碼時，它都會自動應(yīng)用特定于語言的代碼樣式設(shè)置。

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

使用Prettier格式化樣式表

• 選擇要在編輯器中重新格式化的代碼片段，或在“項目”工具窗口中選擇文件或文件夾，然后按N/A。

查看應(yīng)用于標(biāo)記的樣式

注意：此功能僅在Ultimate版本中受支持。

對于HTML，XHTML，JSP，JSPX文件，IntelliJ IDEA提出了一種探索應(yīng)用于任意標(biāo)記的所有樣式的方法。

每個標(biāo)記的結(jié)果顯示在“CSS樣式”工具窗口的專用選項卡中。使用此工具窗口，您可以查看應(yīng)用于標(biāo)記的樣式列表以及這些樣式的定義。除此之外，您還可以從樣式導(dǎo)航到源代碼中的相應(yīng)標(biāo)記。

1. 在編輯器中打開所需文件，然后右鍵單擊要探索應(yīng)用樣式的標(biāo)記。

2. 從上下文菜單中，選擇“顯示應(yīng)用的標(biāo)簽樣式”。

3. 在“CSS樣式”工具窗口的專用選項卡中查看結(jié)果：