CSS是現代前端開發的重要組成部分,在制作網站時使用CSS是必不可少的。而在編寫CSS時,簡化代碼是提高效率的一種常見方法。這里就介紹一些CSS中的常見簡寫規則。
/* 簡寫前 */ p { margin-top: 10px; margin-right: 5px; margin-bottom: 15px; margin-left: 5px; } /* 簡寫后 */ { margin: 10px 5px 15px; }
上例中,我們使用了 margin 屬性進行了簡寫,將四個屬性值合并為一個屬性,分別表示上、右、下、左四個方向的間距具體值。
/* 簡寫前 */ div { border-top-width: 2px; border-right-width: 3px; border-bottom-width: 2px; border-left-width: 3px; border-top-style: solid; border-right-style: dashed; border-bottom-style: dotted; border-left-style: solid; border-top-color: #ccc; border-right-color: #ddd; border-bottom-color: #ccc; border-left-color: #ddd; } /* 簡寫后 */ { border: 2px solid #ccc; border-width: 2px 3px; border-style: solid dashed dotted solid; border-color: #ccc #ddd #ccc #ddd; }
上例中,我們使用了 border 屬性進行簡寫,將12個屬性值合并為4個屬性,分別表示寬度、樣式、顏色以及上、右、下、左四個方向的值。
/* 簡寫前 */ ul li { list-style-type: disc; margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; } /* 簡寫后 */ { list-style: disc; margin: 10px 20px; }
上例中,我們使用了 list-style 屬性進行簡寫,將四個屬性值合并為一個屬性,分別表示項目符號類型、圖片、位置、語言等相關屬性。
以上就是CSS中常見的簡寫規則,可以將重復的代碼進行簡寫,使代碼更加簡潔易懂和易于維護。
上一篇css常見邊距問題
下一篇css度量單位是什么