1. 關于background的寫法
DIV.comment{background:#f0f0f0 url 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;
-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>
<h1>Float left</h1>
</div>
<div>
<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. > 符號
我們可以使用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>
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顯示圖片,而隱藏文字
以下為引用的內容:
h1 { background: url no-repeat; height: image height text-indent: -2000px
}
<h1>Buy widgets</h1>
16.
為了避免不同瀏覽器對不同標簽的padding,margin不同的解釋可以在樣式表的前面定義
*{margin:0px;padding:0px;}
編輯整理