可繼承的CSS屬性指的是父元素中設置的屬性值可以自動被子元素繼承。如果未在子元素中聲明相應的屬性值,則會默認繼承父元素的屬性值。在設計頁面時,通過合理運用可繼承屬性可以簡化CSS編碼工作,提高代碼的可讀性和維護性。
/* 示例1 */ body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; } h1 { font-size: 24px; } /* h1元素繼承了body元素設置的font-family和line-height */ /* 顯示結果為24px Arial字體,行高1.5倍 */ /* 示例2 */ #parent { color: #333; font-weight: bold; } #child { /* 未在子元素中聲明color和font-weight屬性 */ /* 子元素繼承了父元素設置的color和font-weight屬性 */ font-size: 18px; } /* 顯示結果為18px字號,粗體,顏色為#333 */ /* 示例3 */ /* 透明度是可繼承屬性 */ .parent { opacity: 0.5; } .child { /* 子元素繼承了父元素設置的透明度 */ background-color: #f0f0f0; } /* 顯示結果為背景色通過透明度變成了半透明效果 */
上一篇可視化css布局
下一篇可控制文本尺寸的css