作为网站制作师，你可能曾经听说过一个网页尽量不要超过30KB的大小建议，但是随着互联网的日益普及，网络带宽的在飞速拓宽，很多设计师已经不再考虑这条30KB的理想准则，加上越来越受欢迎的CSS布局和Javascript对网站用户体验的强化，使得这种现象越来越普遍，尤其是对于大型网站来说，仅仅一个CSS文件就已经超过了30KB的上限。即便如此，我们还是要看到用户体验的重要性，在网站制作的同时也很有必要考虑CSS代码的缩写优化，它还能让你的CSS代码更有条理、更高效。你将会学到更多关于CSS代码优化的知识，这能帮你更熟悉CSS代码的规范性。熟悉这些概念还能让你成为更全面的网站制作师，从而写出更优化的CSS代码。
何为CSS缩写技术？不难理解，CSS缩写技术就是在CSS等效的前提下，把多句CSS代码简化成一句。在济南网站制作看来，CSS缩写技术是网站制作不可忽略的技术，是很有必要的，CSS缩写制作网站的必要性主要有三点：一是CSS缩写减少代码输入时间，写起来方便；二是CSS缩写减少了网站需要加载的字节数，有网站打开速度的提高；三是CSS缩写后代码就相应少了，看上去一目了然，维护起来也方便。那么，CSS缩写技术包括哪些呢？哪些CSS属性能进行CSS缩写？以下是济南网站制作总结的一些可以缩写的CSS属性，助您的客户早一点打开您的网站。
CSS文本缩写
font:italic small-caps bold 12px/1.5em arial,verdana;
等效于：
font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;
顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。
CSS background缩写
background:#fff url(bg.gif) no-repeat fixed left top;
等效于：
background-color:#fff;background-image:url(bg.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:left top;
顺序：background-color | background-image | background-repeat | background-attachment | background-position
CSS margin & padding缩写
margin:1px 0 2em -20px;
等效于：
margin-top:1px;margin-right:0;margin-bottom:2em;margin-left:-20px;
顺序：margin-top | margin-right | margin-bottom | margin-left
padding的简写和margin完全一样。
CSS border缩写
border:1px solid #000;
等效于：
border-width:1px;border-style:solid;border-color:#000;
顺序：border-width | border-style | border-color
这三句也是简写，等于是把四边的样式合而为一了。
CSS border-top / border-right / border-bottom / border-left缩写
border-top:1px solid #000;
等效于：
border-top-width:1px;border-top-style:solid;border-top-color:#000;
顺序和border一样
CSS list-style缩写
list-style:square outside url(bullet.gif);
等效于：
list-style-type:square;list-style-position:outside;list-style-image:url(bullet.gif);
顺序：list-style-type | list-style-position | list-style-image
关于四边的简写一般如下：
padding:1px 2px 3px 4px;
等效于：
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
顺序：top | right | bottom | left
不论是边框宽度，还是边框颜色、边距等，只要css样式涉及四边，顺序通通都是“上右下左”顺时针方向。
如果四边的值省略一个，只写三个：
padding:1px 2px 3px;
则等效于：
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:2px;
省略的“左”值等于“右”
如果四边的值省略两个：
padding:1px 2px;
则等效于：
padding-top:1px;padding-right:2px;padding-bottom:1px;padding-left:2px;
省略的“下”值等于“上”
如果四边只有一个值：
padding:1px;
则等效于：
padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;
关于css缩写就先写到这里，如果您还感觉不够给力，那么您也可以试着压缩CSS，以达到更好的效果，同样的道理，您也可以对HTML和JS等进行优化压缩哦，大家有什么问题欢迎与我们交流。