花开陌上

常用CSS样式缩写语法

2017/10/19 19:31:02admin2 阅读0 点赞13 评论
#css #样式缩写

缩写CSS样式的好处：

对于浏览者而言，缩写可以减少CSS代码量，进而减少CSS文件体积，有利于访问者更快的打开网页；对于开发者而言，CSS代码量少，阅读简洁明了；对于网站服务器而言，在相同带宽下可以承受更多的访问请求。

常用CSS样式表缩写语法总结

盒尺寸(padding、margin) 常见margin与padding边距缩写margin外边距与padding内边距是制作布局时常用到的两个属性，在传统写法上，我们通常使用以下形式： 
.box{
   width:300px;
   height: 300px;
   background: #eee;
   margin-left: 20px;
   margin-right: 30px;
   margin-top: 40px;
   margin-bottom: 50px;
}
padding也是如此，而在css缩写中，可以使用缩写的编写方式，margin及padding的缩写在默认状态下需要提供4个参数，按顺序分别为上、右、下、左。例： 
.box{
   width:300px;
   height: 300px;
   background: #eee;
   /*外边距连写*/
   margin:20px 30px 40px 50px;
}
注意：margin及padding的缩写比较特殊一点，方便的记忆方法是顺时针，上右下左。 通常有下面四种书写方法(这里拿margin做例子): 
/*顺序*/
/*从上开始，顺时针转；margin:上 右 下 左*/
/*上下左右都相等: margin: 5px(上下左右)*/
margin: 5px;
/*上下相等, 左右相等: margin: 5px(上下) 15px(左右)*/
margin: 5px 15px 5px 15px;
/*上下不等，左右相等： margin: 5px(上) 10px(左右) 20px(下)*/
margin: 5px 10px 20px 10px
/*上下左右都不相等: margin: 20px（上）   30px（右）   40px（下）  50px（左）*/
Margin: 20px  30px   40px  50px;

边框(border) border边框缩写border对象本身是一个非常复杂的对象，包含了四条边的不同宽度、不同颜色及不同样式，所以border对象提供的缩写形式相对来说也要丰富很多，不仅可以对整个对象进行border缩写，也可以对单独某一个边进行缩写， 对于整个对象而言，可以使用如下的格式进行缩写： 
border:border-width border-style border-color
代码示例： 
.box{border:5px solid red;}
通过上面的属性，我们就可以把样式针对整个对象或者每一个边都设置不同的样式 

.box{
   width: 300px;
   height: 390px;
   background: #999;
   border-top-style: solid;   /*线型*/
   border-top-color: #ff0000;     /*边框颜色*/
   border-top-width: 5px;   /*宽度*/ 
   /*边框属性连写*/
   border-top: #ff0000 solid 5px;   
   /*四个边框值相同的写法*/
   border:12px solid red;    
   /*单独边框并且设置不同的样式*/ 
   border-top: red solid 5px; 
   border-right: 12px dotted #ffc0cb;
   border-buttom: 12px dotted #191970;
   border-left: 5px dashed #00ffff;
}
注意：border缩写样式没有顺序要求，但线型(border-style)为必写项。
除了对于边框整体及4个边单独的缩写之外，border还为我们提供了对于 border-style、border-width以及border-color的单独缩写方式，语法格式如下： 
border-width:top right bottom left;
border-color:top right bottom left; 
border-style:top right bottom left;
代码示例： 
.box{
   border-width:1px 2px 3px 4px;
   border-color:blue white red green; 
   border-style:solid dashed; 
}

