CSS屬性的縮寫形式在編寫CSS樣式表時非常有用,因為它可以大大縮短代碼的長度。本文將介紹一些常用的CSS屬性縮寫。
/* color屬性縮寫 */ color: #FFF; /* 完整寫法 */ color: #FFF000; /* 十六進制縮寫 */ color: rgb(255, 255, 255); /* RGB縮寫 */ /* font屬性縮寫 */ font-family: Arial, sans-serif; /* 字體族 */ font-size: 16px; /* 字號 */ font-weight: bold; /* 字重 */ font-style: italic; /* 字體樣式 */ line-height: 1.5; /* 行高 */ text-align: center; /* 文本對齊方式 */ text-decoration: underline; /* 文本裝飾 */ text-transform: uppercase; /* 文本大小寫轉(zhuǎn)換 */ word-spacing: 2px; /* 文字間距 */ letter-spacing: 1px; /* 字母間距 */ text-indent: 10px; /* 首行縮進 */ font: bold italic 16px/1.5 Arial, sans-serif; /* 完整縮寫 */ /* background屬性縮寫 */ background-color: #FFF; /* 背景顏色 */ background-image: url("image.jpg"); /* 背景圖片 */ background-repeat: no-repeat; /* 背景重復(fù)方式 */ background-position: center top; /* 背景位置 */ background-attachment: fixed; /* 背景滾動方式 */ background-size: 100% auto; /* 背景尺寸 */ background: #FFF url("image.jpg") no-repeat center top fixed; /* 完整縮寫 */ /* border屬性縮寫 */ border-width: 1px; /* 邊框?qū)挾?*/ border-style: solid; /* 邊框樣式 */ border-color: #000; /* 邊框顏色 */ border: 1px solid #000; /* 完整縮寫 */ /* margin和padding屬性縮寫 */ margin-top: 10px; /* 上外邊距 */ margin-right: 20px; /* 右外邊距 */ margin-bottom: 30px; /* 下外邊距 */ margin-left: 40px; /* 左外邊距 */ margin: 10px 20px 30px 40px; /* 上右下左外邊距 */ padding-top: 10px; /* 上內(nèi)邊距 */ padding-right: 20px; /* 右內(nèi)邊距 */ padding-bottom: 30px; /* 下內(nèi)邊距 */ padding-left: 40px; /* 左內(nèi)邊距 */ padding: 10px 20px 30px 40px; /* 上右下左內(nèi)邊距 */
這些屬性縮寫可以讓我們在編寫CSS代碼時更加高效,同時也讓我們的代碼更加簡潔易懂。