您未必知道的Css技巧

1.       关于background的写法

DIV.comment{background:#f0f0f0 url(‘url address’) repeat-x left top}

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

 

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-after控制打印的换行