CSS的一些简写及优化技巧

时间:2011-11-30 22:59:22

最近蛮忙的,有些日子没有更新了。正在经历博客的第一阶段-疲倦期。希望可以顺利度过,呵呵。下面是给新站长简单的介绍一下CSS的简写规则和一些简单的CSS优化技巧,希望对大家许些帮助,文章有点水,大家莫怪。最下面的两个CSS技巧可以重点了解一下,也许可以给你带来一些意想不到的收获。

  1. 颜色缩写   

  2. 我们可以将#ff0099缩写成#f09#ffffff,   

  3. 缩写成#fff。(小技巧,用记事本等工具的替换功能,可直接输入#ff0099将CSS文件内全部替换成#f09)   

  4.   

  5. 使用 line-height 垂直居中   

  6. 例如:line-height:22px;   

  7. 固定宽度的容器需要一行垂直居中时,使用 line-height 即可。   

  8.   

  9. 背景(background)属性多参数简写   

  10. 例如:   

  11. background-imageurl("huceo.png");   

  12. background-positiontop center;   

  13. background-repeatno-repeat;   

  14. 其实可以写成:   

  15. backgroundurl(huceo.png) no-repeat top center;   

  16.   

  17.   

  18. 背景图片路径不加引号   

  19. background:url("image/huceocom.gif"#999;    

  20. 可以写为   

  21. background:url(images/huceo.gif) #999;    

  22.   

  23. 定位属性值为0的值可去掉单位(如:px/em)   

  24. 例如:padding10px 8px 0px 0px;   

  25. 简写:padding10px 8px 0 0;   

  26. 有相等值可合并   

  27. 例如:padding10px 8px 10px 8px;   

  28. 简写:padding10px 8px;   

  29.   

  30. Margin(外边距/空白边),Padding(内边距)声明:   

  31. 例如:   

  32. margin-top:0px;   

  33. margin-right:10px;   

  34. margin-bottom:0px;   

  35. margin-left:10px;   

  36. 简写:   

  37. margin:0 10px 0 10px;(上-右-下-左)   

  38. 再简写:   

  39. margin:0 10px;(上下值为0,左右值为10)   

  40.   

  41. Borders(边框属性)   

  42. 例如:   

  43. border-width:1px;   

  44. border-style:solid;   

  45. border-color:#000;   

  46. 简写:   

  47. border:1px solid #000;   

  48.   

  49. 多组共用属性   

  50. 例如:规定h1到h6使用同一属性(英文逗号间隔)   

  51. h1,h2,h3,h4,h5,h6   

  52. margin:0;   

  53. padding:0;   

  54. font-size:12px;   

  55. font-weight:normal;   

  56. ....   

  57. 当CSS中有相同属性时都可以归类到一起,使用共同属性   

  58.   

  59. CSS简写技巧有很多,更具体的可以百度一下。建议大家尽量使用CSS简写来优化代码,减少文件体积。   

  60.   

  61.   

  62. 清除容器浮动   

  63. #main {   

  64.     overflow:hidden;   

  65. }   

  66.   

  67. 不让链接折行   

  68. a {   

  69.     whitewhite-space:nowrap;   

  70. }   

  71.   

  72. 始终让 Firefox 显示滚动条   

  73. html {   

  74.     overflow:-moz-scrollbars-vertical;   

  75. }   

  76. 跨浏览器的支持   

  77. body, html {   

  78.     min-height:101%;   

  79. }   

  80.   

  81.   

  82. 最简单的 CSS 重置   

  83. * {   

  84.    margin: 0; padding: 0   

  85. }   

  86.   

 

CSS 图片拼合 (CSS sprites)

可有效降低图片文件的HTTP请求数,可以将多个小图片将以一定间距合并为一个大图片文件.例如,本站侧栏图标(包括搜索框图标)和评论框上面的三个图标(名称,邮箱,网址)都是拼合在一起的。
拼合完成后,系统自动给出background-position定位属性代码来显示拼合图片中的指定位置。
http://cn.spritegen.website-performance.org/

使用CSS压缩
百度一下,可以在应用框内直接压缩CSS文件
压缩后去除空格,代码可读性降低,但可以节省文件体积,加快下载速度。压缩后代码可读性差的问题不用担心,可以随时还原。为了维护修改更加方便,也可以将CSS原文件放在与压缩后的文件放在同一目录内,修改时对照下就行了。

本站所有文章均为天行博客原创,转载请注明来源及出处!

作者:宇天行 (关于我

本文首发地址:https://www.huceo.com/post/286.html

或许您还会喜欢这些文章:

Tags: 作者:宇天行 | 分类:开发技术 | 评论:52 | 浏览:7907