CSS各种技巧,CSS常用技巧,CSS实用技巧

  1. 使用CSS缩写;
  2. 明确定义单位,除非值为0;
  3. 区分大小写;一般情况下尽量使用小写;
  4. 对于class和id元素限制是没有必要的,尽量不要限制;
  5. 定义默认值。在一般情况下,padding和margin以及background都有默认值,但是在不同的浏览器里,默认值可能不一样,所以在样式表一开始就定义默认值;
  6. 就近原则,即前后的样式冲突的话离元素近的样式将覆盖其他的样式;
  7. 多重class定义,可以对同一元素使用多个class样式;
  8. 尽可能多的使用子选择器;
  9. 不要给背景图片的路径加省略号;
  10. a标签的顺序 a:link,a:visited,a:hover,a:visited;顺序出错样式可能会不正确;
  11. 完美的一像素表格 Example Source Code : table {border-collapse:collapse} td{border:1px solid #f00;}
  12. <acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym> 鼠标指上去是显示提示文字;
  13. Flash透明:选中swf,打开原代码窗口,在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”
  14. 在做网页时常用到把鼠标放在图片上会出现图片变亮的效果,可以用图片替换的技巧,也可以用如下的滤镜:

.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }

15.a img {border:none}可以去掉给图片添加超链接后图片周围的边框;

16.层叠加的五条法则:法则一:同辈元素定位方式相同,且无z-index设置时,HTML靠后者居上。法则二:同辈元素同为动态定位时,且有z-index设置时,z-index值大者居上。法则三:同辈元素定位方式不同时,动态定位居上。法则四:非同辈元素,任意一者及其祖元素不具备动态布局时,HTML靠后者居上。法则五:【重要】非同辈元素,任意一者或其祖元素拥有动态定位时,同时各自向上寻找动态定位的祖元素,并分别从中拿出具备最高级别的祖元素(或其本身)进行比较。

 

原文链接:,转发请注明来源!

发表评论