用戶代理樣式表(瀏覽器樣式)

1、瀏覽器默認(rèn)的樣式各種 HTML 標(biāo)簽： h1-h6,p,ul,ol,dl, 即使沒有給他們定義樣式屬性值，他們在瀏覽器中顯示時(shí)，也 會(huì)具有各種樣式屬性 (主要是字體大小和各種間距 )。這是因?yàn)闉g覽器和 CSS 給這些標(biāo)簽設(shè)置了默認(rèn)的 樣式屬性值，各種版本的瀏覽器和CSS可能略有差別，下面列舉的是Firefox 1.5和CSS 2.1(IE)設(shè)置的 一些常見標(biāo)簽的默認(rèn)樣式屬性值。HTML 樣式html, address,blockquote,bod,ydd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, nof

2、rames,ol, p, ul, center,dir, hr, menu, pre display: block /*以上列表元素默認(rèn)狀態(tài)下一塊狀顯示，未顯示的將以內(nèi)聯(lián)元素顯示， 該列表針對(duì) HTML4 版本，部分元素在 XHTML1 中將廢棄 */li display: list-item /* 默認(rèn)以列表顯示 */head display: none /*默認(rèn)不顯示 */table display: table /* 默認(rèn)為表格顯示 */tr display: table-row /* 默認(rèn)為表格行顯示 */thead display: table-header-group /*默認(rèn)為表

3、格頭部分組顯示 */tbody display: table-row-group /* 默認(rèn)為表格行分組顯示 */tfoot display: table-footer-group /* 默認(rèn)為表格底部分組顯示 */col display: table-column /* 默認(rèn)為表格列顯示 */colgroup display: table-column-group /* 默認(rèn)為表格列分組顯示 */td, th display: table-cell; /* 默認(rèn)為單元格顯示 */caption display: table-caption /* 默認(rèn)為表格標(biāo)題顯示 */th font-wei

4、ght: bolder; text-align: center /* 默認(rèn)為表格標(biāo)題顯示，呈現(xiàn)加粗居中狀態(tài) */caption text-align: center /* 默認(rèn)為表格標(biāo)題顯示，呈現(xiàn)居中狀態(tài) */body margin: 8px; line-height: 1.12 h1 font-size: 2em; margin: .67em 0 h2 font-size: 1.5em; margin: .75em 0 h3 font-size: 1.17em; margin: .83em 0 h4, p, blockquote, ul, fieldset, form, ol, dl, di

5、r, menu margin: 1.12em 0 h5 font-size: .83em; margin: 1.5em 0 h6 font-size: .75em; margin: 1.67em 0 h1, h2, h3, h4, h5, h6, b,strong font-weight: bolder blockquote margin-left: 40px; margin-right: 40px i, cite, em,var, address font-style: italic pre, tt, code, kbd, samp font-family: monospace pre wh

6、ite-space: pre button, textarea, input, object, select display:inline-block; big font-size: 1.17em small, sub, sup font-size: .83em sub vertical-align: sub /* 定義 sub 元素默認(rèn)為下標(biāo)顯示 */sup vertical-align: super /* 定義 sub 元素默認(rèn)為上標(biāo)顯示 */table border-spacing: 2px; thead, tbody, tfoot vertical-align: middle /* 定

7、義表頭、主體表、表腳元素默認(rèn)為垂直對(duì)齊 */td, th vertical-align: inherit /* 定義單元格、列標(biāo)題默認(rèn)為垂直對(duì)齊默認(rèn)為繼承 */s, strike, del text-decoration: line-through /* 定義這些元素默認(rèn)為刪除線顯示 */hr border: 1px inset /* 定義分割線默認(rèn)為 1px 寬的 3D 凹邊效果 */ol, ul, dir, menu, dd margin-left: 40px ol list-style-type: decimal ol ul, ul ol, ul ul, ol ol margin-top

8、: 0; margin-bottom: 0 u, ins text-decoration: underline br:before content: "A" /* 定義換行元素的偽對(duì)象內(nèi)容樣式 */:before, :after white-space: pre-line /* 定義偽對(duì)象空格字符的默認(rèn)樣式 */center text-align: center abbr, acronym font-variant: small-caps; letter-spacing: 0.1em :link, :visited text-decoration: underline :f

9、ocus outline: thin dotted invert /* Begin bidirectionality settings (do not change) */BDODIR="ltr" direction: ltr; unicode-bidi: bidi-override /* 定義 BDO 元素當(dāng)其屬性為 DIR="ltr" 時(shí)的默認(rèn)文本讀寫顯示順序 */BDODIR="rtl" direction: rtl; unicode-bidi: bidi-override /* 定義 BDO 元素當(dāng)其屬性為 DIR="

10、;rtl" 時(shí)的默 認(rèn)文本讀寫顯示順序 */*DIR="ltr" direction: ltr; unicode-bidi: embed /* 定義任何元素當(dāng)其屬性為 DIR="ltr" 時(shí)的默認(rèn)文本讀 寫顯示順序 */*DIR="rtl" direction: rtl; unicode-bidi: embed /* 定義任何元素當(dāng)其屬性為 DIR="rtl" 時(shí)的默認(rèn)文本讀 寫顯示順序 */media print /* 定義標(biāo)題和列表默認(rèn)的打印樣式 */h1 page-break-before: alw

