建站
咨詢
售后
建站咨詢
新聞中心
介紹兩個(gè)比較實(shí)用的功能：取色器 Color Picker和CSS 選擇器的預(yù)覽。
10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有景寧畬族自治免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
取色器 Color Picker
首先，你可以在書寫 HTML 和 CSS 時(shí)使用取色器。
在書寫 HTML 和 CSS 的時(shí)候，你可能經(jīng)常需要修改元素的顏色。VS Code 為修改顏色，提供了一個(gè)圖形化的界面，其中包含了顏色相關(guān)的屬性。
當(dāng)你打開一段 HTML 或者 CSS 代碼時(shí)，你可以看到，VS Code 在顏色的前面畫了一個(gè)方塊（我們稱作顏色裝飾器 Color Decorator），用于展示這段顏色屬性所對(duì)應(yīng)的最終效果。
同時(shí)，當(dāng)你把鼠標(biāo)移動(dòng)到這段代碼上時(shí)，一個(gè)顏色選擇器窗口就顯示出來(lái)了。
這個(gè)窗口包括了五個(gè)主要的部件。首先，就是左下角最大的那個(gè)長(zhǎng)方體，你可以通過在其中移動(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í)，你可以選擇不同的書寫這個(gè)顏色的方式。比如對(duì)于顏色 RGB(0,0,0) ，在 CSS 里你也可以寫成 #000，這樣你就可以通過點(diǎn)擊這個(gè)部件進(jìn)行切換。
右側(cè)的部件，則是用于在取色器里修改顏色時(shí)，回退到之前的值。
除了在 HTML 和 CSS 中使用取色器以外，你還可以在任何需要書寫顏色的代碼里使用，只要這個(gè)語(yǔ)言插件實(shí)現(xiàn)了相應(yīng)的 API。
CSS 選擇器的預(yù)覽
第二個(gè)非常實(shí)用的功能是CSS 選擇器的預(yù)覽。
比如，當(dāng)你書寫了一段 CSS 選擇器后，有的時(shí)候會(huì)發(fā)現(xiàn)這段 CSS 沒有生效。這可能是因?yàn)槟愕?HTML 結(jié)構(gòu)有問題，從而導(dǎo)致這個(gè) CSS 選擇器不能生效。
為了解決這個(gè)問題，VS Code 的 CSS 預(yù)覽（Hover）里提供了一段 HTML 代碼片段，這個(gè)代碼片段則可以讓這個(gè) CSS 選擇器生效。
雖然上面這兩個(gè)技巧非常實(shí)用，但是它們還是不夠強(qiáng)大。要說(shuō)到 VS Code 里書寫 HTML 和 CSS最厲害的地方，那就屬于 Emmet 支持了。那什么是 Emmet 呢？
當(dāng)前文章：創(chuàng)新互聯(lián)vscode教程：vscode支持CSS
分享網(wǎng)址：http://www.dlmjj.cn/article/cdephgi.html
