您未必知道的Css技巧

1.       關於background的寫法

DIV.comment{background:#f0f0f0url(url address)repeat-xlefttop}

1)您可以看到background的第一個定義是一個顏色值這表示在背景圖片失效的時候顏色將起作用。

2)url括號中的引號是沒有必要的,我們可以不寫引號 

2.       關於Border的寫法,如果您想定義div的四個邊的顏色不同,而粗度和樣式都一樣,您可以這樣寫:

DIV.special{border:1pxsolid; border-color:color1color2color3color4}

四種顏色一次是上,右,下,左的顏色

 

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#cccsolid; overflow:auto; _height:1%;} 

.column_left{ float:left; width:20%; padding:10px;} 

.column_right{ float:right; width:75%; padding:10px; border-left:6px#eeesolid;}

 

<divid="wrap"> 

 <divclass="column_left"> 

  <h1>Float left</h1> 

 </div> 

 <divclass="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

<linktype="text/css"rel="stylesheet"href="url "media="screen"charset="utf-8"/>

<linktype="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等僞類可以這樣使用
<h1>Buy widgets</h1>
16. 爲了避免不同瀏覽器對不同標籤的padding,margin不同的解釋可以在樣式表的前面定義
*{}{margin:0px;padding:0px;}

    <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-image.gif) no-repeat; height: image height text-indent: -2000px }

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;

發佈了54 篇原創文章 · 獲贊 0 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章