[VS Code Extension] CSS Peek：快速在 HTML 查看 CSS 樣式

網址

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek#:~:text=Peek%3A%20load%20the%20css%20file,the%20symbol%20(%20Ctrl%2Bhover%20)

2024-01-19 15:43:54

VS Code 上的 CSS Peek 擴充功能可讓您快速查看 HTML 中分配的各種class名稱和 ID 的 CSS 樣式定義。

使用方法有以下三種：

按住 Ctrl 鍵並將滑鼠 Hover 在 class 名稱或 ID 上，以預覽其定義。
使用鍵盤快捷鍵開啟一個持久的定義視窗，顯示 class 名稱或 ID 的 CSS 定義。
使用鍵盤快捷鍵導航到其 CSS 檔案中定義所在的位置。

透過這個工具可以在開發上更加有效率。

BuildShip：視覺化的 AI 輔助後端架構工具 tripsei：透過與 AI 對話取得行程與便宜的機票

你可能也會喜歡的

CSS 的穿透屬性- pointer-events

[CSS] 設定 dark mode 下的 CSS 樣式

使用 CSS 的 mix-blend-mode 製作隨滑鼠移動改變樣式的效果

W3Schools- 非常老牌且豐富的網頁教學網站

Animista：好用的線上 CSS 動畫產生器

[CSS] 讓偽元素(::before, ::after...) content 抓取 attr 的內容可以換行

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。