CSS Scan 快速複製網頁元素的CSS代碼

目录

• CSS Scan快速查看網站CSS代碼
• CSS Scan快速複製CSS代碼
• 用顯示Grid選項配合分析網站

CSS Scan 是一款能夠快速複製CSS代碼的工具，為網頁開發者而製作，在本文中我來為大家詳細介紹一下CSS Scan這款插件

CSS Scan快速查看網站CSS代碼

看到一個網站設計的非常好，就可以點擊擴展圖標開啟CSS Scan

開啟CSS Scan後，鼠標就變成了一個類似Chrome控制台的指針工具，可以顯示出每個元素所用到的CSS代碼，比如字體、字號、字重、尺寸等，非常多的參數

可以看到和下面Chrome自帶工具相比，差距還是非常大的

CSS Scan快速複製CSS代碼

如果你看到某一個網頁元素的樣式非常的好，想要學習一下，你就可以使用CSS Scan把它的CSS樣式複製下來

懸浮到對應元素上後，點擊一下鼠標，提示複製到剪貼板，證明粘貼成功了

默認情況下是粘貼的CSS樣式代碼，不包含類名，如果你比較懶的話，懶得自己去想類名，這時候你可以開啟下面這個選項

然後就會得到類似下圖的完整代碼

用顯示Grid選項配合分析網站

如果我們想要複製一個簡單的元素，比如按鈕、輸入框之類的，可能查看一個類的CSS代碼就足夠了；但是有時候我們需要參考學習整個頁面的布局設計，就需要整體分析了

這個時候可以開啟CSS Scan的顯示Grid選項，全面分析網站樣式

CSS Scan是一款非常適合網頁開發人員尤其是初學者的工具，它可以讓你更快地學習他人的樣式代碼，提高工作效率

标签: none