鮮為人知的CSS用法技巧

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);

卷        -khtml-opacity:0.5

;

       #50%;

        position:absolute;/*

#注意必須是absolute的*/        top:100px;

#     ;#    :

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 lefth1>

 #div#>

 <div class="column_right">

## <h1

>

Float right

h1

#>

 

#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等偽類別可以這樣使用

<

h1>Buy widgetsh1>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;

 

##    

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 {#}#{ 背景: url(widget-image.gif) 不重複; 高度: 圖像高度文字縮排: -2000px }

#