您未必知道的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-p_w_picpath.gif) no-repeat; height: p_w_picpath 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;

 

转至  玉开的技术博客