实用的css知识点总结

1.text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

text-indent:2em;首行文本缩进2字符（em是相当单位，用em可以实现动态改变。不论字体调大还是调小，都能实现首行文本缩进的是2字符。）

2.vertical-align:middle，实现图片和文字垂直居中对齐。例如：

<div><img style="vertical-align:middle;" src="/img/01.png"  />用CSS实现图片和文字垂直居中对齐</div><br /><br />
<div>

 

3.图片替换文字：

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

<h1>Buy widgets</h1>

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

 

更多 内容，请参看这个：http://www.hi5521.com