CSS常用技巧

css

使用技巧

1.*

可以避開css的盒模型考慮問題，指定margin和padding的值的時候在分別另外指定，後面的只將覆蓋前面的值。

2.img

可以避免帶鏈結的邊緣出現藍色邊框，將以塊級元素顯示。

/*3．#nowrap

有時候我們要在首頁動態列印一列十條文章，要放在乙個css容器div裡面，若每行文字太多，元素很容易破壞容器而使整個布局變壞。*/

4．div有時候中文文字很長，不管ie還是ff，到達邊界都會自動換行。但是如果我們不希望著這樣的話，例如：當幾個li併排排列的時候，不想讓沒行的最後乙個li文字自動換行，那就可以使用本屬性。在遇到本屬性的時候，文字只有在遇到空格和換行符的時候才能換行。

5. block

和inline元素對比

所有的html元素都屬於block和inline之一。

block

的特點：

總是在新行上開始；

高度，行高以及頂和底邊距都可控制；

寬度預設是它的容器的100%，除非設定乙個寬度

, , , ,

然後分別為每一頁的body指定乙個id，和上面類同名。如。

然後設計css如下：

#home .home, #about .about, #contact .contact

這裡，當id設為home時，.home就會起作用，也就是class設為home的那一行導航條就會顯示出特殊效果來。其他頁也是如此。

18.使用!important改變樣式的優先順序

所謂的樣式優先順序是指，瀏覽器在應用樣式時總是根據就近原則來應用樣式，假定我們在乙個頁面中有三處都有對某個元素的定義，一處是在外部的css檔案中，一處是在檔案的head標籤中定義內聯css，另一處是在這個元素的標籤內，那麼根據就近原則此元素最終使用的樣式是在標籤內定義的樣式，如果我們需要打破這種規則我們就可以使用!important指令

a.test

19.常用文字處理，例如縮排，首字下沉，豎排文字等等，可以參考此鏈結

20.

21.

針對ie的優化

有些時候，你需要對ie瀏覽器的bug定義一些特別的規則，這裡有太多的css技巧(hacks)，我只使用其中的兩種方法，不管

微軟在發布的ie7

beta版裡是否更好的支援css，這兩種方法都是最安全的。

1.注釋的方法

(a)在ie中隱藏乙個css定義，你可以使用子選擇器(child selector):

body p

(b)下面這個寫法只有ie瀏覽器可以理解(對其他瀏覽器都隱藏)

* html p

(c)還有些時候，你希望ie/win有效而ie/mac隱藏，你可以使用」反斜線」技巧：

/* /*/

* html p

/* */

22.圓角的做法

好處是便於維護,只有乙個.還可以某種程度上的任意縮放.缺點是多了無意義的html**.

—————-css—————–

.c,.c i,.c i i,.c b,.c b b,.c p

.c.c i

.c i i

.c b

.c b b

.c p

—————html—————–

< div class="c">

按鈕按鈕按鈕按鈕按鈕按鈕

按按按按按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕

< /div>

23. caption

這個標籤在firefox下會有左邊有1px空隙的bug,很討厭.能想到的簡單的方法只有-1px的margin了.

—————-css—————–

table

table caption,table td,table th

table caption

—————html—————–

**標題

標題標題

內容內容

24.acronym這個標籤用來解釋名詞很爽,但是用得太少.

—————-css—————–

acronym

—————html—————–

段正淳又是金庸筆下乙個十分奇特的人物。他奇特在到處留情，情人極多，見乙個愛乙個，而又絕不是徒然風流薄倖，當他是單獨對著乙個情人的時候，他真是真心真意愛這個情人的，只好說這個人的感情特別豐富，別無其他解釋。" >文字

25.input

在各個瀏覽器裡面的統一

可以參考http://ued.taobao.com/blog/wp-content/uploads/2008/01/input.html

CSS常用技巧

css常用技巧

CSS 常用開發技巧

css常用技巧集合

CSS常用技巧

css常用技巧

CSS 常用開發技巧

css常用技巧集合

相關推薦