您未必知道的Css技巧

1.       关于 background 的写法

DIV.comment {background:#f 0f 0f 0 url( url address) repeat-x left top}

1）您可以看到 background 的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。

2）url括号中的引号是没有必要的，我们可以不写引号 

2.       关于 Border 的写法，如果您想定义 div 的四个边的颜色不同，而粗度和样式都一样，您可以这样写：

DIV.special {border:1px solid; border-color:color1 color2 color3 color4}

四种颜色一次是上，右，下，左的颜色

 

3.       为了兼容所有的浏览器都可以显示半透明效果的写法

.tranparent {

        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

        -moz-opacity:0.5;

        -khtml-opacity:0.5;

        opacity: 50%;

        position:absolute;/* 注意必须是absolute的*/

        top:100px;

        left:100px;

}

 

4.       _height,_width 的作用

使用 _height 解决 float 的 div 不闭合的问题，您可以将 _height 属性去掉就可以开到效果了。

#wrap { border:6px #ccc solid; overflow:auto; _height:1%;}

.column_left { float:left; width:20%; padding:10px;}

.column_right { float:right; width:75%; padding:10px; border-left:6px #eee solid;}

 

< div id="wrap">

 <div class="column_left">

  <h1>Float left</h1>

 </div>

 <div class="column_right">

  <h1>Float right</h1>

 </div>

</ div >

 

5.       使用 min-height min-width 解决 div ，或者 span 的固定高度问题

有时候我们需要设定某个元素固定高度，但是在 firefox 或者 opera 下面只设置高度，在内容不够多的时候，达不到预想的效果，这时候我们可以使用 min-height

 

6.       使用 !important 改变样式的优先级

所谓的样式优先级是指，浏览器在应用样式时总是根据就近原则来应用样式，假定我们在一个页面中有三处都有对某个元素的定义，一处是在外部的 css 文件中，一处是在文件的 head 标签中定义内联 css ，另一处是在这个元素的标签内，那么根据就近原则此元素最终使用的样式是在标签内定义的样式，如果我们需要打破这种规则我们就可以使用 !important 指令

a.test {color:red!important}

这样即使在 A 元素内定义了 color 也不会应用，而是应用上面的定义

 

7.       使用 media 指令引入两种 css ：打印版本的 css 和屏幕显示的 css

< link type="text/css" rel="stylesheet" href="url " media="screen" charset="utf-8" />

< link type="text/css" rel="stylesheet" href="url" media="print" charset="utf-8" />

8.       > 符号（目前 ie 不支持）

我们可以使用 DIV A 的方式来定义所有在 div 里面的所有 A 标签的样式，包括 div 下面的 span 中的 div ；如果我们只想定义 DIV 下面一级子节点的 A 标签我们可以使用“ > ”符号，例如：

DIV>A {color:red}

现在只有是 DIV 的直接子节点 A 标签的颜色是红色

9 ． :first-child :last-child 在非 ie 的浏览器下面可以通过这两个指示符，取到父元素的第一个元素或者最后一个元素

 

20070412 21：05增加
10. ：hover等伪类可以这样使用

        <style type="text/css">
        .menu{} {}
        .menu ul{} { display: none}
        .menu:hover{} {}
        .menu:hover ul{} { display: block}
        </style>

 

< ul >
         < li class ="menu" >
                menu title
                 < ul >
                         < li >first </li>
                         < li >last </li>
                 </ul>
         </li>
</ul>

 

这样我们就可以做只用css控制的菜单，在ie6，ie7，firefox1.5，opera9.0下面测试通过 

11.我们可以使用 page-break-after，page-break-before控制打印时的分页

 

20070413 12:13

12. * html{}的作用是为了兼容6.0以下的IE版本，对html节点的选取，其他的浏览器都认为html标签是文档的根节点，而ie6以下的ie版本却认为在html标签的上面还有一个根节点
---感谢 calmzeal的解释

13. css 的class可以有多个值，我们只需要将多个值用空格隔开就可以了

14. 颜色的缩写 我们可以将#ff0033缩写成#f03

15. 使用text-indent显示图片，而隐藏文字（这种做法据说有助于SEO）

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

 

< h1 >Buy widgets </h1>

 

16. 为了避免不同浏览器对不同标签的padding，margin不同的解释可以在样式表的前面定义

*{} { margin: 0px; padding: 0px;}

 

20070422 12:00添加
17. 关闭输入法状态，使用户只能输入英文状态下的字符，类似输入密码

input {} { ime-mode: disabled ; }

 

20070423 09:08
18. 死都不换行，摘录（ 作者）
   1) white-space:nowrap; overflow: hidden; width: 17em !important ; width: 18em;
   注意： white-space不支持td,th等。
   2) 用.fixTable{ table-layout: fixed; overflow:hidden; }加上nobr标签实现隐藏
    nobr标签非标准。
20070426 0848
19. 同比改变图片大小
img.style.zoom = 0.5;

 

转至  玉开的技术博客