在网站设计的过程中为了能更好的提高代码质量，减少冗余，控制文件大小，我们应该要学会使用一些代码缩写。
    
         南昌网站建设公司紫索科技在这里和大家一起分享一些网站设计中常常会用到的CSS缩写方式。

         第一，网站设计当中margin和padding的缩写

         在网站设计中margin和padding的缩写顺序为：上(top)、右(right)、下(bottom)、左(left)的逆时针顺序。

         常见的四种写法是：

        (1)表示所有边都是一个值value1的写法：property:value1;

        (2)表示top和bottom的值是value1,right和left的值是value2的写法：property:value1 value2;

        (3)表示top的值是value1，right和left的值是value2，bottom的值是value3的写法：property:value1 value2 value3;

        (4)表示top的值是value1，right的值是value2，left的值是value3，bottom的值是value3的写法：property:value1 value2 value3 value4;

        将其应用在margin和padding当中时如下：

        四个方向的值为10px时的写法：margin(padding):10px;
 
       上下为10px，左右为5px时的写法：margin(padding):10px 5px;

       上为10px，左右为20px，下为5px时的写法：margin(padding):10px 20px 5px;

       注意：当属性值为0时，不用加单位

      第二：网站设计当中border(边框)的缩写

      同样遵循上(top)、右(right)、下(bottom)、左(left)的逆时针原则

      例如有一组属性如下的边框：

      border-width:1px;

      border-style:solid;

      border-color:#000;

       则可缩写为：border:1px solid #000;

       再如以下这组边框：

       border-top:4px solid #e1e1e1;border-right:1px solid #f1f1f1;border-bottom:4px dashed #e1e1e1;border-left:1px solid #ff3300;

       可缩写成：

       border-width:4px 1px;border-style:solid solid dashed;border-color:#e1e1e1 #f1f1f1 #e1e1e1 #ff3300;

       第三：网站设计当中color(颜色)的缩写
 
        对于网站设计当中的16进制色彩值，如果每两位的值都相同，则可以缩写一半，具体如下：

        #000000的缩写形式为#000;
       #336699的缩写形式为#369;

        第四：网站设计当中fonts(字体)的缩写

        如果在网站设计当中有一段字体属性如下：

        font-style:italic;

        font-variant:small-caps;

        font-weight:bold;

        font-size:1em;

        line-height:140%;

       font-family:"Lucida Grande",sans-serif;

       则可缩写为：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

       注意：缩写字体定义时至少要定义font-size和font-family两个值。

       第五：网站设计当中Backgrounds(背景)的缩写

       例如在网站设计当中有一段背景属性如下：

       background-color:#f00;

       background-image:url(images/background.gif);

       background-repeat:no-repeat;

       background-attachment:fixed;

       background-position:0 0;

       则可缩写为：background:#f00 url(/background.gif) no-repeat fixed 0 0;

       可省略其中一个或多个属性值，如省略，该属性值将用浏览器默认值，默认值为：

      color: transparent

      image: none

      repeat: repeat

      attachment: scroll

      position: 0% 0%

      第六：网站设计当中list(列表)的缩写

      对于如下list属性:

      list-style-type:square;

      list-style-position:inside;

     list-style-image:url(/image.gif);

      可缩写为：list-style:square inside url(/image.gif);

南昌网站建设,网站设计,网站制作公司,品牌网站建设,品牌网站设计,专业网站建设,专业网站设计,企业网站建设,企业网站设计,外贸网站建设,外贸网站设计,营销网站建设,营销网站设计