背景(Background) 背景的属性如下： background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;
背景缩写用于针对背景控制的相关属性进行缩写，其语法格式如下： background:background-color background-image background-repeat background-attachment background-position 根据以上语法，可以缩写为一句： 
.box{background:#f00 url(background.gif) no-repeat fixed 0 0;}
注意：background属性连写的时候没有顺序要求，但url为必写项。
color颜色缩写css对于颜色代码也提供了简单的缩写模式，主要针对16进制颜色代码。 16进制代码传统写法一般使用#ABCDEF，ABCDEF分别代表6个 16进制数，css的颜色缩写必须符合一定要求， 当A与B数字相同，C与D数字相同，E与F数字相同时，可以使用颜色缩写， 例： 

p{color：#ffffff；}
/* 可以缩写为*/
p{color：#fff；}
p{color：#2255bb；}
/* 可以缩写为*/
p{color：#25b；}

字体(fonts) 字体的属性如下： font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif;
font字体缩写字体缩写是针对字体样式的缩写形式，包含字体、字号等属性，使用方法如下： 
font:font-style font-variant font-weight font-size line-height font-family
根据以上语法，可以缩写为一句： 
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意：font:后边写属性的值。一定按照书写顺序。文本属性连写文字大小(font-size)和字体(font-family)为必写项。
列表(lists) 取消默认的圆点和序号可以这样写list-style:none;, list的属性如下: list-style-type:circle; list-style-position:inside; list-style-image:url(image.gif);
list列表缩写list缩写是针对list-style-type、list-style-position等用于ul的list属性， 语法格式如下： 
list-style:list-style-type list-style-position list-style-image
代码示例： 根据以上语法，可以缩写为一句 
ul {list-style:disc outside none;}

这里顺便提一句，有很多样式都涉及到了四边的问题，这里统一说明。 四边的简写一般如下：selector {property: value} value：top | right | bottom | left 具体可以参考上面的margin和border属性！(←这里的margin和border属性可以点击噢(〃'▽'〃))
最后，偷偷告诉大家，学好css最需求的就是多看多写多实践， 那样才能学的好，记得住。٩(๑❛︶❛๑)۶

评论区

  • 轩陌#7
    轩陌2017/12/18 14:24:29

    来张图试试

    macOSChrome

  • 山野愚人居#6
    山野愚人居2017/11/1 11:09:22

    对css不太了解，来学习下！

    WindowsFirefox

    • xiaomo#1
      xiaomo2017/11/1 19:55:22
      @山野愚人居

      哈哈，都是简单的啦~随便看，随便摸啊，弄坏了不要赔 [xieyanxiao]

      WindowsFirefox

  • Wendy#5
    Wendy2017/10/24 00:30:56

    [touxiao] 会做笔记要会用得上啊

    WindowsChrome

    • xiaomo#1
      xiaomo2017/10/24 21:17:40
      @Wendy

      用上了啊 [qiaoda]

      WindowsFirefox

  • xema#4
    xema2017/10/22 17:27:12

    代码缩写确实很重要，不过我感觉对于那个颜色缩写成三个字符的，我用vs code写入颜色的时候会出现这个方框就是这个色号，使用缩写到没有显示，就好怕到浏览器显示不了

    macOSSafari

  • 黑白配博客#3
    黑白配博客2017/10/20 15:31:17

    xiaomo也去开一个留言板吧，我正在折腾，每次还得到文章留言…有点乱。我是来分享我通过代码实现邮件功能了的喜悦的~

    WindowsChrome

    • xiaomo#2
      xiaomo2017/10/20 18:18:11
      @黑白配博客

      恭喜啊，折腾成功了 [xieyanxiao]

      WindowsFirefox

    • xiaomo#1
      xiaomo2017/10/20 18:17:14
      @黑白配博客

      啊！留言板啊!!!∑(ﾟДﾟノ)ノ，这个倒是没考虑过 [xiaoku]

      WindowsFirefox

  • 杳无宗#2
    杳无宗2017/10/20 09:26:37

    [dabing]

    WindowsChrome

    • xiaomo#1
      xiaomo2017/10/20 18:16:18
      @杳无宗

      [youling]

      WindowsFirefox

  • 不稽一格#1
    不稽一格2017/10/19 23:43:01

    深夜到访，一看到文字多的东西就想睡觉，我估计是中了什么巫术吧

    macOSSafari

    • xiaomo#1
      xiaomo2017/10/20 18:15:53
      @不稽一格

      哈哈，估计是你没熬夜的习惯！ [xieyanxiao]

      WindowsFirefox