当前位置：网站首页 >> 建站知识 >> 网站技术 >>


郑州网站建设整理的一些CSS建站中的缩写技术

来源：郑州凯讯网站    发布人：郑州凯讯公司    发布日期：2014-08-14

在网站建设中，建站人员有必要考虑CSS代码的缩写优化，这能让你的CSS代码更有条理、更高效，也显得更加短小，代码优化率更高。那么什么是CSS缩写技术呢？其实，CSS缩写技术就是在CSS代码等效的前提下，把多句CSS代码简化成一句，从而有效地减少了网页的代码量，在功能不变的情况下，打开网页将会更快速。CSS缩写技术是网站建设中不可忽略的技术，是很有必要的，其的必要性主要体现在这样几个方面：1、CSS缩写减少代码输入时间，写起来方便，节省编码时间；2、CSS缩写减少了网站需要加载的字节数，提高了网站的打开速度；3、CSS缩写后代码就相应少了，看上去一目了然，便于阅读和维护。

那么，CSS缩写技术主要有哪些呢？这里，郑州网站建设总结的一些可以实现CSS缩写技术的属性，可助您改善网页编码的质量。

1、CSS里font字体的缩写：
字体属性顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
例如：font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;
上面的语句可以缩写为：font:italic small-caps bold 12px/1.5em arial,verdana;
注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。

2、CSS里background缩写：
例如：background-color:#fff;background-image:url(bg.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:left top;
上面的语句可以缩写为：background:#fff url(bg.gif) no-repeat fixed left top;
属性顺序：background-color | background-image | background-repeat | background-attachment | background-position

3、 CSS里 margin 和 padding缩写
例如：margin-top:1px;margin-right:0;margin-bottom:2em;margin-left:-20px;
上面的语句可以缩写为：margin:1px 0 2em -20px;
属性 顺序：margin-top | margin-right | margin-bottom | margin-left
padding的简写和margin的简写方式完全一样，在此不再举例。

4、CSS 里 border 缩写
例如：border-width:1px;border-style:solid;border-color:#000;
上面的语句可以缩写为：border:1px solid #000;
属性顺序：border-width | border-style | border-color

5、CSS里 border-top / border-right / border-bottom / border-left缩写
例如：border-top-width:1px;border-top-style:solid;border-top-color:#000;
上面的语句可以缩写为：border-top:1px solid #000;
属性顺序：border-top | border-right | border-bottom | border-left

6、CSS里 list-style缩写
例如：list-style-type:square;list-style-position:outside;list-style-image:url(bullet.gif);
上面的语句可以缩写为：list-style:square outside url(bullet.gif);
属性顺序：list-style-type | list-style-position | list-style-image

7、关于四边空距的简写一般如下：
例如：padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
上面的语句可以缩写为：padding:1px 2px 3px 4px;
属性顺序：top | right | bottom | left
不论是边框宽度，还是边框颜色、边距等，只要css样式涉及四边，顺序通通都是“上右下左”顺时针方向。

关于css缩写技术的实现，不止上面介绍的几个，还有其他的方面，这里不再介绍，有兴趣的朋友们可以参阅相关文档。郑州网站建设提醒您：css缩写可以在一定程度上减少代码量，如果您感到仍然不够给力，那么您可以使用gzip压缩技术来压缩代码量，以达到更好的代码压缩效果。