今天向大家介绍另外五条非常重要的CSS技巧，可能有重复，大家多多理解这些知识一定有收益。

一、图像替换文本

看得懂这个吗?我看到很多们都LOGO都只是用图片代替，而没有链接。其他，只需要更简单的方法，利用图像替换文本的方法，显示LOGO，并拥有链接。各个值的功能display:block; a的默认状态是inline的，需要让它变成块状的，才可能定义高度和宽度，以适应LOGO的宽高。另外的一个功能是，让链接在text-indent后，在原区域可点击。

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

其他的不用讲了吧…

二、display:inline-block;

在写sofished daily的CSS时，在顶站定日期的空间，就用了display:inline-block;顾名思义，就是在内联情况也的块状，可以设定高度宽度。在GR看到一篇share讲了说到了跨浏览器显示这个显示display:inline-block的方法：

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

三、用line-height文字垂直居中

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

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

四、布局居中

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

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

五、CSS缩写

CSS代码简化在工作中是非常有益的，也是必要的。在编写CSS代码时，经常会出现冗余的代码，为了提高代码的质量及文件压缩到最小，使代码具有可读性，不得不把CSS代码简化。下面用一些比较常用的属性来做示例。

margin

margin-top:1px;

margin-right:1px;

margin-bottom:1px;

margin-left:1px;

代码简化为：margin:1px

margin-top:1px;

margin-right:2px;

margin-bottom:1px;

margin-left:2px;

代码简化为：margin:1px 2px

margin-top:1px;

margin-right:2px;

margin-bottom:3px;

margin-left:2px;

代码简化为：margin:1px 2px 3px

margin-top:1px;

margin-right:2px;

margin-bottom:3px;

margin-left:4px;

代码简化为：margin:1px 2px 3px 4px

注意：当属性值是0的时候单位可以不写如：0px 直接就写成0

padding

padding的书写方法和margin相类似

padding-top:1px;

padding-right:1px;

padding-bottom:1px;

padding-left:1px;

代码简化为：padding:1px

padding-top:1px;

padding-right:2px;

padding-bottom:1px;

padding-left:2px;

代码简化为：padding:1px 2px

padding-top:1px;

padding-right:2px;

padding-bottom:3px;

padding-left:2px;

代码简化为：padding:1px 2px 3px

padding-top:1px;

padding-right:2px;

padding-bottom:3px;

padding-left:4px;

代码简化为：padding:1px 2px 3px 4px

border

border-width:1px;

border-style:solid;

border-color:#000000;

代码简化为：border:1px solid #000

background

background-color:#CCFFFF;

background-image:url(图片路径);

background-repeat:repeat-x;

background-position:5px 4px;

代码简化为：background:#CFF url(图片路径) repeat-x 5px 4px

font

font-size:26px;

font-weight:bold;

font-family: “宋体”;

代码简化为：font:26px bold “宋体”

color属性值

color:#000000;

color:#ff0000;

代码简化为：color:#000, color:#f00