CSS中的繼承是一種非常有用的特性,它可以讓我們在定義樣式時,讓某些屬性值自動繼承父級元素的值,從而減少代碼冗余,使代碼更加簡潔。下面我們來看一下CSS中可以繼承的屬性:
/* 繼承字體相關屬性 */ font、font-family、font-size、font-weight、font-style、font-variant、font-stretch /* 繼承文本相關屬性 */ color、letter-spacing、line-height、text-align、text-shadow、text-transform、object-fit、text-overflow、word-wrap、white-space、word-break /* 繼承列表相關屬性 */ list-style、list-style-type、list-style-position、list-style-image /* 繼承盒模型相關屬性 */ margin、padding、border、border-color、border-radius /* 繼承表格相關屬性 */ border-collapse、border-spacing、caption-side、empty-cells、table-layout /* 繼承其他屬性 */ cursor、opacity、visibility、z-index
當我們定義一個元素的樣式時,如果該元素的子元素沒有特別指定某個屬性的值,那么子元素將會自動繼承父元素對應屬性的值。例如:
body { font-family: Arial, sans-serif; font-size: 16px; color: #333; line-height: 1.5; } h1 { font-size: 24px; font-weight: bold; } p { margin-bottom: 1em; padding: 0; }
在上面的例子中,我們給body元素設置了一些基本的字體和排版樣式,而h1、p元素只分別定義了它們自己的些許特定的樣式,其他屬性全部采用繼承父元素的值。這樣,當我們在頁面中寫下這些元素時,不用重復設置父元素的樣式,已經通過繼承自動應用上了。
需要注意的是,CSS中只有部分屬性支持繼承。對于很多其它常用的屬性,如width、height、background、position等,是不支持繼承的。