W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
介紹兩個比較實用的功能:取色器 Color Picker和CSS 選擇器的預(yù)覽。
首先,你可以在書寫 HTML 和 CSS 時使用取色器。
在書寫 HTML 和 CSS 的時候,你可能經(jīng)常需要修改元素的顏色。VS Code 為修改顏色,提供了一個圖形化的界面,其中包含了顏色相關(guān)的屬性。
當(dāng)你打開一段 HTML 或者 CSS 代碼時,你可以看到,VS Code 在顏色的前面畫了一個方塊(我們稱作顏色裝飾器 Color Decorator),用于展示這段顏色屬性所對應(yīng)的最終效果。
同時,當(dāng)你把鼠標(biāo)移動到這段代碼上時,一個顏色選擇器窗口就顯示出來了。
這個窗口包括了五個主要的部件。首先,就是左下角最大的那個長方體,你可以通過在其中移動光標(biāo)來調(diào)整顏色的飽和度(Saturation)。
其次,在窗口的右側(cè),還有兩個豎條,對應(yīng)兩個部件。左邊的豎條是用于調(diào)整透明度(opacity)。
右邊的那個則是用于調(diào)整色相(hue)。
最后,在取色器的最上方,也有兩個部件。
左側(cè)的部件上,顯示了當(dāng)前顏色對應(yīng)的代碼。當(dāng)你點擊這個部件時,你可以選擇不同的書寫這個顏色的方式。比如對于顏色 RGB(0,0,0) ,在 CSS 里你也可以寫成 #000,這樣你就可以通過點擊這個部件進行切換。
右側(cè)的部件,則是用于在取色器里修改顏色時,回退到之前的值。
除了在 HTML 和 CSS 中使用取色器以外,你還可以在任何需要書寫顏色的代碼里使用,只要這個語言插件實現(xiàn)了相應(yīng)的 API。
第二個非常實用的功能是CSS 選擇器的預(yù)覽。
比如,當(dāng)你書寫了一段 CSS 選擇器后,有的時候會發(fā)現(xiàn)這段 CSS 沒有生效。這可能是因為你的 HTML 結(jié)構(gòu)有問題,從而導(dǎo)致這個 CSS 選擇器不能生效。
為了解決這個問題,VS Code 的 CSS 預(yù)覽(Hover)里提供了一段 HTML 代碼片段,這個代碼片段則可以讓這個 CSS 選擇器生效。
雖然上面這兩個技巧非常實用,但是它們還是不夠強大。要說到 VS Code 里書寫 HTML 和 CSS最厲害的地方,那就屬于 Emmet 支持了。那什么是 Emmet 呢?
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: