Visual Studio Code(代碼編輯器) v1.80.2 32位 官方中文免費綠色版

• 類型：編譯工具
• 大小：118MB
• 語言：簡體中文
• 時間：2023-08-02

查看詳情

VSCode 支持CSS，介紹兩個比較實用的功能：取色器 Color Picker和CSS 選擇器的預覽。

文章目錄

• 取色器 Color Picker
• CSS 選擇器的預覽

取色器 Color Picker

首先，你可以在書寫 HTML 和 CSS 時使用取色器。

在書寫 HTML 和 CSS 的時候，你可能經常需要修改元素的顏色。VS Code 為修改顏色，提供了一個圖形化的界面，其中包含了顏色相關的屬性。

當你打開一段 HTML 或者 CSS 代碼時，你可以看到，VS Code 在顏色的前面畫了一個方塊（我們稱作顏色裝飾器 Color Decorator），用于展示這段顏色屬性所對應的最終效果。

同時，當你把鼠標移動到這段代碼上時，一個顏色選擇器窗口就顯示出來了。

這個窗口包括了五個主要的部件。首先，就是左下角最大的那個長方體，你可以通過在其中移動光標來調整顏色的飽和度（Saturation）。

其次，在窗口的右側，還有兩個豎條，對應兩個部件。左邊的豎條是用于調整透明度（opacity）。

右邊的那個則是用于調整色相（hue）。

最后，在取色器的最上方，也有兩個部件。

左側的部件上，顯示了當前顏色對應的代碼。當你點擊這個部件時，你可以選擇不同的書寫這個顏色的方式。比如對于顏色 RGB(0,0,0) ，在 CSS 里你也可以寫成 #000，這樣你就可以通過點擊這個部件進行切換。

右側的部件，則是用于在取色器里修改顏色時，回退到之前的值。

除了在 HTML 和 CSS 中使用取色器以外，你還可以在任何需要書寫顏色的代碼里使用，只要這個語言插件實現了相應的 API。

CSS 選擇器的預覽

第二個非常實用的功能是CSS 選擇器的預覽。

比如，當你書寫了一段 CSS 選擇器后，有的時候會發現這段 CSS 沒有生效。這可能是因為你的 HTML 結構有問題，從而導致這個 CSS 選擇器不能生效。

為了解決這個問題，VS Code 的 CSS 預覽（Hover）里提供了一段 HTML 代碼片段，這個代碼片段則可以讓這個 CSS 選擇器生效。

雖然上面這兩個技巧非常實用，但是它們還是不夠強大。要說到 VS Code 里書寫 HTML 和 CSS最厲害的地方，那就屬于 Emmet 支持了。那什么是 Emmet 呢？詳細請看VsCode編輯器怎么使用Emmet神器。

以上就是關于vscode中css的使用教程，希望大家喜歡，請繼續關注風君子博客。

相關推薦：

VSCODE怎么安裝CSS Peek插件快速查看CSS定義?

vscode docker插件有什么用? vscode docker插件使用教程

vscode打開終端的快捷鍵是啥? VScode打開終端的三種方法

總結

以上是生活随笔為你收集整理的vscode取色器怎么调用? vscode中css的使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。