CSS 功能參考

在以下關於 Microsoft Edge DevTools 檢視與變更 CSS 功能的綜合參考書中，探索新的工作流程。

想學基礎，請參見「開始檢視與更改 CSS」。

詳細內容：

選擇元素

DevTools 中的 元素 工具可以讓你一次查看或更改一個元素的 CSS。 所選元素會在 DOM 樹中被標示。 元素的樣式會在 樣 式面板中顯示。 有關教學，請參見「元素的 CSS」。

一個被選元素的範例

在上圖中：

  • h1 DOM 樹中標示的元素即為所選元素。
  • 右側的樣式 窗格顯示 該元素的樣式。
  • 在左側，該元素在視窗中被高亮顯示，但那只是因為滑鼠目前在 DOM 樹中懸停在它上方：

選擇元素有多種方式：

  • 在渲染的網頁中，右鍵點擊頁面元素，然後點擊 檢查。

  • 在 DevTools 中，點擊選取元素 (選擇元素) ，或在 Windows (按 Ctrl+Shift+C，macOS) 按 Linux) 或 Command+Shift+ (C，然後在視窗中點擊該元素。

  • 在 DevTools 中，點擊 DOM 樹中的元素。

  • 在 DevTools 中執行查詢，例如document.querySelector('p')在控制台，右鍵點擊結果，然後在 Elements 面板中選擇「揭示」。

查看 CSS

使用 元素>樣式 與 計算分 頁來檢視 CSS 規則並診斷 CSS 問題。

樣式標籤在不同位置顯示連結，指向其他多個地方，包括但不限於：

  • 除了 CSS 規則、樣式表和 CSS 原始碼之外。 這些連結會開啟 來源 工具。 若樣式表已被壓縮，請參閱「 以 pretty-print 格式化壓縮的 JavaScript 檔案 」，在 JavaScript 除錯功能中。

  • 在繼 承的 部分中，會被分配到父元素。

  • 在通話中 var() ，對海關財產申報。 請參見 MDN 上的 Using CSS 自訂屬性 (變數) 。

  • 在簡寫性質中 animation ，為 @keyframes。

  • 在文件工具提示中了解更多連結。

連結的樣式可能會有所不同。 如果你不確定某個東西是連結，可以點進去看看。

例如：

  1. 在新視窗或分頁中進入 待辦應用程式 。

  2. 右鍵在「新增任務」字串上方的空白處，然後點 選檢查。

    DevTools 開啟，選取 Elements 工具。

  3. 選擇 「樣式」 標籤。

    會顯示各種類型的連結：

    標示的多個連結

查看包含 CSS 文件、具體性及自訂屬性值的工具提示

在 元素 工具中， 樣式 標籤顯示工具提示，當你將滑鼠移到特定元素上時，會顯示有用資訊。

查看 CSS 文件

要在提示中顯示 CSS 屬性的描述：

  1. 在新視窗或分頁中，進入網頁，例如 待辦應用程式。

  2. 右鍵在「新增任務」字串上方的空白處，然後點 選檢查。

    DevTools 開啟，選取 Elements 工具。

  3. 選擇 「樣式」 標籤。

  4. 將滑鼠移至CSS屬性名稱上，例如 padding:。

    會顯示一個提示：

    包含 CSS 屬性文件的小提示

    DevTools 會從 VS Code 自訂資料 庫中拉取提示的描述。

  5. 在提示中，點擊「 了解更多 」連結。

    MDN 上該屬性的 CSS 參考頁面會顯示，例如 padding CSS 屬性。

要關閉 CSS 工具提示：

  • 在提示中，選擇 「不顯示 」勾選框。

要重新開啟 CSS 工具提示：

  1. 在 DevTools 中，選擇 「自訂並控制 DevTools」，然後選擇 「設定」。

  2. 在左側的大綱中，選擇 偏好設定，然後往下滑到 元素 區塊。

  3. 選擇 「顯示 CSS 文件提示 」勾選框。

檢視選擇器專精

將滑鼠移至CSS選擇器上，可顯示該選擇器專一性權重的工具提示，例如： 專一性： (0,0,1) ：

例如：

  1. 在新視窗或分頁中，進入網頁，例如 待辦應用程式。

  2. 右鍵點擊網頁，然後點 選檢查。

    DevTools 開啟，選取 Elements 工具。

  3. 在 DOM 樹中，選擇元素。<body>

  4. 在 Styles 標籤中，將滑鼠移到 body CSS 選擇器上。

    會顯示一個提示，顯示 具體度： (0,0,1) ：

    工具提示中標示匹配選擇器的專一權重

另請參閱:

查看自訂屬性的數值

將滑鼠移到 var(--custom-property) 函式上，可以看到工具提示中自訂屬性的值。

例如：

  1. 在新視窗或分頁中，進入網頁，例如 待辦應用程式。

  2. 右鍵點擊網頁，然後點 選檢查。

    DevTools 開啟，選取 Elements 工具。

  3. 在 DOM 樹中，選擇元素。<body>

  4. 在 Styles 標籤中，CSS body 規則中，將滑鼠移到 --spacing。

    數值 .3rem 會顯示在提示中：

    工具提示中自訂屬性的價值

另請參閱:

查看定義規則的外部樣式表

在 樣式 窗格中，點擊 CSS 規則旁的連結，即可開啟定義該規則的外部樣式表。 樣式表會在來源工具的編輯器窗格中開啟。

如果樣式表已縮小，請點擊編輯器窗格底部的「格式化 (格式化) 」按鈕。 欲了解更多資訊，請參閱「以 JavaScript 除錯功能重格式化壓縮 JavaScript 檔案，並使用漂亮列印」。

查看定義規則的樣式表

在上圖中，點擊 to-do-styles.css:5後，你會被帶到 第 5 to-do-styles.css行，CSS 規則的定義就 h1 在那裡。

檢視無效、覆寫、非活躍及其他 CSS

樣式標籤會辨識多種 CSS 問題，並以不同方式標示。

只查看實際套用到元素的 CSS

樣 式 面板會顯示所有適用於元素的規則，包括已被覆寫的宣告。 當你不在意被覆寫的宣告時，可以用 Computed 面板只查看實際套用到元素的 CSS。

例如：

  1. 在新視窗或分頁中，進入網頁，例如 待辦應用程式。

  2. 右鍵點擊 「我的任務」標題，然後點 選檢查。

    DevTools 開啟時，選取 了元素 工具，並選取 <h1> 了 DOM 樹中的元素。

  3. 在 元素 工具中，選擇 計算分 頁。

    套用到所選元素的 CSS 屬性會顯示：

    計算面板

    斜體字的屬性名稱和值表示執行時計算的值。

  4. 要顯示所有屬性，請選擇 「全部顯示」 勾選框。

依字母順序查看 CSS 屬性

使用 計算面板 。 請參閱上方僅 檢視實際套用到元素的 CSS。

檢視繼承的 CSS 屬性

在計算面板中勾選「全部顯示」的核取框。 請參閱上方僅 檢視實際套用到元素的 CSS。

查看 CSS at-rules

At-rules 是 CSS 陳述式，讓你能控制 CSS 的行為。

在 元素 工具中， 樣式 標籤會顯示以下專門區塊的 at-rules：

查看 @property at-rules

@property CSS at-rule 允許你在樣式表中定義特定類型的 CSS 自訂屬性。

將滑鼠移到「 樣式」 標籤中此類屬性名稱上，即可查看包含以下提示：

  • 該財產的價值，例如 20%。
  • 該物業的描述符，例如： initial value: 40%
  • 在風格標籤底部可摺疊@property區塊中，「查看已登記財產」連結至其登記。

例如：

  1. 在新視窗或分頁中，進入使用 @property at-rule 的頁面，例如 View @property at-rules。

  2. 右鍵點擊 「項目」三 段，然後點 選檢查。

    DevTools 開啟，選取 Elements 工具。

  3. 在 樣式 標籤中，將滑鼠移到該 var(--itemSize) 函式上：

    at-property CSS at-rule 工具提示

    提示內容如下：

    • 該財產的價值，例如 100px。
    • 財產的描述符，例如初始價值。
    • 查看註冊財產連結。

  4. 點擊 「查看登記財產 」連結。

    擴展後的 @property 區塊則顯示在 風格標籤的 更下方：

    --itemSize 在 at-property 區塊

要編輯 @property 規則，請雙擊其名稱或數值。 詳見下方「 變更宣告名稱或值」。

另請參閱:

查看 @supports at-rules

Styles 標籤會顯示 @supports CSS at-rules 是否套用到元素。

例如，要查看規則：@supports

  1. 在新視窗或分頁中，請前往使用 @supports at-rule 的頁面，例如 View @supports at-rules。

  2. 右鍵點選「我支援 CIE LAB 色彩空間！」，然後選擇 檢查。

    DevTools 開啟。 在 元素 工具的 DOM 樹中，選取該 <div class="box"> 元素。 在 樣式 標籤中， @supports 列出了 CSS 宣告：

    at-support at-rule 的 HTML 結果

  • 如果你的瀏覽器支援這個 lab() 功能，該元素是綠色的。

  • 如果你的瀏覽器不支援這個 lab() 功能，該元素會顯示紫色。

要查看哪些瀏覽器版本支援 CIE LAB 色彩空間，請搜尋 Caniuse.com「lab」。

查看 @scope at-rules

樣 式 標籤會顯示若套用到元素的 CSS @scope at-rules。

@scope at-rule 允許你設定 CSS 樣式的範圍;也就是明確地將樣式套用到特定元素。 請參見 @scope MDN 的 CSS at-rule 。

查看規則：@scope

  1. 在新視窗或分頁中，請前往使用 at-rule 的 @scope 頁面，例如 View @scope at-rules 示範：

    HTML & CSS 對 at-scope at-rule 的結果

  2. 右鍵點擊「我是卡牌上的文字」，然後選擇 檢查。

    DevTools 開啟，選取 Elements 工具。

  3. 選擇 「樣式」 標籤。

  4. 請檢視這 @scope 條規則：

    Styles 標籤中的 at-scope 規則

    在這個例子中， @scope 規則 (背景色 = plum) 覆蓋了 aquamarine) (的全域 CSS background-color 宣告，適用於任何 <p> 包含元素 (的元素，例如 <div> 擁有 card 類別的) 。

    要編輯 @scope 規則，請雙擊進入規則：

  5. 在 樣式 標籤中，雙擊 李子，按 刪除，然後選擇 米色。

    展示網頁中卡片上的文字會從李子色背景變成米色背景。

查看 @font-palette-values at-rules

@font-palette-values CSS at-rule 允許你自訂 (覆蓋) 屬性的預設值font-palette。 在 元素 工具中， 樣式標籤會 以專屬區塊顯示此規則。

要查看 CSS 規則：@font-palette-values

  1. 在新視窗或分頁中，切換到使用 at-rule 的 @font-palette-values 頁面，例如 View @font-palette-values at-rules 示範。

  2. 右鍵點選「新顏色」，然後選擇 檢查。

    DevTools 開啟，選取 Elements 工具。

  3. 在 樣式 標籤中，找到 @font-palette-values CSS 規則：

    在 Styles 標籤中的 at-font-palette-values 規則

    在此範例中， --New 字型調色盤值會覆蓋彩色字型的預設值。

    要編輯自訂值，請雙擊，如下：

  4. 在 @font-palette-values CSS 規則中，在屬性中 override-colors 雙擊 0 gold, 1 red，然後輸入 0 blue, 1 red。

    在檢查的網頁中，「新顏色」現在會被渲染成藍色和紅色。

查看 @position-try at-rules

@position-try CSS 規則加上這個position-try-fallbacks特性，讓你可以為元素定義替代的錨點位置。

在 元素 工具中， 樣式 標籤會解析並連結以下內容：

  • position-try-fallbacks屬性值 (或position-try-options屬性值) 連結到專門的 @position-try --name CSS 規則區塊。

  • position-anchor屬性值與anchor()參數連結到具有popovertarget屬性的對應元素。

例如， position-try-fallbacks 檢查值與 @position-try CSS 規則如下：

  1. 在新視窗或分頁中，切換到使用 position-try-fallbacks 值與 @position-try at-rule 的頁面，例如 View @position-try at-rules 示範。

  2. 在渲染後的網頁中，開啟子選單;也就是說，點選你的帳戶，然後點選商店。

    子選單顯示指令列表： LISTINGS、 SPECIAL OFFERS、 SIGN OUT。

  3. 在子選單中，右鍵點擊「 LISTINGS」上方，然後選擇 「檢查」。

    DevTools 開啟，選取 Elements 工具。 子選單元素 <ul id="submenu"> 是在 DOM 樹中選擇的：

    HTML & CSS 對於 at-position-try at-rule 的結果

  4. 在 Styles 標籤的 #submenu CSS 規則中，找到該 position-try-fallbacks 屬性，然後點擊它的 --bottom 值。

    風格 標籤會 往下滑到對應 @position-try 的區塊：

    風格標籤中的位置嘗試區段

  5. 在 Styles 標籤的 #submenu CSS 規則中，點擊 --submenu 以下任一屬性中的連結：

    position-anchor: --submenu;
left: anchor(--submenu right);
top: anchor(--submenu top);

    DOM 樹會選擇 (<button popovertarget="submenu">) 中具有對應 popovertarget 屬性值的元素， (popovertarget="submenu") ，而 Styles 標籤會顯示該元素的 CSS：

    DOM 樹中選擇的按鈕元素及其 CSS

要編輯一個數值，請雙擊該數值。

另請參閱:

檢視元素的盒子模型

要查看元素的盒子模型，請前往 樣式 窗格，然後往下滑。

要更改某個數值，請雙擊該數值。

在下圖中，樣式面板中的盒模型圖顯示了目前所選h1元素的盒狀模型：

盒型模型圖

另請參閱:

搜尋並篩選元素的 CSS

使用樣式與計算面板上的篩選文字框，搜尋特定的 CSS 屬性或值。

若要在 計算 面板中搜尋繼承的屬性，請勾選 「全部顯示」 勾選框。

在下圖中， 樣式 窗格被篩選為只顯示包含搜尋查詢 color的規則。

篩選樣式面板

在下圖中， 計算面板 被篩選為只顯示包含搜尋查詢 100%的宣告：

篩選計算面板

模仿專注的頁面

如果你從檢視網頁切換到 DevTools，有些覆蓋層元素會自動隱藏，只要是被焦點觸發的。 例如：

  • 下拉選單。
  • 選單。
  • 選棗的人。

要像頁面有焦點一樣除錯此類元素，請執行以下任一步驟：

  • 在 元素 工具的樣 式 標籤中，點選 :hov (切換元素狀態) ，然後選擇模擬 聚焦頁面 的勾選框。
  • 在 渲染 工具中，選擇 「模擬聚焦頁面 」的勾選框。

注意： 當這個選項開啟時，事件 document.visibilityState 會被設定為 ， visible 事件 visibilitychange 不會觸發。 請參閱 MDN 的 頁面可視化 API 。

要嘗試模擬專注頁面：

  1. 在新視窗或分頁開啟 Emulate 專注頁面 示範。

  2. 點擊輸入文字框。 或者，按 Tab 鍵將焦點放在輸入文字框上。

    輸入文字框下方出現另一個元素，寫著「此訊息僅在文字框聚焦時出現。」

  3. 右鍵點擊輸入文字框，然後選擇 檢查。

    DevTools 開啟後，訊息元素消失了。 現在 DevTools 視窗變得聚焦，而不是檢查過的網頁，因此訊息元素消失了。

  4. 在 元素 工具的樣 式 標籤中，點選 :hov (切換元素狀態) ，然後選擇模擬 聚焦頁面 的勾選框。

  5. 確保輸入文字框元素 <input id="textBox" type="text"> 仍然被選取。

    在輸入文字框下方，訊息元素會重新出現在輸入文字框下方。

    你現在可以檢查輸入文字框下方的訊息元素，儘管焦點是 DevTools，而非檢查頁面：

    Emulate a focused page 勾選了核取方塊

  6. 清理：在 Elements 工具的 樣式 標籤中，點選 :hov (切換元素狀態) ，然後清除「 模擬聚焦頁面 」的核取框。

渲染工具中也會出現「模擬聚焦頁面」的核取方塊;請參閱渲染工具，查看網頁在不同顯示選項或視覺缺陷下的樣貌。

另請參閱:

切換一個偽類別

要切換偽類別：

  1. 在新視窗或分頁中，進入網頁，例如 待辦應用程式。

  2. 輸入任務，例如 任務 1。

  3. 右鍵點擊網頁，然後選擇 檢查。

    DevTools 開啟。

  4. 選擇 元素 工具。

  5. 在 DOM 樹中，選擇元素。<li class="task">

  6. 選擇 「樣式」 標籤。

  7. 在右上角點選 ：hov。

    會顯示勾選框。

  8. 選擇你想啟用的偽類別的核取方塊，例如 :hover：

    選擇：hover 偽類

    在渲染後的網頁中，任務名稱旁的圓圈會被勾勾填滿，任務右側會出現一個紅色 X 在紅圈內，好像該元素被懸停在上方，儘管實際上並沒有被懸停在上方。

Styles 標籤顯示所有元素的以下偽類別：

此外，某些元素可能具有特定元素的偽類別。 當你選擇這樣的元素時， Styles 標籤會顯示一個 Force 特定的元素狀態 區塊，你可以展開並開啟該元素專屬的偽類別，例如 ：read-write 核取方塊：

「textarea」元素中原力特定元素狀態區段

關於互動式教學，請參見 「為類別新增偽狀態」。

檢視繼承的高亮偽元素

偽元素讓你能為元素的特定部分做造型。 高亮偽元素是指文件中帶有「已選取」狀態的部分，並以「高亮」方式呈現，以向使用者顯示此狀態。

例如，這類偽元素包括：

  • ::selection
  • ::spelling-error
  • ::grammar-error
  • ::highlight

當多個樣式衝突時，CSS 級聯決定勝出的樣式。 請參閱 MDN 的 CSS 級聯介紹 。

為了更了解規則的繼承與優先順序，請參考以下示範中的繼承高亮偽元素。

要查看繼承的高亮偽元素：

  1. 到新視窗或分頁進入 Highlight 偽元素 示範。

  2. 選取文字的一部分：「我繼承了我父母高亮偽元素的風格。 選我！」

    選取的文字會變成黃色底上的紅色文字。

  3. 右鍵點擊文字：「我繼承了我父母高亮偽元素的風格。 選我！」，然後選擇 檢查。

    DevTools 開啟。 在 元素 工具的樣 式 標籤中，該區段顯示為： 繼承自 ：：selection 偽 of div.text-parent：

    請在樣式標籤中查看繼承部分

  4. 在 DOM 樹中，選擇元素。<div class="text-parent">

    在 樣式 標籤中，該區塊顯示為： Pseudo ：：selection 元素：

    請在風格標籤中查看偽版區

另請參閱:

檢視級聯圖層

層級疊加層能更明確地控制你的 CSS 檔案，以避免樣式專屬衝突。 這對以下用途很有用：

  • 龐大的程式碼庫。
  • 系統設計。
  • 管理第三方風格。

要查看級聯層：

  1. 可以去使用級聯圖層的網頁，例如 Cascade 圖層 示範。

  2. 右鍵點選「我的樣式已分層！」元素，然後選擇 檢查。

    DevTools 開啟。

  3. 在 元素 工具中，選擇 樣式 標籤。

  4. 在 樣式 標籤中，檢視三個級聯層及其樣式： page、和 componentbase：

    級聯層

  5. 要查看圖層順序，請點擊頁面、元件或基底) (圖層名稱。 或者，點擊切換 CSS 圖層檢視圖示切換 CSS 圖層檢視 按鈕。

    該 page 層具有最高的特異性，因此元素的背景為綠色。

另請參閱:

列印模式下查看頁面

要以列印模式瀏覽頁面：

  1. 前往一個網頁。

  2. 右鍵點擊網頁，然後選擇 檢查。

    DevTools 開啟。

  3. 按一兩次 Esc 鍵，讓 快速檢視 工具列出現在 DevTools 的底部。

  4. 在 快速檢視 工具列中，選擇 「更多工具 (+) 」。

  5. 選擇 渲染 工具。

    渲染工具會在 DevTools 底部的快速檢視面板開啟。

  6. 在 渲染 工具中，點選「 模擬 CSS 媒體類型 」下拉選單，然後選擇 列印。

    網頁呈現得像是在列印。

  7. 完成後，在 渲染 工具中點選「 模擬 CSS 媒體類型 」下拉選單，然後選擇 「無模擬」。

使用覆蓋率工具查看已使用與未使用的 CSS

覆蓋率工具會顯示頁面實際使用的 CSS。

  1. 在 Windows (按 Ctrl+Shift+P 開啟指令選單， (macOS) 按 Linux) Ctrl+Shift+P 開啟指令選單， DevTools 則是焦點。

  2. 開始輸入 coverage，然後選擇 顯示報導：

    從指令選單開啟覆蓋工具

    覆蓋率工具會出現：

    覆蓋率工具

  3. 點擊 開始儀器化覆蓋範圍並重新整理頁面 (開始儀器化覆蓋範圍並重新整理頁面) 。 頁面會重新整理， 覆蓋 率工具會提供瀏覽器載入每個檔案中 CSS (和 JavaScript) 的總覽。 綠色代表已使用的 CSS。 紅色代表未使用的 CSS。

    以下是 CSS (與 JavaScript) 的使用與未使用的概覽：

    CSS (和 JavaScript) 的使用與未使用的概覽

  4. 若要逐行顯示所使用的 CSS 分類，請點擊 CSS 檔案。

    在下圖中，第 b66bc881.site-ltr.css 145至147行及第149至151行未被使用，而第163至166行則被使用：

    已使用與未使用的 CSS 逐行分析

強制列印預覽模式

請參考 強制開發工具進入列印預覽模式。

複製 CSS

從 樣式 分頁的單一下拉選單，你可以複製不同的 CSS 規則、聲明、屬性或值;請參閱 MDN 的 CSS 語法基礎 ，網址為 What is CSS？ 。

此外，你也可以複製 JavaScript 語法的 CSS 屬性。 如果你用的是 CSS in-JS 函式庫，這個選項很方便;請參見 CSS in-JS 框架的樣式編輯。

要複製 CSS：

  1. 在新視窗或分頁中，進入使用 CSS 的網頁，例如 To Do 應用程式。

  2. 右鍵點擊網頁，然後點 選檢查。

    DevTools 開啟，選取 Elements 工具。

  3. 在 DOM 樹中，選擇一個元素，例如 <h1>。

  4. 在 Styles 標籤中，CSS 規則中，右鍵點擊 CSS 屬性，例如 text-align: center：

    複製 CSS 下拉選單

  5. 選擇一個右鍵選單項目：

    • 收到聲明。 以 CSS 語法複製該屬性及其值： property: value;

    • 複製財產。 只 property 複製名字。

    • 複製價值。 僅複製 .value

    • 版權規定。 複製整個 CSS 規則： selector[, selector] { property: value; property: value; ... }

    • 複製聲明為 JS。 以 JavaScript 語法複製屬性及其值： propertyInCamelCase: 'value'

    • 複製所有聲明。 複製 CSS 語法中的所有屬性及其值： property: value; property: value; ...

    • 將所有宣告複製為 JS。 以 JavaScript 語法複製所有屬性及其值： propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • 複製所有 CSS 變更。 將你在 Styles 標籤所做的變更複製到所有宣告中。 這個選單項目會有條件地出現。

    • 查看計算結果。 會帶你進入 計算分 頁;請參見上方 「僅檢視實際套用於元素的 CSS」。

變更 CSS

本節列出所有可以在 元素>樣式中更改 CSS 的方法。

此外，你還可以：

將 CSS 宣告加入元素的兩種方式

宣告的順序會影響元素的樣式。 你可以透過加入內聯聲明，或是在樣式規則中加入聲明來新增宣告。 以下章節將介紹這兩種方法。

在元素中加入內嵌 CSS 宣告

新增內嵌宣告等同於在元素的 HTML 中加入 style 屬性。 大多數情況下，你可能會想使用內嵌宣告。

內嵌宣告的具體性比外部宣告高，因此使用內嵌宣告能確保變更在你特定且預期的元素中生效。 欲了解更多關於特異性的資訊，請參閱MDN的特異性選擇器類型。

要新增內聯聲明：

  1. 選擇一個元素。

  2. 在 Styles 選區，點擊 element.style 區塊的括號之間。 游標會聚焦，讓你能輸入文字。

  3. 輸入房產名稱並按 Enter 鍵。

  4. 輸入該屬性的有效值並按下 Enter 鍵。 在 DOM 樹中，元素中新增了一個 style 屬性。

或者，在屬性欄位輸入值，DevTools 會建議一份匹配屬性 ：值 對的清單，供你選擇。 例如，如果你在屬性欄位輸入 bold ，DevTools 會建議 font-weight: bold 和 font-weight: bolder 作為可能的規則。 按 Enter 鍵套用規則。

在下圖中， margin-top 與 background-color 屬性已套用於所選元素。 在 DOM 樹中，宣告會反映在元素的 style 屬性上。

新增內聯宣告

在現有樣式規則中新增 CSS 宣告

如果你在除錯元素的樣式，並且需要特別測試宣告在不同位置被定義時會發生什麼，請在現有的樣式規則中加入宣告。

要在現有的樣式規則中新增聲明：

  1. 選擇一個元素。

  2. 在樣 式 窗格中，點擊你想加入宣告的樣式規則的括號間。 游標會聚焦，讓你能輸入文字。

  3. 輸入房產名稱並按 Enter 鍵。

  4. 輸入該屬性的有效值並按下 Enter 鍵。

在風格規則中加入宣告

更改宣告名稱或值

要更改 CSS 宣告的名稱，請雙擊該宣告的名稱。

要更改 CSS 宣告的值，請雙擊該宣告的值。 以下截圖顯示從清單中選擇一個值：

變更宣告的價值

要更改數值，請輸入該數值，或使用下一節的方向鍵。

使用鍵盤快捷鍵更改可列舉值

若要更改 CSS 宣告的數值，請輸入該值，或使用方向鍵將該值增加特定金額。 在編輯宣告的可枚舉值時， font-size例如，您可以使用以下鍵盤快捷鍵，將該值增加固定數量：

組合鍵 動作
Windows (Alt+Up Arrow，Linux) ，Option+UpArrow (macOS) 增加0.1。
上箭頭 增加 1，或如果當前值介於 -1 與 1 之間，則增加 0.1。
Shift+ 向上鍵 再增加10。
Windows (Ctrl+Shift+PgUp，Linux) ，Shift+Command+UpArrow ( macOS) 以100倍增加。

遞減時，按 (下箭頭鍵或向下) 鍵，而不是上箭頭 (或 ) 鍵。

變更長度值

你可以用指標改變任何具有長度值的屬性，例如 width、 height、 padding、 margin或 border。

要更改長度單位：

  1. 在新視窗或分頁開啟使用 CSS 的網頁，例如 待辦應用程式。

  2. 右鍵點擊文字「 新增任務」，然後選擇 檢查。

    DevTools 開啟，顯示 Elements 工具。 <label>元素會在 DOM 樹中被選取。

  3. 在 Styles 標籤中，CSS .new-task-form 規則的 max-width: 屬性中，將滑鼠移到 50rem。

    提示顯示等效值與單位： 800px。

  4. 點擊該值 50rem。

    提示顯示：「使用滑鼠滾輪或上下鍵遞增/遞減。 Ctrl：+/-100，Shift：+/-10，Alt：+/-0.1”

  5. 移動滾輪，或按下 上箭頭 和 下箭頭 鍵，同時按下鍵：

    Ctrl：增加100。 Shift：增加10。 替代：增加0.1。

    在檢查的網頁中， 新增任務 輸入框的寬度會隨著你改變值而改變。

  6. 在最大寬度屬性的值欄位中，讓值 200px (單位間的變化 rempx) 。

  7. 同樣地，移動滾輪，或按 上箭頭 和 下箭頭 鍵，同時按住 Ctrl (+/-100) 、 Shift (+/-10) ，或 Alt (+/-0.1) 鍵。

    在檢查的網頁中， 新增任務 輸入的文字框會隨著你改變值而改變寬度：

    更改輸入文字框的最大寬度

將類別加入元素

要將類別加入元素：

  1. 在 DOM 樹中選擇元素。

  2. 點擊 .cls。

  3. 在 新增類別 的文字框中輸入該類別名稱。

  4. 按 Enter。

    元素類別面板

模擬淺色與暗色主題偏好並啟用自動暗黑模式

要切換自動暗黑模式，或模擬使用者偏好的淺暗主題：

  1. 在 元素 工具的樣 式 標籤中，點擊右上角的「 切換常見渲染模擬 」 (畫筆圖示) 按鈕：

    切換常見渲染模擬

  2. 請從下拉選單中選擇以下選項之一：

    • 偏好的配色方案：光。 表示使用者偏好輕量主題。

    • 偏好配色方案：深色。 表示使用者偏好暗色主題。

    • 自動暗黑模式。 即使你沒實作，也會顯示你的頁面為暗黑模式。 另外，設定 prefers-color-scheme 為 dark 自動。

此下拉選單是模擬 CSS 媒體功能的prefers-color-scheme捷徑，並啟用渲染工具中的自動暗色模式選項。

另請參閱:

切換類別

要啟用或停用元素上的類別：

  1. 在 DOM 樹中選擇元素。

  2. 打開 元素類別 窗格。 參見 「向元素新增類別」。 在 新增類別 文字框下方，列出所有套用到該元素的類別。

  3. 切換你想啟用或停用類別旁的勾選框。

新增風格規則

新增一個風格規則：

  1. 選擇一個元素。

  2. 點擊 新樣式規則 (新樣式規則) 。 DevTools 在 element.style 規則下方插入了一條新規則。

    在下圖中，DevTools 在你點擊新樣式規則後新增h1.devsite-page-title了樣式規則。

    新增風格規則

選擇樣式表來新增規則

預設情況下，新增樣式規則時，DevTools 會建立一個新樣 inspector-stylesheet 式表，並在該樣式表中新增該樣式規則。

若想將規則加入現有樣式表中：

  • 點選並長按 新樣式規則 (新 樣式規則) ，然後從列表中選擇一個樣式表來加入樣式規則。

選擇樣式表

在樣式表中將風格規則加入特定位置

預設情況下，透過點擊 「新樣式規則 」 (「新樣式規則」圖示) 按鈕新增樣式規則，會將新規則插入樣式表中 element.style 規則 inspector-stylesheet 下方。

要在特定樣式表的特定位置新增樣式規則，請從 樣式 窗格開始：

  1. 在 元素 工具的樣 式 標籤中，將滑鼠移到你想新增樣式規則正上方的樣式規則上。

    在 CSS 規則右側的圖示下方) 按鈕下方顯示 Insert 樣式規則 (插入樣式規則。

  2. 點擊下方的 插入樣式規則 (圖 示下方的插入樣式規則) 按鈕：

    下方為格式規則插入

切換聲明

要開啟或關閉單一宣告：

  1. 選擇一個元素。

  2. 在 Styles 面板中，將滑鼠移至定義聲明的規則上。 每個聲明旁都會有一個勾選框。

  3. 選擇或清除聲明旁的勾選框。 當你清除聲明時，DevTools 會劃掉它，表示該聲明已不再啟用。

    在下圖中， margin-top 目前選取元素的屬性已被關閉。

    切換聲明

在動畫中編輯 ::view-transition 偽元素

請參閱：

將格子項目及其內容與格子編輯器對齊

請參閱：

用色彩選擇器更換顏色

顏色選擇器提供一個用於變更color與background-color宣告的使用者介面。

要開啟 色彩選擇器：

  1. 選擇一個元素。

  2. 在 樣式 窗格中，找到 color你想更改的 、 background-color或類似的宣告。 在 、 background-color或類似值的color左側，有一個小方形，作為顏色預覽。

    下圖左側的小方格 rgba(0, 0, 0, 0.7) 是該顏色的預覽。

    彩色預覽

  3. 點擊預覽即可開啟 色彩選擇器。

    選色者

以下圖與列表描述了 色彩選擇器中每個使用者介面元素。

《選色者》，註解

Callout 元件 描述
1 墨鏡
2 滴管 用吸管取樣頁面上的顏色
3 複製到夾板 把 顯示值 複製到你的剪貼簿。
4 顯示值 顏色的RGBA、HSLA或六進位表示。
5 色彩調色盤 點擊方塊即可改變顏色。
6 色相
7 不透明度
8 顯示值切換器 在當前顏色的RGBA、HSLA和六進位表示之間切換。
9 調色盤切換器 在材質設計調色盤、自訂調色盤或頁面色彩調色盤之間切換。 DevTools 會根據你樣式表中找到的顏色來產生頁面色彩調色盤。

另請參閱:

用吸管取樣頁面上的顏色

要將所選顏色更改為頁面上的其他顏色：

  1. 點擊滴 管 圖示 (滴 管) 。 你的游標變成放大鏡。

  2. 將滑鼠移到你想要取樣顏色的像素上，無論在螢幕上任何位置。

  3. 點擊確認。

    在下圖中， 色彩選擇器 顯示目前的色彩值為 rgba(0,0,0,0.7)，接近黑色。 點擊視窗後，黑色的顏色會變成目前高亮的黑色版本。

    使用滴管

另請參閱:

用角度時鐘改變角度值

角度時鐘提供一個使用者介面，用來更改 CSS 屬性值中的角度值。

打開 角度鐘：

  1. 選擇包含角度聲明的元素。

  2. 在 樣式 窗格中，找到 transform 你想更改的 OR background 聲明。 點擊角度值旁的 角度預覽 框。

    下圖中，左側 100deg 的小時鐘是角度的預覽。

  3. 點擊預覽以開啟 角度計時器：

    角度預覽

  4. 點擊 角度時鐘 圓圈來更改角度值，或滑鼠捲動以增加或減少角度值 1。

還有更多鍵盤快捷鍵可以更改角度值。 想了解更多，請參考 Styles 面板的鍵盤快捷鍵。

用陰影編輯器更改框和文字陰影

使用 Shadow Editor 來更改 HTML 元素上 OR text-shadow CSS 屬性的值box-shadow：

  1. 選擇 帶有 a box-shadow 或 text-shadow 宣告的元素。

    例如，在新分頁或視窗中開啟 1DIV 示範頁面 ，右鍵點擊該頁面並選擇 「檢查 」以開啟 DevTools，接著在 元素 工具中選擇該 <div class="demos"> 元素。

  2. 在 樣式 窗格的 .demos CSS 規則中，找到宣告， box-shadow 然後點擊它的 「開啟陰影編輯器 」 (「 陰影編輯器」按鈕圖示) 按鈕。

    《暗影編輯》開場：

    影子編輯

  3. 改變陰影屬性，如下：

    Property 如何改變
    Type 選擇 Outset 或 Inset。 僅對 box-shadow。
    X 偏移量 在文字框中指定一個數值，或拖曳藍點。
    Y偏移量 在文字框中指定一個數值，或拖曳藍點。
    柔邊 在文字框中指定一個數值，或拖曳滑桿。
    擴散 在文字框中指定一個數值，或拖曳滑桿。 僅對 box-shadow。

    這些變更會即時套用到渲染網頁中的元素：

    影子編輯器中所做的變更影響

使用緩和編輯器編輯動畫與過渡時機

使用 Easing Editor 來更改 HTML 元素上 animation-timing-function 或 transition-timing-function 屬性的值。

開啟 Ease Editor：

  1. 在 DevTools 的 DOM 樹中，選擇一個有 CSS 動畫或轉換的元素。

    例如，在新分頁或視窗中開啟 動畫物件展示頁面 ，右鍵點擊包含動畫的綠色方塊，然後選擇 檢查。

    DevTools 開啟，顯示 Elements 工具。

  2. 按 Ctrl+F 找到「旋轉器」，然後選擇 裡面<div class="animation-demo good">的元素。<div class="spinner">

    這個示範頁面上紅色 (壞) 和綠色 (良好) 框是兩種不同的 CSS 動畫。 這兩種動畫都透過 CSS animation 屬性執行，並定義一個 ease-in-out 時序函式。

  3. 在 Styles 標籤中，CSS .good .spinner 規則的 animation 聲明 ease-in-out中，左側點選 Open cubic bezier editor (Cubic beziereditor 圖示) 按鈕。

    緩和編輯器開頭：

    緩和編輯器

用預設調整時序

若要透過滑鼠點擊調整時序，請使用 緩和編輯器中的預設：

  1. 開啟緩和編輯器，依照上方「 剪輯動畫與過渡時序」的說明，使用緩緩編輯器。

  2. 點擊四個選擇按鈕之一：

    按鈕 函數類型 CSS 關鍵字
    線性易解函數 線性函數 linear
    緩入-出緩緩函數 緩入-退出功能 ease-in-out
    易入緩和函數 易入功能 ease-in
    緩出緩和函數 緩出功能 ease-out

    點擊按鈕會在 CSS 規則中設定一個關鍵字值， (如果你在下一步) 選擇變體預設，預設 切換器 會在 Ease Editor 底部開啟。

  3. 在預設切換 器中，點擊 左< 鍵或 右> 鍵可選擇以下預設之一：

    • 線性預設： elastic、、 bounce或 emphasized。

    • 三次貝塞爾預設：

    時序關鍵字 預設 三次貝塞爾
    緩入-退出 進出，Sine cubic-bezier(0.45, 0.05, 0.55, 0.95)
    緩入-退出 在《Out， Quadratic》中 cubic-bezier(0.46, 0.03, 0.52, 0.96)
    緩入-退出 在《出，立方》中 cubic-bezier(0.65, 0.05, 0.36, 1)
    緩入-退出 快出慢進 cubic-bezier(0.4, 0, 0.2, 1)
    緩入-退出 進出，回來 cubic-bezier(0.68, -0.55, 0.27, 1.55)
    時序關鍵字 預設 三次貝塞爾
    漸入 進，Sine cubic-bezier(0.47, 0, 0.75, 0.72)
    漸入 在二次方程中 cubic-bezier(0.55, 0.09, 0.68, 0.53)
    漸入 在立方體中 cubic-bezier(0.55, 0.06, 0.68, 0.19)
    漸入 進去，往後 cubic-bezier(0.6, -0.28, 0.74, 0.05)
    漸入 快速出，線性入 cubic-bezier(0.4, 0, 1, 1)
    時序關鍵字 預設 三次貝塞爾
    退出 出去，Sine cubic-bezier(0.39, 0.58, 0.57, 1)
    退出 出局，二次方 cubic-bezier(0.25, 0.46, 0.45, 0.94)
    退出 出去，Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
    退出 線性輸出，減速入 cubic-bezier(0, 0, 0.2, 1)
    退出 出去，回來 cubic-bezier(0.18, 0.89, 0.32, 1.28)

另請參閱:

設定自訂時序

要設定自訂的定時函數值，請使用線路上的控制點：

  • 線性函數的話，點擊線上任意位置加入控制點並拖曳。 要移除控制點，請雙擊它。

    拖曳線性函數的控制點

  • 對於三次貝塞函數，拖曳其中一個控制點：

    拖曳三次貝塞爾函數的控制點

任何變更都會在緩和編輯器頂端的預覽中觸發球體動畫。

另請參閱

示範：

MDN：

GitHub：

Web.dev：

Chrome for Developers 部落格：

Chrome 文件：

material.io：

注意事項

本頁部分內容基於 Google 創作與 分享 的作品，並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面 可在此找到 ，作者為 Kayce Basques。

創用CC授權 本作品採用 創用CC 姓名標示4.0國際授權條款授權。

  • Last updated on