• [原] 关于CSS样式的优先级问题

    2005-10-19

    在CSS中，你可以为同一个标签定义多个样式，如下面的例子：

    ------------------------------例子----------------------------
    <style type="text/css">
    <!--
    #aaa{
       background-color: Fuchsia;
    }
    .ab{
       background-color: Black;
    }
    td{
       background-color: Aqua ;
    }
    -->
    </style>
    <table>
    <tr>
    <td class="ab" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
    </tr>
    </table>
    ------------------------------------------------------

    这么多的样式，哪个是有效的呢？
    我们一个一个把上面的样式删除，在浏览器中可以看到：
    style的优先级最高，然后是id，再来是class，最后才是td
    另外，使用!important可以改变优先级别为最先，如下：

    -----------------------------------------
    <style type="text/css">
    <!--
    #aaa{
       background-color: Fuchsia;
    }
    .ab{
       background-color: Black;
    }
    td{
       background-color: Aqua !important;
    }
    -->
    </style>
    <table>
    <tr>
    <td class="ab" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
    </tr>
    </table>
    ------------------------------------------

    td将会显示为Aqua
    即优先级变为td，然后是style，再来是id，最后是class

    注：谢谢QQ48251710的朋友指出了文章中的一个错误，现已经改正。

    Tag：CSS 原创 优先级
    Ghost 发表于18:36 | 阅读全文 | 评论 0 | 编辑 | 推荐

  • [原] 使用CSS制作表格效果

    2005-10-19

    使用层制作：
    --------------------------------------------------------------------------------
    <style type="text/css">
    <!--
    #t_td{
       height: 500px;/* 定义表格高度 */
       width: 300px;/* 定义表格亮度，可控制列数 */
       padding: 2px;
    }
    #t_td div{
       float: left;
       width: 100px;/* 定义单元格宽度 */
       height: 10px;/* 定义单元格高度 */
       border: 1px solid;
       margin: -1px 0 0 -1px;
    }
    -->
    </style>
    <div id="t_td">
       <div>1</div><div>2</div><div>3</div>
       <div>4</div><div>5</div><div>6</div>
       <div>6</div><div>8</div><div>9</div>
    </div>
    --------------------------------------------------------------------------------
    使用span制作：
    --------------------------------------------------------------------------------
    <style type="text/css">
    <!--
    #t{
       height: 500px;/* 定义表格高度 */
       width: 300px;/* 定义表格亮度，可控制列数 */
       padding: 1px;
    }
    #t span{
       width: 100px;/* 定义单元格宽度 */
       height: 10px;/* 定义单元格高度 */
       border:1px solid;
       margin:-1px 0 0 -1px;
    }
    -->
    </style>

    <span id=t>
       <span>1</span><span>2</span><span>3</span>
       <span>4</span><span>5</span><span>6</span>
       <span>7</span><span>8</span><span>9</span>
    </span> 

    Tag：CSS 代码分享 原创
    Ghost 发表于18:33 | 阅读全文 | 评论 0 | 编辑 | 推荐

  • [原] 仿Office 2003的工具条

    2005-09-13

    看到网上有篇《仿Office 2003的工具条》，于是自己也简单的做了一个。
    借鉴了文章里对<input>鼠标事件的处理方法。
    -------------------------------源码-----------------------------------------
    <style type="text/css">
    <!--
    .lostfocus {
       background-color: #FFFFFF;
       border: 1px #FFFFFF solid;
       font: 12px Arial;
       vertical-align: baseline;
    }

    .getfocus {
       background-color: #FFFFFF;
       border: 1px #08246B solid;
       font: 12px Arial;
       vertical-align: baseline;
    }

    .leftitem {
       cursor: hand;
       padding: 0 2px 0;
       text-align: center;
       vertical-align: baseline;
       width: 30px;
    }

    .leftitemover {
       background-color: #C2D5F8;
       border: 1px #6495ED solid;
       cursor: hand;
       padding: 0 2px 0;
       text-align: center;
       vertical-align: middle;
       width: 30px;
    }

    .leftitemdown{
       background-color: #E4EDFC;
       border: 1px #6495ED solid;
       cursor: hand;
       padding: 0 2px 0;
       text-align: center;
       width: 30px;
    }

    .menubar {
       filter: progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#F7F7F7, endcolorstr=#DEDBD6);
       font-size: 12px;
       height: 30px;
       width: 368px;
    }

    .botimg{
       border: 1px inset;
       width: 1px;
    }
    -->
    </style>
    <body style="background-color:#BFBFBF;">
    <table class="menubar">
       <td>
        <img class="botimg" /><br />
        <img class="botimg" /><br />
        <img class="botimg" /><br />
        <img class="botimg" /><br />
        <img class="botimg" /><br />
        <img class="botimg" /><br />
       </td>
     <td>
          姓名
      <input type="text" name="T5" size="18" class="lostfocus" gf="0" onmouseover='this.className="getfocus"' onmouseout='if (this.gf=="0") this.className="lostfocus"' onblur='this.className="lostfocus";this.gf="0"' onfocus='this.className="getfocus";this.gf="1"'>
      密码
      <input type="password" name="T6" size="18" class="lostfocus" gf="0" onmouseover='this.className="getfocus"' onmouseout='if (this.gf=="0") this.className="lostfocus"' onblur='this.className="lostfocus";this.gf="0"' onfocus='this.className="getfocus";this.gf="1"'>
          <img height=16 class="botimg" style="vertical-align:bottom;">
     </td>
       <td class="leftitem" gf="0" onmouseover='this.className="leftitemOver"' onmouseout='if (this.gf=="0") this.className="leftitem"' onblur='this.className="leftitem";this.gf="0"' onmousedown='this.className="leftitemDown";this.gf="0"' onfocus='this.className="leftitem";this.gf="1"'>
      <a>登陆</a>
       </td>
    </table>

    Tag：CSS 代码分享 原创
    Ghost 发表于18:41 | 阅读全文 | 评论 0 | 编辑 | 推荐

  • [原] 1px表格

    2005-09-13

    今天刚搞出来的，留下以后可以用。
    -------------------------------------------
    /*CSS样式表*/
    table{
       border-collapse: collapse;/*设置单元格的边合并在一起*/
       empty-cells : show;/*设置单元格无内容时，显示该单元格的边框*/
    }
    td{
       border: #000000 solid 1px;/*设置边框*/
       padding: 3px;/*内容与边框的间距*/
    }
    Tag：CSS 代码分享 原创
    Ghost 发表于18:38 | 阅读全文 | 评论 0 | 编辑 | 推荐
共10页 第一页 上一页 1 2 3 4 5 6 7 8 9 10