css樣式就得這么寫(xiě)(css參考樣式集合)

body,p,h1,h2,h3,h4,h5,h6{margin:0; padding:0;}

v

上面有關(guān) body,p 等標(biāo)簽的樣式中有個(gè)樣式是無(wú)效的，與默認(rèn)值一致的，這個(gè)樣式就是 padding:0;，對(duì)于 body,p,h1~6 這些標(biāo)簽，本身的 padding 值就是0，所以只需要 margin:0 就可以了。

在CSS reset中，為了方便，都是一堆標(biāo)簽直接套個(gè) margin:0;padding:0; 了事。還拿人人網(wǎng)的 CSS 樣式文件舉例，人人網(wǎng)個(gè)人首頁(yè)樣式第一行就是一長(zhǎng)串標(biāo)簽帶個(gè) margin:0;padding:0; 先不管其把 span,div,em 之類(lèi)的標(biāo)簽也加進(jìn)入，就算是沒(méi)有這些標(biāo)簽，也是極不推薦這種寫(xiě)法，完全的浪費(fèi)資源，浪費(fèi) CSS 的渲染。比較推薦的做法是把 ul,ol 獨(dú)立出來(lái)，因?yàn)?code>ul,ol還要獨(dú)立設(shè)置 list-style 樣式，而且常用的標(biāo)簽就 ul,ol 列表元素有默認(rèn)的 padding 值，所以高效的寫(xiě)法應(yīng)該是：

這也是常出現(xiàn)的。出現(xiàn)這種情況的原因可能與 IE6 的浮動(dòng)雙邊距 bug 有關(guān)，我們可以用設(shè)置 display:inline 的方法修復(fù) IE6 的這個(gè) bug，但是，如果對(duì)這個(gè) bug 理解不夠，對(duì) CSS 的理解不足，就會(huì)出現(xiàn)濫用的情況。上面是濫用的情況之一，對(duì)于 span/a/em/cite/i/b/strong 等行內(nèi)元素默認(rèn)就是 display:inline 的，所以給其設(shè)置 display:inline 屬性是多此一舉。

類(lèi)似的情況還有對(duì)本身就是 block 水平的元素設(shè)置 display:block 屬性，例如：

上面的情況屢見(jiàn)不鮮，甚至在比較優(yōu)秀的網(wǎng)站上也會(huì)有這類(lèi)低級(jí)的樣式問(wèn)題。

---

css參考樣式集合

一. 字體屬性：(font)

1. 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數(shù)值就可以，單位：PX、PD

2. 樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)

3. 行高 {line-height: normal;}(正常) 單位：PX、PD、EM

4. 粗細(xì) {font-weight: bold;}(粗體) lighter;(細(xì)體) normal;(正常)

5. 變體 {font-variant: small-caps;}(小型大寫(xiě)字母) normal;(正常)

6. 大小寫(xiě) {text-transform: capitalize;}(首字母大寫(xiě)) uppercase;(大寫(xiě)) lowercase;(小寫(xiě)) none;(無(wú))

7. 修飾 {text-decoration: underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

二. 常用字體： (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

三. 背景屬性： (background)

1. 色彩 {background-color: #FFFFFF;}

2. 圖片 {background-image: none;}

3. 重復(fù) {background-repeat: no-repeat;}repeat-x(水平);repeat-y(垂直)

4. 滾動(dòng) {background-attachment: fixed;}(固定) scroll;(滾動(dòng))

5. 位置 {background-position: left;}(水平) top(垂直);

簡(jiǎn)寫(xiě)方法 {background:#000 url(..) repeat fixed left top;} /*簡(jiǎn)寫(xiě)·這個(gè)在閱讀代碼中經(jīng)常出現(xiàn).

四. 區(qū)塊屬性： (Block)

1. 字間距 {letter-spacing: normal;} 數(shù)值 

2. 對(duì)齊 {text-align: justify;}(兩端對(duì)齊) left;(左對(duì)齊) right;(右對(duì)齊) center;(居中)

3. 縮進(jìn) {text-indent: 數(shù)值px;}

4. 垂直對(duì)齊 {vertical-align: baseline;}(基線) sub;(下標(biāo)) sup;(上標(biāo)) top; text-top; middle; bottom; text-bottom;

5. 詞間距word-spacing: normal; 數(shù)值

6. 空格white-space: pre;(保留) nowrap;(不換行)

7. 顯示 {display:block;}(塊) inline;(內(nèi)嵌) list-item;(列表項(xiàng)) run-in;(追加部分) compact;(緊湊) marker;(標(biāo)記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標(biāo)題) /*display 屬性的了解很模糊*/

五. 方框?qū)傩裕?(Box)

1. width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左

六. 邊框?qū)傩裕?(Border)

1. border-style: dotted;(點(diǎn)線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊?fàn)? inset;(凹陷) outset; border-width:; 邊框?qū)挾?/span>

border-color:#;

簡(jiǎn)寫(xiě)方法border：width style color; /*簡(jiǎn)寫(xiě)*/

七. 列表屬性： (List-style)

1. 類(lèi)型list-style-type: disc;(圓點(diǎn)) circle;(圓圈) square;(方塊) decimal;(數(shù)字) lower-roman;(小羅碼數(shù)字) upper-roman; lower-alpha; upper-alpha;

2. 位置list-style-position: outside;(外) inside;

3. 圖像list-style-image: url(..);

八. 定位屬性： (Position)

1.Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切)

九. CSS文字屬性：

1. color : #999999; /*文字顏色*/

2. font-family : 宋體,sans-serif; /*文字字體*/

3. font-size : 9pt; /*文字大小*/

4. font-style:itelic; /*文字斜體*/

5. font-variant:small-caps; /*小字體*/

