Your Ad Here
首页 | 编程语言 | 网站建设 | 游戏天堂 | 冲浪宝典 | 网络安全 | 操作系统 | 软件时空 | 硬件指南 | 病毒相关 | IT 认证
软讯网络 > 编程语言 > .NET > VB.NET > 您未必知道的Css技巧
【标  题】:您未必知道的Css技巧
【关键字】:Css
【来  源】:http://www.cnblogs.com/yukaizhao/archive/2007/04/12/css_tips.html

您未必知道的Css技巧

Your Ad Here

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解决floatdiv不闭合的问题,您可以将_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控制打印的换行

Community Server 插件开发二:【上一篇】
WinDbg学习资料整理下载:【下一篇】
【相关文章】
  • Js + Css的msn式的popup提示窗口的实现
  • css手册(一)Background 背景
  • css手册(二) Text 文字
  • CSS手册(五)Margin外补丁(边距)
  • css手册(六)List 列表
  • css手册(七)Classification 分类
  • css的使用技巧
  • web打印字体css设置
  • CSS ime-mode用法
  • 《CSS设计禅机(the Zen of CSS Design)》译者序(草稿)
  • 【随机文章】
  • 初學oracle的一點感想
  • 自定义UI在不同的LookAndFeel下的替换问题.
  • 一个支持汉字模糊查询的函数
  • Supermicro在台北Computex揭開Xeon伺服器面紗 民国95-06-07
  • 原创的自定义分页UserControl 分享及探讨
  • [Perl文]简单多线程结构分析
  • 发行版发布: Debian GNU/Linux 3.1r4
  • 第一次用
  • 怎样正确声明 main()?
  • 关于sizeof的问题
  • 【相关评论】
    没有相关评论
    【发表评论】
    姓名:
    邮件:
    随机码*
    评论*
          
    |  首 页  |  版权声明  |  联系我们   |  网站地图  |
    CopyRight © 2004-2007 软讯网络 All Rigths Reserved.