vscode取色器怎么調用? vscode中css的使用教程

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 中使用取色器以外,你還可以在任何需要書寫顏色的代碼里使用,只要這個語言插件實現(xiàn)了相應的 API。
CSS 選擇器的預覽
第二個非常實用的功能是CSS 選擇器的預覽。
比如,當你書寫了一段 CSS 選擇器后,有的時候會發(fā)現(xiàn)這段 CSS 沒有生效。這可能是因為你的 HTML 結構有問題,從而導致這個 CSS 選擇器不能生效。
為了解決這個問題,VS Code 的 CSS 預覽(Hover)里提供了一段 HTML 代碼片段,這個代碼片段則可以讓這個 CSS 選擇器生效。
雖然上面這兩個技巧非常實用,但是它們還是不夠強大。要說到 VS Code 里書寫 HTML 和 CSS最厲害的地方,那就屬于 Emmet 支持了。那什么是 Emmet 呢?詳細請看VsCode編輯器怎么使用Emmet神器。
以上就是關于vscode中css的使用教程,希望大家喜歡,請繼續(xù)關注腳本之家。
相關推薦:
VSCODE怎么安裝CSS Peek插件快速查看CSS定義?
vscode docker插件有什么用? vscode docker插件使用教程
vscode打開終端的快捷鍵是啥? VScode打開終端的三種方法
相關文章
VSCode終端面板里文件怎么跳轉? VSCode文件跳轉的實現(xiàn)方法
VSCode終端面板里文件怎么跳轉?VSCode終端面板中的文件想要打開調用的文件,該怎么操作呢?下面我們就來看看VSCode文件跳轉的實現(xiàn)方法2023-07-22VSCode怎么修改主題顏色? VSCode修改主題配色的技巧
VSCode怎么修改主題顏色?VSCode設置號主題顏色是,自動補全給你提示了所有已經安裝的主題,該怎么修改代碼顏色呢?下面我們就來看看詳細的教程2023-07-22- vscode常用插件有哪些?vscode中的插件很多,今天我們就來推薦一些VSCode經典插件,詳細請看下文介紹2023-07-22
VSCode終端有哪些快捷鍵操作? vscode終端運行快捷鍵介紹
VSCode終端有哪些快捷鍵操作?今天我們就來看看集成終端里的快捷鍵操作的相關介紹,詳細請看下文介紹2023-07-20VSCode怎么新增任務? VSCode創(chuàng)建自定義的任務技巧
VSCode怎么新增任務?VSCode中想要自己創(chuàng)建新任務,該怎么操作呢?下面我們就來看看 VSCode創(chuàng)建自定義的任務技巧2023-07-20VSCode任務系統(tǒng)配置中的分組和結果顯示怎么用?
VSCode任務系統(tǒng)配置中的分組和結果顯示怎么用?VSCode任務系統(tǒng)配置中有很多屬性,今天我們就來看看“group” “presentation” 和 “options”,詳細請看下文介紹2023-07-20- VS Codezhong git保存文件提示彈窗怎么顯示?保存文件的時候會有一個彈窗提示,該怎么設置呢?下面我們就來看看開啟這個功能的技巧2023-07-12
VSCode中git怎么取消提取時修剪? VSCode關閉去取時修剪的技巧
VSCode中git怎么取消提取時修剪?經常會根據(jù)不同的代碼內容設置更改功能選項,那么用戶想要設置忽略修剪空白功能的話,下面我們就來看看VSCodeVSCode關閉去取時修剪的技巧2023-07-08- VSCode中git怎么開啟拉標簽?VSCode中想要提取時獲取所有標簽,該怎么操作呢?下面我們就來看看詳細的設置方法2023-07-08
- VSCode怎么開啟使用圖標渲染面包屑導航項?VSCode中面包屑功能經常使用,下面我們就來看看VSCode使用圖標渲染面包屑導航項設置技巧2023-06-25