vscode取色器怎么調(diào)用? vscode中css的使用教程

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)終端的三種方法
相關(guān)文章
VSCode終端面板里文件怎么跳轉(zhuǎn)? VSCode文件跳轉(zhuǎn)的實(shí)現(xiàn)方法
VSCode終端面板里文件怎么跳轉(zhuǎn)?VSCode終端面板中的文件想要打開(kāi)調(diào)用的文件,該怎么操作呢?下面我們就來(lái)看看VSCode文件跳轉(zhuǎn)的實(shí)現(xiàn)方法2023-07-22VSCode怎么修改主題顏色? VSCode修改主題配色的技巧
VSCode怎么修改主題顏色?VSCode設(shè)置號(hào)主題顏色是,自動(dòng)補(bǔ)全給你提示了所有已經(jīng)安裝的主題,該怎么修改代碼顏色呢?下面我們就來(lái)看看詳細(xì)的教程2023-07-22vscode常用插件有哪些? VSCode經(jīng)典插件推薦
vscode常用插件有哪些?vscode中的插件很多,今天我們就來(lái)推薦一些VSCode經(jīng)典插件,詳細(xì)請(qǐng)看下文介紹2023-07-22VSCode終端有哪些快捷鍵操作? vscode終端運(yùn)行快捷鍵介紹
VSCode終端有哪些快捷鍵操作?今天我們就來(lái)看看集成終端里的快捷鍵操作的相關(guān)介紹,詳細(xì)請(qǐng)看下文介紹2023-07-20VSCode怎么新增任務(wù)? VSCode創(chuàng)建自定義的任務(wù)技巧
VSCode怎么新增任務(wù)?VSCode中想要自己創(chuàng)建新任務(wù),該怎么操作呢?下面我們就來(lái)看看 VSCode創(chuàng)建自定義的任務(wù)技巧2023-07-20VSCode任務(wù)系統(tǒng)配置中的分組和結(jié)果顯示怎么用?
VSCode任務(wù)系統(tǒng)配置中的分組和結(jié)果顯示怎么用?VSCode任務(wù)系統(tǒng)配置中有很多屬性,今天我們就來(lái)看看“group” “presentation” 和 “options”,詳細(xì)請(qǐng)看下文介紹2023-07-20- VS Codezhong git保存文件提示彈窗怎么顯示?保存文件的時(shí)候會(huì)有一個(gè)彈窗提示,該怎么設(shè)置呢?下面我們就來(lái)看看開(kāi)啟這個(gè)功能的技巧2023-07-12
VSCode中g(shù)it怎么取消提取時(shí)修剪? VSCode關(guān)閉去取時(shí)修剪的技巧
VSCode中g(shù)it怎么取消提取時(shí)修剪?經(jīng)常會(huì)根據(jù)不同的代碼內(nèi)容設(shè)置更改功能選項(xiàng),那么用戶(hù)想要設(shè)置忽略修剪空白功能的話,下面我們就來(lái)看看VSCodeVSCode關(guān)閉去取時(shí)修剪的技巧2023-07-08VSCode中g(shù)it怎么開(kāi)啟拉標(biāo)簽?
VSCode中g(shù)it怎么開(kāi)啟拉標(biāo)簽?VSCode中想要提取時(shí)獲取所有標(biāo)簽,該怎么操作呢?下面我們就來(lái)看看詳細(xì)的設(shè)置方法2023-07-08VSCode怎么開(kāi)啟使用圖標(biāo)渲染面包屑導(dǎo)航項(xiàng)?
VSCode怎么開(kāi)啟使用圖標(biāo)渲染面包屑導(dǎo)航項(xiàng)?VSCode中面包屑功能經(jīng)常使用,下面我們就來(lái)看看VSCode使用圖標(biāo)渲染面包屑導(dǎo)航項(xiàng)設(shè)置技巧2023-06-25