11、ays h1, h2, h3, h4, h5, h6 page-break-after: avoid ul, ol, dl page-break-before: avoid 瀏覽器默認(rèn)樣式1. 頁邊距IE默認(rèn)為10px，通過body的margin屬性設(shè)置FF默認(rèn)為8px，通過body的padding屬性設(shè)置要清除頁邊距一定要清除這兩個(gè)屬性值body margin:0;padding:0;2. 段間距IE默認(rèn)為19px，通過p的margin-top屬性設(shè)置FF默認(rèn)為1.12em,通過p的margin-bottom屬性設(shè)p 默認(rèn)為塊狀顯示，要清除段間距，一般可以設(shè)置p margin-top:0;

12、margin-bottom:0;3. 標(biāo)題樣式h1h6 默認(rèn)加粗顯示： font-weight:bold; 。默認(rèn)大小請參上表還有是這樣的寫的h1 font-size:xx-large;h2 font-size:x-large;h3 font-size:large;h4 font-size:medium;h5 font-size:small;h6 font-size:x-small;個(gè)大瀏覽器默認(rèn)字體大小為16px,即等于medium, h1h6元素默認(rèn)以塊狀顯示字體顯示為粗體，要清 除標(biāo)題樣式，一般可以設(shè)置hx font-weight:normal;font-size:value;4. 列表

13、樣式IE默認(rèn)為40px，通過ul、ol的margin屬性設(shè)置FF默認(rèn)為40px，通過ul、ol的padding屬性設(shè)置dl無縮進(jìn)，但起內(nèi)部的說明元素 dd默認(rèn)縮進(jìn)40px，而名稱元素dt沒有縮進(jìn)。 要清除列表樣式，一般可以設(shè)置ul, ol, dd list-style-type:none;/*清楚列表樣式符 */margin-left:0;/*清楚 IE 左縮進(jìn) */padding-left:0;/*清楚非 IE 左縮進(jìn) */5. 元素居中IE 默認(rèn)為 text-align:center;FF 默認(rèn)為 margin-left:auto;margin-right:auto;6. 超鏈接樣式a 樣

14、式默認(rèn)帶有下劃線，顯示顏色為藍(lán)色，被訪問過的超鏈接變紫色，要清除鏈接樣式， 置a text-decoration:none; color:#colorname;7 鼠標(biāo)樣式IE 默認(rèn)為 cursor:hand;FF默認(rèn)為cursor:pointer。該聲明在IE中也有效8圖片鏈接樣式IE 默認(rèn)為紫色 2px 的邊框線FF 默認(rèn)為藍(lán)色 2px 的邊框線 要清除圖片鏈接樣式，一般可以設(shè)置 img border:0;em相對(duì)長度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。 如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。ex相對(duì)長度單位。相對(duì)于字符“ x”的高度。此高度通常為字體尺寸

15、的一半。 如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。px像素（Pixel）。相對(duì)長度單位。像素是相對(duì)于顯示器屏幕分辨率而言的。譬如， WONDOWS 的用戶所使用的分辨率 寸。而 MAC 的用戶所使用的分辨率一般是 72 像素/英寸。般可以設(shè)般是 96像素/英pt 點(diǎn)（Point）。絕對(duì)長度單位。em vs pxem指字體高，任意瀏覽器的默認(rèn)字體高都是 16px。所以未經(jīng)調(diào)整的瀏覽器都符合：1em=16px。那么 12px=0.75em, 10px=0.625em。 為 了簡 化 font-size 的換 算，需 要在 css 中的 body 選擇器 中 聲明 Fo

16、nt-size=62.5% 這就使 em 值變?yōu)?16px*62.5%=10px,這樣 12px=1.2em, 10px=1em,也就是說只需要 將你的原來的px數(shù)值除以10,然后換上em作為單位就行了。em 有如下特點(diǎn)：1. em的值并不是固定的；2. em會(huì)繼承父級(jí)元素的字體大小。長度單位優(yōu)化方法：1. body 選擇器中聲明 Font-size=62.5%；2. 將你的原來的px數(shù)值除以10，然后換上em作為單位；簡單吧，如果只需要以上兩步就能解決問題的話，可能就沒人用px 了。經(jīng)過以上兩步，你會(huì)發(fā)現(xiàn)你的網(wǎng)站字體大得出乎想象。因?yàn)閑m的值不固定，又會(huì)繼承父級(jí)元素的大小，你可能會(huì)在content這個(gè)div 里把字體大小設(shè)為1.2em,也就是12px。然后你又把選擇器p的字體大小也設(shè)為1.2em,但如果p屬于 content的子級(jí)的話，p的字體大小就不是12px，而是1.2em=1.2 * 12px=14.4px。這是因?yàn)閏ontent的字 體大小被設(shè)為1.2em，這個(gè)em值繼承其父級(jí)元素body的大小，也就是16px * 62.5% * 1.2=12px,而p 作為其子級(jí)，em則繼承content的字體高，也就是12px。所以p的1.2em就不再是12px