這篇教學是網站架設的基本功之一,協助「初學者」有效和快速查詢得到網頁的 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 (名稱) 三步曲
步驟一:
步驟二:
步驟三:
在右邊的 [元素 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: An Intro to CSS: Finding CSS Selectors
- Google Chrome DevTools – Chrome Developers
- Open Chrome DevTools
- Google Chrome:Google 打造的瀏覽器
- CSS 選擇器 – 術語表 | MDN
- ID 选择器 – CSS(层叠样式表) | MDN
- 維基百科:什麼是 CSS (階層式樣式表)?
- 網站迷谷:區塊編輯器
- 網站迷谷:傳統編輯器
我們提供市場上最新的網站架設
新聞、教學和相關知識,我們不會向用戶
發送垃圾和推廣內容,而你可以隨時「取消訂閱」。
學員人數:9,200+ 人 (持續增加之中)
在〈如何找出網頁裡的 CSS Class Name (名稱) 和 ID Selector (選擇器)?〉中有 4 則留言