CSS復(fù)合是指將多個CSS屬性值組合在一起使用,這樣可以簡化CSS的書寫,同時也可以避免代碼的重復(fù)性,提高代碼的可維護性。在CSS中,我們可以使用簡寫屬性來實現(xiàn)CSS復(fù)合效果。
例如,我們可以將下面這段CSS代碼: div { border-top-width: 1px; border-top-style: solid; border-top-color: #999999; border-right-width: 2px; border-right-style: dotted; border-right-color: #CCCCCC; border-bottom-width: 3px; border-bottom-style: dashed; border-bottom-color: #666666; border-left-width: 4px; border-left-style: double; border-left-color: #333333; }
轉(zhuǎn)化為如下的簡寫屬性:
div { border-width: 1px 2px 3px 4px; border-style: solid dotted dashed double; border-color: #999999 #CCCCCC #666666 #333333; }
上述代碼中,我們使用了border-width、border-style和border-color三種簡寫屬性,它們的順序分別是上、右、下、左。這樣的簡寫方式不僅更加簡潔,還避免了代碼的重復(fù)性,能夠大幅提高代碼的可維護性。
除了邊框?qū)傩灾猓€有很多其他的CSS屬性也支持復(fù)合寫法,例如font、background、margin和padding等等。
div { font: 16px/1.5 Arial, sans-serif; background: #F5F5F5 url(bg.jpg) no-repeat 10px 20px; margin: 10px 20px; padding: 5px; }
上述代碼中,我們使用了font、background、margin和padding四種屬性的復(fù)合寫法。這些屬性的具體含義請參考相關(guān)的CSS屬性手冊。