CSS高手分享精典技巧
日期：2013-06-06 浏览次数：21294 次
CSS高手分享精典技巧
一、ul标签在Mozilla中默认是有padding值的，而在IE中只要margin有值。
二、同一个的class选择符可以在一个文档中反复出现，而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义，如果定义有反复，id选择符做的定义无效，是由于id的权重要比class大。
三、一个兼容性调整(IE和Mozilla)的笨办法：
初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必需要设成B才能正常显示，或者两个倒过来。
临时处理方法：选择符{属性名:B !important;属性名:A} 或许有时候并没无效果。你可以在52CSS.com搜索更多的BUG处理方法。
四、如果一组要嵌套的标签之间需求些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding
五、li标签前面的图标推荐使用background-image，而不是list-style-image。
六、IE分不清承继关系和父子关系的差别，全部都是承继关系。
七、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。等你当前修正你的CSS的时候就知道为什么要这么做了。另外提示您，不要太疯狂了。
八、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。由于图片丢失了，也可以保持文字的可读性。
九、定义链接的四种形状要留意先后顺序: Link Visited Hover Active
十、与内容无关的图片请使用background。时辰记住表现与内容分离。
十一、定义颜色可以缩写#8899FF=#89F
十二、table在某些方面还是有用武之地的，在遇到内容为数据表格时，不要对它产生憎恨的心思。
十三、<script>没有language这个属性，应该写成这样:<script type=”text/javascript”>
十四、完满的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试）
table{ border-collapse:collapse; } td{ border:#000 solid 1px; } |
十五、margin取负值可以在标签使用绝对定位的时候起到绝对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要绝对定位的标签旁，然后使用margin的负值是个好方法。
十六、绝对定位时使用margin值定位可以达到绝对于本身所在位置的定，这与top，left等属性绝对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
十七、如果文字过长,则将过长的部分变成省略号显示：IE5,FF无效，但可以隐藏，IE6无效
<DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> <NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR> |
十八、在IE中可能由于注释带来的文字反复问题时可以把注释改为：
<!–[if !IE]>Put your commentary in here…<![endif]–> |
十九、如何用CSS调用外部字体
语法：
@font-face{font-family:name;src:url(url);sRules} |
取值：
name：字体名称。任何可能的 font-family 属性的值 url(url)：使用绝对或绝对 url 地址指定OpenType字体文件 sRules：款式表定义 |
二十、如何让一个表单中的文本框中的文字垂直居中？
如果用行高与高度的组在FF中是没无效果的，办法就是定义上下补白就可以实现想想的效果了。
二十一、定义A标签要留意的小问题：
当我们定义a{color:red;}时，它代表了A的四种形状的款式，如果此时要定义一个鼠标放上的形状只需定义a:hover就可以了，其它三种形状就是A中所定义的款式。只定义了一个a:link时，一定要记得把其它三种形状定义出来！
二十二、并不是所有款式都要简写：
当款式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又添加了一个款式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px&
