CSS Scanner 快速查看或複製網頁任何 HTML 元素的 CSS

CSS Scanner 快速查看或複製網頁任何 HTML 元素的 CSS

CSS 是一種用來控制網頁 HTML 元素的顯示方式、排列位置和美觀風格的語言,可讓網頁更加生動和易於閱讀,對於初學者而言,利用瀏覽器內建的「檢視網頁原始碼」或是「開發人員工具」來參考別人的 CSS 語法,不但可以增加自己排版的技巧與功力,更可以提高網頁開發效率。

CSS Scanner 是一款極具便利性和直觀性的瀏覽器擴充功能,它能夠直接顯示出網頁上任何 HTML 元素所套用的 CSS 語法,操作上,只需在網頁上滑動滑鼠游標到任意 HTML 元素上,CSS Scanner 就會立即顯示出該 HTML 元素所使用的 CSS 語法及其相關屬性,並讓使用者能夠輕鬆地複製該語法,以供後續使用。

使用 CSS Scanner 可以讓網頁開發者更加有效率的進行網頁設計,當需要知道網頁上某個 HTML 元素所套用的 CSS 屬性時,只需要使用 CSS Scanner 即可,無需進行繁瑣的手續來查找 CSS 語法,藉此提高網頁開發效率。

§相關文章,還可以參閱:

如何使用 CSS Scanner 查找與複製網頁任何 HTML 元素所使用的 CSS?

1.CSS Scanner 瀏覽器擴充功能,可安裝基於 Chromium 所開發的瀏覽器,例如 Google Chrome、Microsoft Edge、Opera、Brave 等瀏覽器,以下以 Edge 瀏覽器說明,進入 chrome 線上應用程式商店後,按[ 取得 ]按鈕。

CSS Scanner 快速查看或複製網頁任何 HTML 元素的 CSS

2. 隨後,依引導進行安裝,完成後會出現提示。

CSS Scanner 快速查看或複製網頁任何 HTML 元素的 CSS

3.在想要得知 CSS語法的網頁上,按剛剛安裝的 CSS Scanner 按鈕,接下來,當滑鼠指標指到任何的 HTML 元素就會直接顯示該元素套用的 CSS屬性。

CSS Scanner 快速查看或複製網頁任何 HTML 元素的 CSS

4.上方的[ Options ]按鈕,可以讓我們開啟釘選及網格模式等選項,另外,還有鍵盤快速建說明。

CSS Scanner 快速查看或複製網頁任何 HTML 元素的 CSS

5.開啟[ On-Click Behaviour ]模式,可讓我們按下滑鼠左鍵時,就將該 HTML 元素的 CSS 屬性表釘選在網頁上且可以釘選多個,並可直接將該語法傳送到 CodePen 直接執行或是直接複製 CSS 屬性到剪貼簿。

CSS Scanner 快速查看或複製網頁任何 HTML 元素的 CSS

CSS Scanner 快速查看或複製網頁任何 HTML 元素的 CSS

6.而開啟[ Display Behaviour ]選項,則以網格顯示整個網頁布局。

CSS Scanner 快速查看或複製網頁任何 HTML 元素的 CSS

CSS Scanner 不論是用在學習 CSS 或是微調自家網頁,都是相當不錯用的工具,比起使用瀏覽器內建的檢視網頁原始碼或是開發者工具都來的更加直覺且快速。

以往在網路上看到的圖片,如果要編輯,必須先將圖片下載回自己的電腦,然後再透過圖片編輯軟體進行後續的編輯,而如今,這個萬年不變的操作步驟,則是被 Microsoft Edge 瀏覽器打破,使用者無須先下載圖片,就可以編輯網路圖片了。