網(wǎng)站CSS樣式,讓企業(yè)網(wǎng)站展示更標準
日期:2023-03-11 作者:超級管理員 來源:本站
珠海網(wǎng)訊互聯(lián)曾經(jīng)在一篇文章中指出,DIV+CSS的網(wǎng)站設計技術已經(jīng)成為企業(yè)網(wǎng)站建設中的一個大發(fā)展趨勢,下面讓我們的小編來繼續(xù)這個話題,教大家如何寫出高效的CSS代碼,讓企業(yè)網(wǎng)站展現(xiàn)的更標準。
首先我們來看以下兩個CSS執(zhí)行效率的對比
低效率的CSS
p{ font-family: arial, helvetica, sans-serif; } #container { font-family: arial, helvetica, sans-serif; } #navigation { font-family: arial, helvetica, sans-serif; } #content { font-family: arial, helvetica, sans-serif; } #sidebar { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
高效的CSS
body { font-family: arial, helvetica, sans-serif; } body { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
其次可以使用簡記屬性的CSS代碼:
body { font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px; border: 1px solid red; color: #222; }
還有一個注意事項就是盡量少的使用 !important
慎用寫法 #news { background: #ddd !important; } 特定情況下可以使用以下方式提高權重級別 #container #news { background: #ddd; } body #container #news { background: #ddd; }
最后就是盡量使用 link 引入外部樣式表,為了對老版本瀏覽更好的提供支持,在編寫CSS代碼時盡量使用 link 引入外部樣式表的方來代替 @import導入樣式的方式。
@import和link在使用上會有一些區(qū)別, 利用二者之間的差異,可以在實際運用中進行權衡。
掃二維碼手機查看該文章
當前網(wǎng)址:http://auction-hunter.com/jianzhan/729.html