css下margin、padding、border、background和font縮寫樣本_經驗交流

來源:互聯網
上載者:User
下面用一些比較常用的屬性來做樣本。

margin

  margin-top:1px;
  margin-right:1px;
  margin-bottom:1px;
  margin-left:1px;
  代碼簡化為:margin:1px

  margin-top:1px;
  margin-right:2px;
  margin-bottom:1px;
  margin-left:2px;
  代碼簡化為:margin:1px 2px

  margin-top:1px;
  margin-right:2px;
  margin-bottom:3px;
  margin-left:2px;
  代碼簡化為:margin:1px 2px 3px

  margin-top:1px;
  margin-right:2px;
  margin-bottom:3px;
  margin-left:4px;
  代碼簡化為:margin:1px 2px 3px 4px

  注意:當屬性值是0的時候單位可以不寫如:0px 直接就寫成0

padding

  padding的書寫方法和margin相類似

  padding-top:1px;
  padding-right:1px;
  padding-bottom:1px;
  padding-left:1px;
  代碼簡化為:padding:1px

  padding-top:1px;
  padding-right:2px;
  padding-bottom:1px;
  padding-left:2px;
  代碼簡化為:padding:1px 2px

  padding-top:1px;
  padding-right:2px;
  padding-bottom:3px;
  padding-left:2px;
  代碼簡化為:padding:1px 2px 3px

  padding-top:1px;
  padding-right:2px;
  padding-bottom:3px;
  padding-left:4px;
  代碼簡化為:padding:1px 2px 3px 4px

border

  border-width:1px;
  border-style:solid;
  border-color:#000000;
  代碼簡化為:border:1px solid #000

background

  background-color:#CCFFFF;
  background-image:url(圖片路徑);
  background-repeat:repeat-x;
  background-position:5px 4px;
  代碼簡化為:background:#CFF url(圖片路徑) repeat-x 5px 4px

font

  font-size:26px;
  font-weight:bold;
  font-family: “宋體”;
  代碼簡化為:font:26px bold “宋體”

color屬性值

  color:#000000;
  color:#ff0000;
  代碼簡化為:color:#000, color:#f00
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.