DIV CSS技巧最實用的16條css樣式設定

在這裡遠方部落格整理的css技巧，可能其中的某幾條是你一直在使用的css樣式設定方法，但是其他人沒有經常應用到的，所以有些css技巧可能對你來說是非常簡單的東西，這16條個人認為最實用的div+css 技巧都通過了個人部分瀏覽器測試(ie+firefox)。

div+css是符合w3c web標準的網頁布局模式，實現了html網頁內容與表現的分離，不僅有利於**的標準化和站點維護，對搜尋引擎優化(seo)也很有好處。看看好像學習css教程挺簡單的，css樣式設定一學即會，但是要精通css，恐怕就要web設計師在實踐中不斷提高了。一些前輩整理了許多很容易被初學者忽視或很好的css技巧(包含但不僅限於div+css)，希望對大家在**開發中更熟練地應用css有所幫助。

1.鏈結的css樣式的順序：出現滑鼠經過鏈結時hover樣式不起作用的問題，檢查4個鏈結css樣式設定順序，應該為link-visited-hover-actived；

2.css設定ie瀏覽器視窗滾動條顏色等屬性，**如下：

注意應該設定body標籤的css樣式，滾動條css樣式設定在html中無效，如果html中有文件宣告，則body中設定無效。

3.css瀏覽器兼容器問題，在ie6中出現邊距margin變成雙倍的問題：

body

div

設定 float left 浮動後，左外邊距margin-left 從10px變成20px，所以還應該再加個display:inline，就不會有這個bug了。希望未來的微軟ie 9 能解決和firefox等標準瀏覽器之間的相容性問題。

4.css hack 技巧：!important 和*+html 與 *html。

ie7對!important的支援,所以 !important 方法可以針對ie6 作hack.(注意該宣告位置需要提前.)

*+html 與 *html 是ie特有的標籤, firefox 暫不支援.而*+html 又為 ie7特有標籤，因此ie7/ie6可以對firefox作hack。

注意:*+html 對ie7的hack 必須保證html頂部有如下宣告：

5. 清除浮動float 萬能辦法，設定如下的全域性css，然後在設定了float 浮動的div內加上class=」clearfloat」就可以了，

6. 用css樣式給影象設定圓角：

width=」15″ height=」15″ class=」corner」
style=」display: none」 //>
html 內容
width=」15″ height=」15″ class=」corner」
style=」display: none」 //>
css 樣式設定
.roundcont 
.roundcont p 
.roundtop 
.roundbottom 
img.corner

7. css設定div水平居中：

#container

8. css設定div內容垂直居中，以line-hight 為高度：

div

div *

div p

content here

#main

10. 給blockquote屬性設定雙引號起始：

blockquote:first-letter

11. css 簡寫技巧：

將列表list的多個css屬性：list-style-type:square; list-style-position:inside; list-style-image:url(filename.gif);簡寫成list-style:square inside url(filename.gif);字型font、邊框border、內邊距padding、外邊距margin、背景background等等都可以這樣簡寫成一行。成對出現的顏色值如#001122可以簡寫為#012；屬性值為0的時候可以省略單位px等，如padding: 10px 5px 0px 0px;可以簡寫為：padding: 10px 5px 0 0;

12. ie 不支援的css用法：

13. css 設定瀏覽器滾動條：

textarea //移除ie預設的滾動條

html //始終顯示firefox垂直滾動條

#header h1 a

15. display css hack

.element-class

16. css設定字母大小寫 text-transform：

text-transform: uppercase; 或 text-transform: lowercase; 或 text-transform: capitalize ;

即使網頁中輸入了錯誤的大小寫，text-transform也能分別轉換成全大寫，全小寫，首字母大寫(分別對應於上一行css樣式設定)。

DIV CSS技巧最實用的16條css樣式設定

DIV CSS網頁布局實用技巧

25條div CSS程式設計提醒及小技巧整理

英語面試最實用的五大技巧

DIV CSS技巧 最實用的16條css樣式設定

DIV CSS網頁布局實用技巧

25條div CSS程式設計提醒及小技巧整理

英語面試最實用的五大技巧

相關推薦

DIV CSS技巧最實用的16條css樣式設定