快速业务通道

稀为人知的几个有用的Css技巧

作者 佚名技术 来源 CSS编程 浏览 发布时间 2012-05-27

1. 关于background的写法
 

DIV.comment{background:#f0f0f0 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/

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号