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: 作者:宇天行 | 分类:开发技术 | 评论:50 | 浏览:4421

您对本文《CSS的一些简写及优化技巧》有哪些看法?  ---  【期待您的评论】

您正在以游客身份发表评论:

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

评论者2016-12-18 14:12:00回复评论
CSS的一些简写及优化技巧
游客2015-01-19 17:57:12回复评论
CSS的一些简写及优化技巧
宇天行2012-04-09 22:09:42回复评论
OK,百度搜索框开放平台就有CSS和JS的压缩美化工具。
宇天行2011-12-11 22:53:08回复评论
嗯,就是。。。
宇天行2011-12-11 22:52:39回复评论
多谢支持。
宇天行2011-12-09 22:39:36回复评论
作为博客管理员,也需要了解下网页制作常识哦。。。
宇天行2011-12-09 22:38:09回复评论
谢谢你的支持。。。
宇天行2011-12-07 20:21:16回复评论
神奇吗???
宇天行2011-12-07 20:21:03回复评论
。。。
宇天行2011-12-07 20:20:50回复评论
多谢。。。
宇天行2011-12-07 20:20:19回复评论
[F]Hehe[/F]不至于吧。。。
宇天行2011-12-07 20:20:02回复评论
谢谢你看得起。
宇天行2011-12-07 20:25:18回复评论
会的,多谢提醒。
宇天行2011-12-07 20:20:37回复评论
不专业也不深。
宇天行2011-12-07 20:19:33回复评论
可以慢慢了解嘛。。。
宇天行2011-12-07 20:19:11回复评论
需要了解一下。
宇天行2011-12-07 20:18:48回复评论
嗯,坚持=胜利。
蒯越岛2011-12-03 20:03:07回复评论
改天试试!
宇天行2011-12-01 21:27:48回复评论
百度一下,你就知道。
宇天行2011-12-01 21:27:35回复评论
嗯,这几个是CSS的基本属性,用得最多的。
雪心2012-10-25 14:43:27回复评论
对CSS不是很熟,学习了
来溜达溜达。
ljk2ctt2012-09-21 09:34:23回复评论
思路很好,楼主再接再厉出更精彩的,龙潭寺论坛www.longtan123.com
ljk2ctt2012-09-19 08:32:10回复评论
写的实在是太好了,一定要支持一下,龙潭寺论坛www.longtan123.com
weichuangseo2012-09-18 17:50:48回复评论
写的实在是太好了www.hebeitaixin.com www.keliguandao.com50915
跨浏览器的支持
豆芽机2012-05-18 16:33:46回复评论
谢谢楼主分享,支持一下!

谢谢博主分享,支持下
人气这么高,优化高手啊。
淘宝刷信誉2012-03-29 15:47:12回复评论
想讲很多 但不知道怎么表达 只能说 学习了 谢谢博主分享
谢谢分享
这些都可以借用一些工具来自动实现简写,压缩。
宇天行2012-04-09 22:09:42回复评论
OK,百度搜索框开放平台就有CSS和JS的压缩美化工具。
新款靴子2012-02-28 16:36:41回复评论
很好 第一次来就分享了
加密软件2012-02-27 14:51:33回复评论
我对css也有一定的了解
很好的知识,谢谢分享
貌似很不错,学习一下
写得很好的文章
不错
博主的文章非常不错 支持一下!
仔细读了一下博主文章觉得非常值得学习!
我对css也有一定的了解
呵呵,楼主很用心呢,CSS确实灵活性很强,多学习有好处
宇天行2011-12-11 22:53:08回复评论
嗯,就是。。。
长春短租房2011-12-10 13:59:26回复评论
看了博主的文章觉得非常值得学习,支持一下!
其实博主说得也很有道理
博主的博客很漂亮哦,第一次来博主的博客,支持博主了!
宇天行2011-12-11 22:52:39回复评论
多谢支持。
css是什么啊,没听过,看又看不懂
宇天行2011-12-09 22:39:36回复评论
作为博客管理员,也需要了解下网页制作常识哦。。。
唐狮2011-12-09 10:45:49回复评论
太给力了,希望大家多多支持哈.
宇天行2011-12-09 22:38:09回复评论
谢谢你的支持。。。
都是很使用的知识
长春短租房2011-12-07 14:46:08回复评论
觉得css很神奇
宇天行2011-12-07 20:21:16回复评论
神奇吗???
结婚礼服2011-12-06 17:48:24回复评论
我怎么感觉这些内容离我好远中
宇天行2011-12-07 20:21:03回复评论
。。。
忆草2011-12-06 16:35:13回复评论
来看看博主,一直关注着。

站内文章搜索

转播分享好友

网盟广告赞助