2008.10 18

5+有用的CSS技巧

标签: , , ,
资源共享

CSS技巧很多，有的是创造性的，而有些只为培养一个高效率的习惯。而无论怎么说，这都是有益的东西。不妨学习一下：

1. 图像替换文本

960px.gif

#header h1 a{display:block;text-indent:-9999em;background:(images/logo.png) no-repeat 0 0;height:87px;width:250px;}

看得懂这个吗? 我看到很多们都LOGO都只是用图片代替，而没有链接。其他，只需要更简单的方法，利用图像替换文本的方法，显示LOGO，并拥有链接。各个值的功能

display:block; – a的默认状态是inline的，需要让它变成块状的，才可能定义高度和宽度，以适应LOGO的宽高。另外的一个功能是，让链接在text-indent后，在原区域可点击。

text-indent:-9999em; – 难道你想删除logo中的文字?这样应该是你的最后选择。因为这不符合语议标记，所以，也对搜索引擎不友好。而这个值就是让你的字体缩进到看不到的地方。让你不用删除文字。

其他的不用讲了吧，哈哈…

2. display:inline-block;

sofished.png

在写sofished daily的CSS时，在顶站定日期的空间，就用了display:inline-block;顾名思义，就是在内联情况也的块状，可以设定高度宽度。

在GR看到一篇share讲了说到了跨浏览器显示这个显示display:inline-block的方法：

.element-class {
display: -moz-inline-stack; //Firefox only code
display: inline-block; //some standard browsers
zoom: 1; //IE only
*display: inline; //Only IE know this code (CSS Hack)
}

好处是什么? 好处就是不用使用float，在一行中显示设定宽高的元素。不过，上面提到的跨浏览器，貌似我在IE下依然可以显示，难道是IE tester的问题？

3. 用line-height垂直居中文字

line-height.gif

你可能知道用text-align来让文字水平剧中，不过，却找不到更直接的方法来让元素垂直居。这里，或许你可以利用一下line-height。比如你要在导航中让文字简直居中于导航，可能会想到用padding和margin，不过，这时，烦人的IE可能会给你制造出麻烦，所以，用line-height吧，这是一个更简单的方法：

上面这张图片的导航高度是28px，你可以给a设定这样的值：#navigation a{font-size:14px;line-height:28px;}，这样，就少去了用padding和margin的麻烦了。

4. 布局居中

sofished.gif

你会发现，很多网站的布局都是剧中的。原因是方便浏览，对用户比较好？对于初学CSS的人来说，可能并不知道怎么做吧。很简单，就一句，假设你的布局的那个div壳是#wrapper：

div#wrapper{margin:0 auto;}

这就是说，让上面没有margin，而左右自动适应，选择相等的宽度。这样就可以更好地在各个浏览器中表现了。

5. CSS缩写规则

CSS缩写，为什么？简单来说有两个好处。一，让你写代码更有效率，因为短；二方便修改，谁也不想对着一堆杂乱的代码发呆。貌似有很多人写过这个，不过，这里，就重复一下吧。我并不想直接写出所有，这样文章看起来似乎特别长，就给你一个PDF吧，作者不是我，不过，一样的啦，只要你看得明白就OK了：

Download/下载: CSS cheat sheet

而文章就不继续了，感觉写太多占用时间太多。而最近总感觉时间不够用。有空再继续写一些CSS技巧，分享给大家，新手也好，高手也好，熟悉好用就好。

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » 资源共享 »

27

  1. 2008.10.18 12:41 pm
    ZH CEXO(visit): [回复]

    沙发~记下来，以后用~

  2. 2008.10.18 12:43 pm
    Yacca(visit): [回复]

    错别字….

  3. 2008.10.18 1:41 pm
    Shawn(visit): [回复]

    很棒，我总算看到一个原创的总结性文章了，以前看的都是 SmashingMagzine 的翻译。。。
    我一般不对文字 text-indent 那么多，都是直接用个 1px 的透明 gif 充当图片，再设背景。

  4. 2008.10.18 1:41 pm
    EaSy(visit): [回复]

    学习ING！！！

  5. 2008.10.18 3:15 pm
    胡戈戈(visit): [回复]

    不错不错

  6. 2008.10.18 5:44 pm
    NetPuter(visit): [回复]

    哇塞,很不错的说..
    有些知道不会用..

  7. 2008.10.18 5:45 pm
    NetPuter(visit): [回复]

    @Shawn: 直接用个 1px 的透明 gif 充当图片,这样会拖慢页面速度的~

  8. 2008.10.18 9:44 pm
    ZH CEXO(visit): [回复]

    er…十月还没过，怎么主题又换回来了？

  9. 2008.10.18 9:58 pm
    sofish(visit): [回复]

    @ZH CEXO: 感觉很多问题 没解决。

  10. 2008.10.18 10:02 pm
    李普曼(visit): [回复]

    哈哈～我说吧，还是这个模板好看撒～

  11. 2008.10.18 10:32 pm
    花果山寨(visit): [回复]

    高手就是高手，看完突然间觉得明白了很多！

  12. 2008.10.18 10:48 pm
    西华秦(visit): [回复]

    轻轻的说句，错别字好多。。。。

  13. 2008.10.18 10:52 pm
    sofish(visit): [回复]

    @西华秦: @Yacca: 哈哈，是啊，算了，大家看清楚就好了嘛。

  14. 2008.10.18 10:52 pm
    housne(visit): [回复]

    第二个和有用，之前也在GR上看到过，一直没去实践！

  15. 2008.10.19 4:48 pm
    雀巢(visit): [回复]

    第二条看不太懂

  16. 2008.10.19 7:17 pm
    LoveBlogEarn(visit): [回复]

    不错，对于我这样的人来说 比较有用！可以学习下！

  17. 2008.10.20 12:49 am
    purplefire(visit): [回复]

    嗯，这个，是必须要收藏的，感谢某鱼~

  18. 2008.10.20 10:47 am
    louis(visit): [回复]

    OH!~ye.好东西啊.虽然是些简单的东西.但很实用!~

  19. 2008.10.20 1:29 pm
    小墨(visit): [回复]

    css就是这么些细细碎碎的东西比较多
    有时也挺烦

  20. 2008.10.21 7:06 pm
    z.Yleo77(visit): [回复]

    简短精悍， 除了第五个还没看到， 其他几个还挺受用。。过了。

  21. 2008.10.21 11:38 pm
    stephen(visit): [回复]

    你文章里面第二个效果做的很好，效果看起来很真实！！！

  22. 2008.10.22 1:01 am
    很实用网站(visit): [回复]

    跪在多总结。

  23. 2008.10.27 8:42 pm
    DDA(visit): [回复]

    确实有几条我以前没有解决的，文章我转走了^_^

  24. 2008.11.07 9:47 pm
    LD(visit): [回复]

    保存、 以后看

  25. 2008.12.13 12:41 pm
    steve(visit): [回复]

    看这篇文章发现你的wordpress能实现文件下载，请问一下怎么做到的，盼回复!!

  26. 2008.12.20 1:31 pm
    steve(visit): [回复]

    看这篇文章发现你的wordpress能实现文件下载，请问一下怎么做到的??

  27. 2009.04.06 9:51 pm
    柴鸡不柴(visit): [回复]

    感觉line-height各浏览器的值也有细微的差别 IE8就总是比FF偏上一点

Additional comments powered by BackType