這篇文章最後更新日期:2024 年 8 月 4 日
作者: Mack Chan
這篇教學是網站架設的基本功之一,協助「初學者」有效和快速查詢得到網頁的 CSS Class Name (名稱) 和 Id Selector (選擇器)。這是一個非常重要的「起手式」,在往後很多教學都要求新手懂得查詢到網頁裡的 CSS 名稱。
不然我們無法指定一些 [新的 CSS 屬性] 給它們。這篇教學約 5 分鐘就可以學會,我們會以市場佔有率最高的 Chrome DevTools (開發人員工具) 作為學習工具,讓新手快速進入學習的狀態。
Chrome DevTools (開發人員工具) 是什麼?
Chrome DevTools 提供一系列協助網站站長研究網站的工具,這內建在 Google Chrome 瀏覽器,而且是免費和無條件就可以下載使用。不過當中大部分工具是需要一定的技術門欖,所以比較適合進階操作和資深的站長使用。
方法一:不同平台常用快捷鍵參考
不少站長常說的按 Chrome F12 去查找網頁資料就是這個由來,加上 Chrome 的市場佔有率又是最高的代表,F12 變成了一個標誌性的代名詞。
- Mac:Command + Option + I
- Windows / Linux:F12 (Control + Shift + I)
方法二:從 [右鍵] 清單中選出 [檢查 / Inspect]
打開 Chrome 瀏覽器,在你希望查詢的網頁的地方,按滑鼠的 [右鍵] → [檢查 / Inspect],這也跟按下鍵盤的 F12 有相同的效果。
Chrome DevTools 開發者工具介面
Chrome DevTools 開發者工具提供很多功能,不過我們這次教學只會聚焦在如何找出網頁裡的 CSS Class Name (名稱) 和 Id Selector (選擇器),這個功能不太顯眼,就是有個「黑色箭頭」的外觀就是了,這個功能名是 [檢查圖示 / Inspect Icon]。
[檢查圖示 / Inspect Icon] 的功用
這個是最常用的功能之一,點擊一下就能啟用,然後我們回到網頁的畫面。
找出網頁裡的 CSS Class Name (名稱) 三步曲
步驟一:
點擊目標的網頁元素,例如標題、段落或圖片。
步驟二:
在彈出視窗裡的可以發現 CSS Class Name (名稱) 字串。
步驟三:
把 CSS Class Name (名稱) 複制起來備用。
在右邊的 [元素 Elements] 裡 [樣式 Style] 面板設定
例如案例裡的 .site-title 這個 CSS 名稱,就可以點擊後複制起來。
在允許你修改 CSS 的地上貼上
在 WordPress 網站後台裡,[控制台] → [外觀] → [附加的 CSS] 可以找到讓你調整 CSS 的地方,當然不限於這個地方。這篇教學到此為止,初學者只需要懂得找出這個 CSS Class Name (名稱) 就可以在將來很多教學裡應用。
常見問題 FAQ
Chrome DevTools (開發人員工具) 是什麼?
Chrome DevTools 提供一系列協助網站站長研究網站的工具,這內建在 Google Chrome 瀏覽器,而且是免費和無條件就可以下載使用。不過當中大部分工具是需要一定的技術門欖,所以比較適合進階操作和資深的站長使用。
不同平台常用快捷鍵參考
不少站長常說的按 Chrome F12 去查找網頁資料就是這個由來,加上 Chrome 的市場佔有率又是最高的代表,F12 變成了一個標誌性的代名詞。
Mac:Command + Option + I
Windows / Linux:F12 (Control + Shift + I)
參考資料和引用文獻:
我們提供市場上最新的網站架設
新聞、教學和相關知識,我們不會向用戶
發送垃圾和推廣內容,而你可以隨時「取消訂閱」。
WordPress 學員人數
15,000+ 人 (持續增加之中)
在〈如何找出網頁裡的 CSS Class Name (名稱) 和 ID Selector (選擇器)?〉中有 4 則留言