6. letter-spacing : 1pt; /*字間距離*/

7. line-height : 200%; /*設(shè)置行高*/

8. font-weight:bold; /*文字粗體*/

9. vertical-align:sub; /*下標(biāo)字*/

10. vertical-align:super; /*上標(biāo)字*/

11. text-decoration:line-through; /*加刪除線*/

12. text-decoration: overline; /*加頂線*/

13. text-decoration:underline; /*加下劃線*/

14. text-decoration:none; /*刪除鏈接下劃線*/

15. text-transform : capitalize; /*首字大寫(xiě)*/

16. text-transform : uppercase; /*英文大寫(xiě)*/

17. text-transform : lowercase; /*英文小寫(xiě)*/

18. text-align:right; /*文字右對(duì)齊*/

19. text-align:left; /*文字左對(duì)齊*/

20. text-align:center; /*文字居中對(duì)齊*/

21. text-align:justify; /*文字分散對(duì)齊*/

vertical-align屬性

22. vertical-align:top; /*垂直向上對(duì)齊*/

23. vertical-align:bottom; /*垂直向下對(duì)齊*/

24. vertical-align:middle; /*垂直居中對(duì)齊*/

25. vertical-align:text-top; /*文字垂直向上對(duì)齊*/

26. vertical-align:text-bottom; /*文字垂直向下對(duì)齊*/

十. CSS邊框空白

1. padding-top:10px; /*上邊框留空白*/

2. padding-right:10px; /*右邊框留空白*/

3. padding-bottom:10px; /*下邊框留空白*/

4. padding-left:10px; /*左邊框留空白

---

CSS 樣式表中的樣式覆蓋順序

有時(shí)候在寫(xiě) CSS 的過(guò)程中，某些限制總是不起作用，這就涉及了 CSS 樣式覆蓋的問(wèn)題，如下所示： 在一些教材中，只說(shuō) CSS 的順序是“元素上的 style” > “文件頭上的 style 元素” >“外部樣式文件”，但對(duì)于樣式文件中的多個(gè)相同樣式的優(yōu)先級(jí)怎樣排列，沒(méi)有詳細(xì)說(shuō)明。經(jīng)過(guò)測(cè)試和繼續(xù)搜索，得知優(yōu)先級(jí)如下排列：
 
1. 樣式表的元素選擇器選擇越精確，則其中的樣式優(yōu)先級(jí)越高：

id選擇器指定的樣式 > 類(lèi)選擇器指定的樣式 > 元素類(lèi)型選擇器指定的樣式
所以上例中，#navigator 的樣式優(yōu)先級(jí)大于.current_block 的優(yōu)先級(jí)，及時(shí) .current_block 是最新添加的，也不起作用。
 
2. 對(duì)于相同類(lèi)型選擇器制定的樣式，在樣式表文件中，越靠后的優(yōu)先級(jí)越高：

注意，這里是樣式表文件中越靠后的優(yōu)先級(jí)越高，而不是在元素 class 出現(xiàn)的順序。比如 .class2 在樣式表中出現(xiàn)在 .class1 之后：

而某個(gè)元素指定 class 時(shí)采用 class="class2 class1"這種方式指定，此時(shí)雖然class1在元素中指定時(shí)排在class2的后面，但因?yàn)樵跇邮奖砦募衏lass1處于class2前面，此時(shí)仍然是class2的優(yōu)先級(jí)更高，color的屬性為red，而非black。

 

3. 如果要讓某個(gè)樣式的優(yōu)先級(jí)變高，可以使用!important來(lái)指定：

這時(shí) class 將使用 black，而非 red。

 

對(duì)于一開(kāi)始遇到的問(wèn)題，有兩種解決方案：

1. 將 border 從 #navigator 中拿出來(lái)，放到一個(gè)class .block中，而.block放到.current_block之前：

 需要默認(rèn)為#navigator元素指定class="block"

2. 使用!important:

此時(shí)無(wú)需作任何其他改動(dòng)即可生效?？梢?jiàn)第二種方案更簡(jiǎn)單一些。 

大家都知道CSS的全稱(chēng)叫做“層疊樣式表”，但估計(jì)很多人都不知道“層疊”二字的含義。其實(shí)，“層疊”指的就是樣式的覆蓋，當(dāng)一個(gè)元素被運(yùn)用上多種樣式，并且出現(xiàn)重名的樣式屬性時(shí)，瀏覽器必須從中選擇一個(gè)屬性值，這個(gè)過(guò)程就叫“層疊”。樣式覆蓋（這種叫法更大眾化些）遵循一定的規(guī)則。

首先需要明確的是，很多情況都會(huì)導(dǎo)致一個(gè)元素被運(yùn)用上多種樣式，樣式覆蓋的規(guī)則也需要根據(jù)不同的情況來(lái)定，具體規(guī)則如下。

規(guī)則一：由于繼承而發(fā)生樣式?jīng)_突時(shí)，最近祖先獲勝。

CSS的繼承機(jī)制使得元素可以從包含它的祖先元素中繼承樣式，考慮下面這種情況：

strong分別從body和p中繼承了color屬性，但是由于p在繼承樹(shù)上離strong更近，因此strong中的文字最終繼承p的藍(lán)色。

規(guī)則二：繼承的樣式和直接指定的樣式?jīng)_突時(shí)，直接指定的樣式獲勝。

在上面的例子中，假如還指定了strong元素的樣式，如：

那么根據(jù)規(guī)則二，strong中的文字最終顯示為紅色。

規(guī)則三：直接指定的樣式發(fā)生沖突時(shí)，樣式權(quán)值高者獲勝。

樣式的權(quán)值取決于樣式的選擇器，權(quán)值定義如下表。