CSS自定義命名簡(jiǎn)寫(xiě)是一種非常方便的方法,在編寫(xiě)樣式時(shí)可以更加快速、簡(jiǎn)潔的進(jìn)行編寫(xiě)。與長(zhǎng)名稱(chēng)相比,簡(jiǎn)寫(xiě)命名可以減少代碼量,提升頁(yè)面性能。
/* 標(biāo)準(zhǔn)寫(xiě)法 */ font-weight: bold; font-style: italic; text-decoration: underline; /* 簡(jiǎn)寫(xiě)寫(xiě)法 */ font: bold italic; text-decoration: underline;
可以看到,簡(jiǎn)寫(xiě)的方式將多個(gè)樣式屬性寫(xiě)到了一個(gè)屬性中,使用空格或斜杠進(jìn)行分隔。在這個(gè)例子中,我們只需要寫(xiě)一個(gè)font
屬性就可以同時(shí)實(shí)現(xiàn)font-weight
和font-style
的效果。
/* 標(biāo)準(zhǔn)寫(xiě)法 */ padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; /* 簡(jiǎn)寫(xiě)寫(xiě)法 */ padding: 10px 20px;
這個(gè)例子中,我們使用了一個(gè)叫做“四方向縮寫(xiě)”的方式。將padding
屬性的值設(shè)置為上、右、下、左方向的值即可,用空格分隔,這樣就可以一次性為所有方向進(jìn)行設(shè)置。
/* 標(biāo)準(zhǔn)寫(xiě)法 */ margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; /* 簡(jiǎn)寫(xiě)寫(xiě)法 */ margin: 10px 20px;
和padding
屬性類(lèi)似,margin
屬性也支持“四方向縮寫(xiě)”。使用這種方式可以讓你在編寫(xiě)樣式時(shí)更加快速、簡(jiǎn)潔,同時(shí)也更省代碼。