- 相關(guān)推薦
CSS教程之重置默認(rèn)樣式與IE兼容圓角的解決方法
小編這里有一篇總結(jié)css reset以及IE兼容css教程3圓角的htc解決方法 ，屬于比較全面的文章，希望能對(duì)大家有所幫助。
重置默認(rèn)樣式
最近看到一個(gè)詞叫css reset。什么叫做css reset呢?我理解為重置css，也就是重置默認(rèn)樣式。我在中講到，一些標(biāo)簽元素在HTML下有一個(gè)默認(rèn)屬性值，我們?cè)趯慶ss頁(yè)面的時(shí)候，為了避免在css中重復(fù)定義它們，我們需要重置默認(rèn)樣式(css reset)。每個(gè)人的用法和寫法都不一樣。找到一篇關(guān)于 可以看看國(guó)外使用css reset的比例調(diào)查。
接下來(lái)我也查看了國(guó)內(nèi)的兩個(gè)網(wǎng)站，用Firebug按F12看看他們的css reset怎么寫的?
淘寶()：
html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:"";
}
百度有啊()：(架構(gòu)基本上是模仿YUI來(lái)做的)
body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}
在《超越css》一書(shū)中建議我們做網(wǎng)站開(kāi)始重置所有默認(rèn)樣式：
/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0}
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}
/* Removes list-style from lists */
ol,ul { list-style:none }
/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }
/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }
/* Removes border from fieldset and img */
fieldset,img { border:0 }
/* Left-aligns text in caption and th */
caption,th { text-align:left }
/* Removes quotation marks from q */
q:before,q:after { content:''}
那我們實(shí)際寫代碼的時(shí)候該怎么來(lái)css reset呢?
我個(gè)人推薦使用(和)的 css reset
Eric Meyer's Reset:
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
YUI:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
結(jié)合他們的css reset寫法，再根據(jù)自己的實(shí)際情況，一定能寫出符合自己網(wǎng)站的完美的css reset。
IE兼容css教程3圓角的htc解決方法
現(xiàn)在css3的border-radius屬性可以很方便的實(shí)現(xiàn)圓角功能，對(duì)網(wǎng)站前臺(tái)人員無(wú)疑是一件喜事，但悲劇的是IE6/7/8并不支持，讓我們棄新技術(shù)不用，是不可能的，因此找到了一種解決的辦法--- IE利用VML矢量可標(biāo)記語(yǔ)言作為畫筆繪出圓角：
下載一個(gè)壓縮包ie-css3.htc，里面有一個(gè)微軟的腳本文件(11KB)和一個(gè)用來(lái)測(cè)試服務(wù)器是否有正確的Content-Type的 HTML文件，.htc 文件是IE內(nèi)核支持Web行為后用來(lái)描述此類行為的腳本文件。它們定義了一套方法和屬性，程序員幾乎可以把這些方法和屬性應(yīng)用到HTML頁(yè)面上的任何元素 上去。Web 行為是非常偉大的因?yàn)樗鼈冊(cè)试S程序員把自定義的功能“連接”到現(xiàn)有的元素和控件，而不是必須讓用戶下載二進(jìn)制文件(例如ActiveX 控件)來(lái)完成這個(gè)功能。
使用演示：
1. .main{
2. border: 2px solid #C0C0C0;
3. -moz-border-radius: 10px;
4. -webkit-border-radius: 10px;
5. border-radius: 10px;
6. position:relative;
7. z-index:100;
8. behavior: url(此處為ie-css3.htc文件的絕對(duì)路徑);
9. }
Webkit內(nèi)核的瀏覽器支持“-webkit-border-radius: 10px;”屬性(10px是圓角半徑)，可以直接解析出圓角;Firefox瀏覽器支持“-moz-border-radius: 10px;”屬性，也是可以直接解析出圓角;IE系瀏覽器則需要加上“border-radius: 15px;”的屬性。注意：
1、behavior的url里一定要填寫ie-css3.htc的絕對(duì)路徑，因?yàn)?IE瀏覽器找該文件是相對(duì)當(dāng)前html文件路徑來(lái)找的，所以對(duì)于Wordpress等動(dòng)態(tài)程序生成的頁(yè)面一定要填寫絕對(duì)路徑。
2、一定要有定位屬性：position:relative;
3、因?yàn)樵贗E瀏覽器下這些CSS3效果的實(shí)現(xiàn)是要借助于VML，由VML繪制圓角或是投影效果，所以還需要一個(gè)z-index屬性。z-index屬性最好設(shè)置得比較大，如2。
4、如果在IE瀏覽器下某些模塊無(wú)法用此渲染，可以試著絕對(duì)定位相應(yīng)的層，即加上“ width: 400px; height:400px;”屬性。
5、radius屬性的10px是圓角半徑，還可以給兩個(gè)值如“border-radius: 10px 5px;”，這樣則左上角與右下角半徑為10px，右上角與左下角半徑為5px。也可以賦4個(gè)值，為“上 右 下 左”。
【CSS教程之重置默認(rèn)樣式與IE兼容圓角的解決方法】相關(guān)文章：
CSS教程之盒模型04-01
2017最新css樣式大全03-11
CSS基礎(chǔ)教程之背景圖片04-01
CSS-層疊樣式表基礎(chǔ)教程03-05
AutoCAD版本及打印樣式不兼容怎么辦03-20
IE瀏覽器默認(rèn)HTML編輯器的設(shè)置方法03-29
CAD中圓角及倒角的技巧03-31
CSS入門教程01-25