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

• 類(lèi)型：編譯工具
• 大?。?/span>120MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2023-10-13

查看詳情

VSCode 支持CSS，介紹兩個(gè)比較實(shí)用的功能：取色器 Color Picker和CSS 選擇器的預(yù)覽。

文章目錄

• 取色器 Color Picker
• CSS 選擇器的預(yù)覽

取色器 Color Picker

首先，你可以在書(shū)寫(xiě) HTML 和 CSS 時(shí)使用取色器。

在書(shū)寫(xiě) HTML 和 CSS 的時(shí)候，你可能經(jīng)常需要修改元素的顏色。VS Code 為修改顏色，提供了一個(gè)圖形化的界面，其中包含了顏色相關(guān)的屬性。

當(dāng)你打開(kāi)一段 HTML 或者 CSS 代碼時(shí)，你可以看到，VS Code 在顏色的前面畫(huà)了一個(gè)方塊（我們稱(chēng)作顏色裝飾器 Color Decorator），用于展示這段顏色屬性所對(duì)應(yīng)的最終效果。

同時(shí)，當(dāng)你把鼠標(biāo)移動(dòng)到這段代碼上時(shí)，一個(gè)顏色選擇器窗口就顯示出來(lái)了。

這個(gè)窗口包括了五個(gè)主要的部件。首先，就是左下角最大的那個(gè)長(zhǎng)方體，你可以通過(guò)在其中移動(dòng)光標(biāo)來(lái)調(diào)整顏色的飽和度（Saturation）。

其次，在窗口的右側(cè)，還有兩個(gè)豎條，對(duì)應(yīng)兩個(gè)部件。左邊的豎條是用于調(diào)整透明度（opacity）。

右邊的那個(gè)則是用于調(diào)整色相（hue）。

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

左側(cè)的部件上，顯示了當(dāng)前顏色對(duì)應(yīng)的代碼。當(dāng)你點(diǎn)擊這個(gè)部件時(shí)，你可以選擇不同的書(shū)寫(xiě)這個(gè)顏色的方式。比如對(duì)于顏色 RGB(0,0,0) ，在 CSS 里你也可以寫(xiě)成 #000，這樣你就可以通過(guò)點(diǎn)擊這個(gè)部件進(jìn)行切換。

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

除了在 HTML 和 CSS 中使用取色器以外，你還可以在任何需要書(shū)寫(xiě)顏色的代碼里使用，只要這個(gè)語(yǔ)言插件實(shí)現(xiàn)了相應(yīng)的 API。

CSS 選擇器的預(yù)覽

第二個(gè)非常實(shí)用的功能是CSS 選擇器的預(yù)覽。

比如，當(dāng)你書(shū)寫(xiě)了一段 CSS 選擇器后，有的時(shí)候會(huì)發(fā)現(xiàn)這段 CSS 沒(méi)有生效。這可能是因?yàn)槟愕?HTML 結(jié)構(gòu)有問(wèn)題，從而導(dǎo)致這個(gè) CSS 選擇器不能生效。

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

雖然上面這兩個(gè)技巧非常實(shí)用，但是它們還是不夠強(qiáng)大。要說(shuō)到 VS Code 里書(shū)寫(xiě) HTML 和 CSS最厲害的地方，那就屬于 Emmet 支持了。那什么是 Emmet 呢？詳細(xì)請(qǐng)看VsCode編輯器怎么使用Emmet神器。

以上就是關(guān)于vscode中css的使用教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

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

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

vscode打開(kāi)終端的快捷鍵是啥? VScode打開(kāi)終端的三種方法

最新評(píng)論