清除瀏覽器預設樣式的原因 一、 某些標簽的預設樣式不符合我們的設計要求。比如說a標簽,預設它是有一條下劃線,並且字體顏色也讓人覺得很難看,所以我們需要清除它預設的樣式,同時根據要求給它重新添加自定義樣式。如圖是a標簽的預設樣式。 二、各瀏覽器預設的樣式各不同,所以會影響到我們的開發,因為在每次開發之 ...
清除瀏覽器預設樣式的原因
一、 某些標簽的預設樣式不符合我們的設計要求。比如說a標簽,預設它是有一條下劃線,並且字體顏色也讓人覺得很難看,所以我們需要清除它預設的樣式,同時根據要求給它重新添加自定義樣式。如圖是a標簽的預設樣式。
二、各瀏覽器預設的樣式各不同,所以會影響到我們的開發,因為在每次開發之前應該先對瀏覽器的預設樣式進行一次清除,讓每個瀏覽器保持一致的初始化樣式。清除預設樣式可以提高代碼瀏覽器間的相容性,同一個標簽用在不同的瀏覽器中,預設樣式可能不一樣,比如說,行高在某個瀏覽器中是1,在另一個瀏覽器中可能是1.1,這樣在佈局的時候會得到兩種不同的效果,從而帶來相容性問題。因此,統一清除標簽的預設樣式,再統一重新添加新的樣式,就能避免這種問題。
1.頁邊距 IE預設為10px,通過body的margin屬性設置 FF預設為8px,通過body的padding屬性設置 要清除頁邊距一定要清除這兩個屬性值 body { margin:0; padding:0; } 2.段間距 IE預設為19px,通過p的margin-top屬性設置 FF預設為1.12em,通過p的margin-bottom屬性設 p預設為塊狀顯示,要清除段間距,一般可以設置 p { margin-top:0; margin-bottom:0; } 3.標題樣式 h1~h6預設加粗顯示:font-weight:bold;。 預設大小請參上表 還有是這樣的寫的 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;} 個大瀏覽器預設字體大小為16px,即等於medium,h1~h6元素預設以塊狀顯示字體顯示為粗體, 要清除標題樣式,一般可以設置 hx { font-weight:normal; font-size:value; } 4.列表樣式 IE預設為40px,通過ul、ol的margin屬性設置 FF預設為40px,通過ul、ol的padding屬性設置 dl無縮進,但起內部的說明元素dd預設縮進40px,而名稱元素dt沒有縮進。 要清除列表樣式,一般可以設置 ul, ol, dd { list-style-type:none;/*清楚列表樣式符*/ margin-left:0;/*清楚IE左縮進*/ padding-left:0;/*清楚非IE左縮進*/ } 5.元素居中 IE預設為text-align:center; FF預設為margin-left:auto;margin-right:auto; 6.超鏈接樣式 a 樣式預設帶有下劃線,顯示顏色為藍色,被訪問過的超鏈接變紫色,要清除鏈接樣式,一般可以設置 a { text-decoration:none; color:#colorname; } 7 滑鼠樣式 IE預設為cursor:hand; FF預設為cursor:pointer;。該聲明在IE中也有效 8 圖片鏈接樣式 IE預設為紫色2px的邊框線 FF預設為藍色2px的邊框線 要清除圖片鏈接樣式,一般可以設置 img { border:0;vertical-align:top }瀏覽器預設樣式
html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素預設狀態下一塊狀顯示,未顯示的將以內聯元素顯示,該列表針對HTML4版本,部分元素在XHTML1中將廢棄*/ li { display: list-item }/*預設以列表顯示*/ head { display: none }/*預設不顯示*/ table { display: table }/*預設為表格顯示*/ tr { display: table-row }/*預設為表格行顯示*/ thead { display: table-header-group }/*預設為表格頭部分組顯示*/ tbody { display: table-row-group }/*預設為表格行分組顯示*/ tfoot { display: table-footer-group }/*預設為表格底部分組顯示*/ col { display: table-column }/*預設為表格列顯示*/ colgroup { display: table-column-group }/*預設為表格列分組顯示*/ td, th { display: table-cell; }/*預設為單元格顯示*/ caption { display: table-caption }/*預設為表格標題顯示*/ th { font-weight: bolder; text-align: center }/*預設為表格標題顯示,呈現加粗居中狀態*/ caption { text-align: center }/*預設為表格標題顯示,呈現居中狀態*/ 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, dir, 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 { white-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元素預設為下標顯示*/ sup { vertical-align: super }/*定義sub元素預設為上標顯示*/ table { border-spacing: 2px; } thead, tbody, tfoot { vertical-align: middle }/*定義表頭、主體表、表腳元素預設為垂直對齊*/ td, th { vertical-align: inherit }/*定義單元格、列標題預設為垂直對齊預設為繼承*/ s, strike, del { text-decoration: line-through }/*定義這些元素預設為刪除線顯示*/ hr { border: 1px inset }/*定義分割線預設為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: 0; margin-bottom: 0 } u, ins { text-decoration: underline } br:before { content: ""A" }/*定義換行元素的偽對象內容樣式*/ :before, :after { white-space: pre-line }/*定義偽對象空格字元的預設樣式*/ center { text-align: center } abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em } :link, :visited { text-decoration: underline } :focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }/*定義BDO元素當其屬性為DIR="ltr"時的預設文本讀寫顯示順序*/ BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }/*定義BDO元素當其屬性為DIR="rtl"時的預設文本讀寫顯示順序*/ *[DIR="ltr"] { direction: ltr; unicode-bidi: embed }/*定義任何元素當其屬性為DIR="ltr"時的預設文本讀寫顯示順序*/ *[DIR="rtl"] { direction: rtl; unicode-bidi: embed }/*定義任何元素當其屬性為DIR="rtl"時的預設文本讀寫顯示順序*/ @media print { /*定義標題和列表預設的列印樣式*/ h1 { page-break-before: always } h1, h2, h3, h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid } }HTML預設樣式
reset.css,用於清除瀏覽器差異的預設樣式【結合我自己的備份和網上找的共三份,任選一份,我推薦第一份這是我自己日常在用的】
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } body { background:#fff; color:#555; font-size:14px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; } td,th,caption { font-size:14px; } h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;} a { text-decoration:none; } a:hover { text-decoration:none; } img { border:none; } ol,ul,li { list-style:none; } input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; } table { border-collapse:collapse; } html {overflow-y: scroll;} .clearfix::after {content: "."; display: block; height:0; clear:both; visibility: hidden;} .clearfix { *zoom:1; }reset.css-1
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;font-weight:normal;} html,body,fieldset,img,iframe,abbr{border:0;} i,cite,em,var,address,dfn{font-style:normal;} [hidefocus],summary{outline:0;} li{list-style:none;} h1,h2,h3,h4,h5,h6,small{font-size:100%;} sup,sub{font-size:83%;} pre,code,kbd,samp{font-family:inherit;} q:before,q:after{content:none;} textarea{overflow:auto;resize:none;} label,summary{cursor:default;} a,button{cursor:pointer;} h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;} del,ins,u,s,a,a:hover{text-decoration:none;} body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;} body{background:#fff;} a,a:hover{color:#333;}reset.css-2
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }reset.css-3