您未必知道的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;

 

轉至  玉開的技術博客