css中margin、padding等屬性的簡寫方式解讀

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;
  注意:簡寫後的順序是“上-左右-下”,“上-右-下-左”,“上下-左右”

 

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; font-size:12px; line-height:120%; font-family:”宋體”,” 

            Arial”;
   可以寫成:font:normal bold 12px/120% “宋體”,”Arial”;


鏈接統一定義:


  爲了避免每個鏈接都要給出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來定義網頁:


  body{
    margin:0 auto;
    padding:0; border:0;
    font-size:12px; text-align:center;
    font-family: “宋體”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;
  }
  margin:0 auto;的意思就是網頁居中,很多初學者都不知道div+css如何使網頁居中,其實就這麼簡單。
  padding:0; border:0;是定義所有的內補丁和邊框爲0,當然你特殊聲明的除外。
  font-family: “宋體”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;是定義 

  網頁文字的字體,默認會按照這個順序來顯示。如果出現英文的話,英文的默認字體是Arial。

    不要忽視這麼一點代碼,如果你不注意的話,會使css文件大很多。。比如沒經過簡寫的css有15K,那麼通過簡寫後的CSS文件可能只有13K了。可千萬別小看這2K,記住

發佈了54 篇原創文章 · 獲贊 4 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章