Css综合手册

[ul   li]

ul{list-style:none;}   --li去掉圆点,留下空白位置

ul{list-style:none;margin:0;padding:0;}  --li去掉圆点,去掉空白位置。

 

[兼容ie6、ie7、ff]

width:75.8%; --ie6

width:75.8% !important; --ie7

min-width:75.8%; --ff

 

[table列固定 不撑开]

 在用javascript增删列时,发生数据太长导致列撑开。

table   {   table-layout:   fixed; word-wrap:break-word; }

 

[文本框指定背景]

<input type="text" style="background-color:#eee"> 

 

[gif、jpeg、png]

 gif用于带有大块相同颜色区域的图像。

jpeg用于照片等色彩、细节丰富的图像。

 

[图像替换技术]

#pageHeader{

  background:url(lemonfresh.gif) top left no-repeat;

  width:400px;

  height:20px;

}

#pageHeader span{

  display:none;

}

<h1 id="pageHeader"><span>css Zen Garden</span></h1>

图像替换技术有一个问题:Google能够读取到隐藏的文本,而有些屏幕阅读器却不能。

图像替换技术的本意是让视觉不便用户也能够获取图像传递的信息,但实际上它却没有达到预期的目标。

不但如此,若用户在浏览器中禁用了图像,但却保留CSS,那么屏幕上将什么都不会显示。

 

[网格布局、CSS布局]

摆脱了表格的限制之后,设计师在创作时不再有束手束脚的感觉。这一转变所带来的最大的好处之一就是,

我们能够以一种完全不同的方式使用图像,让作品远远好过从前。

严格、刻板且阻碍设计师发挥的网格布局年代已经过去。借助CSS的帮助,我们可以将图像以背景的形式应用到任何元素上,

进而实现诸如图像分层、图像覆盖——甚至在某些浏览器中用PNG透明效果创建出一系列图片之间的交互效果等功能。

CSS不但让设计师变得更有创造力,同时也减轻了页面文件大小,让浏览者也倍感满意。

 

[减少图像的使用]

口.尽可能地使用文本样式代替图像。合理地把握图像和文本之间的平衡将会得到立竿见影的效果。

口.只保留图像中为实现预期效果所必需的部分。在使用照片作为背景图或页面标题时,这一条所带来的好处显而易见——丝毫不影响图像质量同时又降低文件大小。

口.使用细条图像填充背景。

口.尽可能地重复使用图像。

口.合理地选用图像或颜色。若CSS中的color或background-color属性也能实现设计效果,则你应该毫不犹豫地使用这些属性,而不是背景图像。

最后补充,若能不使用图像,那么就不要使用。图形设计中最大的诱惑就是为作品添加过多的非必要图像。每添加一副图像之前都要先问问自己,

这幅图像在作品中真的有其明确的目的,会起到预期的作用且能带来美感吗?如果并不能完全确定,那么就考虑将其移除。

 

[固定高度,超过高度自动滚动条]

style="height:100px;overflow:hidden;"

posted on 2011-06-02 14:35  林枫山  阅读(514)  评论(0编辑  收藏  举报