CSS的簡寫在節(jié)省代碼方面雖然沒有table布局改為div那么客觀,不過也是一個不能忽略的方面。下面總結一下CSS的一些簡寫方法:
外補丁(margin)的簡寫:
比如:margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px;
可以寫成:margin:10px 20px;
或者:margin:10px 20px 10px 20px;
再或者:margin:10px 20px 10px;
注意:簡寫后的順序是“上-左右-下”,“上-右-下-左”,“上下-左右”
內(nèi)補丁(padding)的簡寫:同上
顏色的簡寫:
比如:color:#FFFFFF
可以寫成:color:#FFF
或者:color:white
邊框的簡寫:
比如:border-width:1px; border-style:solid; border-color:#FFFFFF;
可以寫成:border:1px solid :#FFFFFF;
或者寫成:border:1px solid :#FFF;
背景的簡寫:background-color:#FFFFFF; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;
可以寫成:background:#FFF url(background.gif) no-repeat fixed 0 0;
字體的簡寫:
font-style:normal; font-weight:bold; line-height:120%; font-family:"宋體","Arial";
可以寫成:font:normal bold 14px/120% "宋體","Arial";
鏈接統(tǒng)一定義:
為了避免每個鏈接都要給出css來定義,可以用這樣的偽類來定義:
a:link {color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#000099; text-decoration:underline;}
a:active{color:#000000; text-decoration:none;}
用body來定義網(wǎng)頁:
body{
margin:0 auto;
padding:0; border:0;
text-align:center;
font-family: "宋體","Arial","Lucida Grande","Lucida Sans Unicode","Verdana","sans-serif";
}
margin:0 auto;的意思就是網(wǎng)頁居中,很多初學者都不知道div+css如何使網(wǎng)頁居中,其實就這么簡單。
padding:0; border:0;是定義所有的內(nèi)補丁和邊框為0,當然你特殊聲明的除外。
font-family: "宋體","Arial","Lucida Grande","Lucida Sans Unicode","Verdana","sans-serif";是定義網(wǎng)頁文字的字體,默認會按照這個順序來顯示。如果出現(xiàn)英文的話,英文的默認字體是Arial。
不要忽視這么一點代碼,如果你不注意的話,會使css文件大很多。。比如沒經(jīng)過簡寫的css有15K,那么通過簡寫后的CSS文件可能只有13K了??汕f別小看這2K,記住~
該文章在 2010/8/14 1:45:19 編輯過