了解 CSS 繼承：一致樣式指南

大家好，歡迎回到我的部落格！ ？

介紹

讓我們深入了解 CSS 繼承 的世界。我們將探討哪些屬性會傳遞下去，如何控制此流程，以及為什麼它對您的設計很重要。本指南是為每個人（從初學者到經驗豐富的專業人士）精心設計的，可幫助您利用繼承來獲得更乾淨、更易於維護的 CSS。

您將在本文中學到什麼？

• 繼承基礎知識：屬性繼承意味著什麼。

• 繼承哪些屬性：深入了解繼承和非繼承屬性。

• 控制繼承：如何使用 CSS 關鍵字和技術管理繼承。

• 深入範例：展示繼承的實際場景，並附有更詳細的解釋。

什麼是 CSS 繼承？

CSS 繼承是指某些屬性會自動從父元素傳遞給子元素。此機制有助於在嵌套元素之間一致地應用樣式，而無需重新聲明它們。

繼承的屬性

** ✅ 常見的繼承屬性：**

• 文字屬性：字體系列、字體大小、顏色、行高、文字對齊。這些旨在在文字內容中保持一致。

• 可見性：可見性（但不顯示）。

• 遊標：互動式提示的遊標。

？繼承範例：

<div>



<p>Result:</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173475751395222.jpg"  class="lazy" alt="Understanding CSS Inheritance: A Guide to Consistent Styling" /></p>

<p>Here, all child elements inside the div will have the Helvetica font unless overridden.</p>

<h2>
  
  
  <strong>Properties That Don't Inherit</strong>
</h2>

<h3>
  
  
  <strong>✖️ Non-Inherited Properties:</strong>
</h3>

<ul>
<li><p><strong>Box Model Properties</strong>: width, height, margin, border, padding. Each element typically controls its own space.</p></li>
<li><p><strong>Background</strong>: background properties, as backgrounds are often meant to be unique per element.</p></li>
<li><p><strong>Position</strong>: position, top, left, right, bottom.</p></li>
</ul>

<h2>
  
  
  <strong>Controlling Inheritance</strong>
</h2>

<p><strong>Using</strong> inherit: To explicitly make a property inherit from its parent:<br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/* If the parent has a specific color, the child will adopt it */
.child-element {
    color: inherit;
}

登入後複製

使用 初始 : 將屬性重設為其瀏覽器預設值：

/* Resets the font-size to the default size of the browser */
.reset-font-size {
    font-size: initial;
}

使用 unset : 將屬性恢復為其繼承值或初始值：

/* Will inherit if a parent has a color set, otherwise, it will be initial */
.unset-color {
    color: unset;
}

實際範例

1. 簡化版式

<article>





<pre class="brush:php;toolbar:false">/* Nothing needed here; inheritance does the job */

結果：文章中的所有文字均使用 Georgia 字體和深灰色，打造統一的外觀。

1. 重寫繼承

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>

nav {
    font-size: 16px; /* Base size for navigation */
    color: #333; /* Base color for text */
}

nav a {
    color: inherit; /* Inherits the color from nav, which is #333 */
    font-size: inherit; /* Also inherits 16px */
    text-decoration: none; /* Default is none, but doesn't inherit */
}

nav a:hover {
    color: #0056b3; /* Changes on hover, overriding inheritance */
}

結果：連結以與其父導航相同的大小和顏色開始，但在懸停時改變顏色，顯示對繼承的控制。

注意：為了更好地檢查結果並試驗程式碼，您可以複製貼上 Codepen.io 上的所有程式碼區塊。

1. 版面的自訂繼承

<div>



<p>Result:</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173475751395222.jpg" class="lazy" alt="Understanding CSS Inheritance: A Guide to Consistent Styling"></p>

<p>Here, all child elements inside the div will have the Helvetica font unless overridden.</p>

<h2>
  
  
  <strong>Properties That Don't Inherit</strong>
</h2>

<h3>
  
  
  <strong>✖️ Non-Inherited Properties:</strong>
</h3>

• Box Model Properties: width, height, margin, border, padding. Each element typically controls its own space.

• Background: background properties, as backgrounds are often meant to be unique per element.

• Position: position, top, left, right, bottom.

Controlling Inheritance

Using inherit: To explicitly make a property inherit from its parent:

/* If the parent has a specific color, the child will adopt it */
.child-element {
    color: inherit;
}

結果：內容 div 保持與其容器相同的內邊距和背景，確保無縫的視覺流。

為什麼理解繼承至關重要

• 一致性：繼承有助於用更少的程式碼保持整個網站的樣式一致性。

• 效能：透過利用繼承，您可以減少 CSS 規則的數量，這有助於解決載入時間和特異性問題。

• 靈活性：了解如何控制繼承可以實現更動態的設計，其中元素可以根據需要共享或覆蓋樣式。

結論

CSS 繼承就像網頁設計的家譜，確保樣式以邏輯、有效率的方式傳遞下去。透過理解和操縱繼承，您可以製作既一致又靈活的設計。

請記住，雖然某些屬性會自然繼承，但您始終可以使用繼承、初始和取消設定等 CSS 關鍵字進行控制。

編碼愉快！ ？

---

？大家好，我是 Eleftheria，社群經理、 開發人員、公共演講者和內容創作者。

？如果您喜歡這篇文章，請考慮分享。

？ 所有連結 | X | 領英

以上是了解 CSS 繼承：一致樣式指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！