《
CSS樣式表教程之瀏覽器默認(rèn)樣式》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334142013.htm
這段代碼在Internet Explorer中使用的字體是Times New Roman,而在Firefox和Opera中使用的是體系默認(rèn)字體。因此我們要為<h1>在CSS中設(shè)定一個(gè)同一的樣式。
reset.css是每個(gè)頁(yè)面都必需的款式文件(或者你已經(jīng)把它內(nèi)置到相干的CSS文件中了),CSS樣式表在網(wǎng)頁(yè)設(shè)計(jì)中的特性,是咱們實(shí)現(xiàn)跨閱讀器設(shè)計(jì)的不可缺乏的一環(huán)。
不外當(dāng)初說(shuō)的可不僅是這些,CSS樣式表在網(wǎng)頁(yè)設(shè)計(jì)中的4個(gè)特性;A(chǔ)上,不同內(nèi)核的兩個(gè)瀏覽器在某些元素的表現(xiàn)都會(huì)存在差異,比如縮進(jìn)的大小、字體取舍、字符樣式等。興許一個(gè)很美麗的CSS樣式表在一個(gè)瀏覽器上表現(xiàn)良好,在另外一個(gè)瀏覽器上即便是不CSS Bug的情形也會(huì)變得構(gòu)造凌亂起來(lái),我都是瀏覽器默認(rèn)樣式在作祟。
至于哪些元素應(yīng)該被重設(shè)?Yahoo!已經(jīng)為我們做了比擬出的總結(jié)。依據(jù)雅虎的倡議,你須要把這些規(guī)則放到一個(gè)名為Reset.css的文件中獨(dú)自援用(推舉這種做法):
--> [
網(wǎng)站建設(shè)之]CSS樣式表教程之瀏覽器默認(rèn)樣式
html, body, div, span, applet,CSS樣式如何實(shí)現(xiàn)Logo立體盒子效果, object, iframe,
h1,css樣式名規(guī)范命名建議, h2, h3, h4, h5, h6, p, blockquote, pre,CSS樣式書(shū)寫(xiě)之選擇器詳解,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
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,CSS樣式中的圖片Referer差異判斷;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
因而,我們?cè)谔焐鶦SS樣式規(guī)矩的時(shí)候,一個(gè)必做的步驟就是重設(shè)瀏覽器的默認(rèn)樣式,也就是籠罩掉瀏覽器的默認(rèn)樣式。和使用 * {padding:0;margin:0}有所不同,并不是所有的元素都存在padding和margin的差別(元素列表、有序列表在Internet Xplorer和Firefox中的不同是因?yàn)樗鼈兊目s進(jìn)采取了margin縮進(jìn)和padding縮進(jìn))。例如下面這段代碼:
和Yahoo!一樣,Eric Meyer在他的網(wǎng)站也給出了一個(gè)新的寫(xiě)法:
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,CSS樣式 background-position說(shuō)明,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;
}
你要做的就是把這些規(guī)則簡(jiǎn)單地保留到reset.css中,而后在頁(yè)面中使用。在需要給這些元素增添新的樣式的時(shí)候,和其它元素的設(shè)定沒(méi)有什么不同。
然而,假如我們像應(yīng)用* {padding:0;margin:0}一樣去使用通配符“*”來(lái)簡(jiǎn)略地設(shè)定全局樣式,那么一個(gè)很顯明的問(wèn)題就會(huì)呈現(xiàn),比方像form元素、input元素、textarea等在某些瀏覽器中會(huì)疏忽對(duì)它們的從新設(shè)定,CSS權(quán)重的問(wèn)題 選擇器權(quán)重值的計(jì)算,更主要的是這將會(huì)重大損壞這些元素的外觀,所以你又不得不去手動(dòng)去逐一為它們重新設(shè)定一個(gè)padding值跟margin值。所以我們應(yīng)當(dāng)廢棄簡(jiǎn)單地使用“*&rdquo,CSS有趣實(shí)例 讓整個(gè)網(wǎng)頁(yè)翻轉(zhuǎn)效果;,而是為第一個(gè)存在表示不一致的元素進(jìn)行重設(shè),如body,CSS有趣代碼 遠(yuǎn)離IE6毀滅IE6抵制IE6,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre等等。
<h1> Headlines are very important Elements in XHTML</h1>
在文中他還提到了 Internet Explorer 中解決 inherit 的問(wèn)題(我研究之后也想簡(jiǎn)單寫(xiě)一下),值得研討(查看原文:Reset Reloaded)。實(shí)在這兩個(gè)reset.css差異并不大,能夠抉擇其中之一或者合并使用。
留神:上面reset.css中 input,textarea,select{*font-size:100%;} 只有Internet Explorer可以意識(shí),這樣的設(shè)定是為了使在Internet Explorer中可以縮放表單控件字體的大小。而 legend{color:#000;} 是由于在Internet Explorer中l(wèi)engend元素使用字體色彩和系統(tǒng)有關(guān)(甚至和系統(tǒng)作風(fēng)有關(guān))。這里還要指出的是,html{color:#000;background:#FFF;} 這條規(guī)則雖是細(xì)節(jié),卻很重要,因?yàn)樵谀承⿻r(shí)候他直接影響了頁(yè)面的整體外觀,百度就存在這樣的設(shè)計(jì)失誤(雅虎沒(méi)仿佛也沒(méi)有給這一條,但是在某個(gè)示例中好像涌現(xiàn)了)。
同時(shí),元素的默認(rèn)樣式可能會(huì)破壞頁(yè)面的外觀。好比<b>元素會(huì)把文字加粗,<blockquote>會(huì)大段縮進(jìn),<em>會(huì)使文字傾斜等,如果你想請(qǐng)求頁(yè)面文本外觀一致的話,也應(yīng)該在CSS中把這些元素的外觀進(jìn)行重設(shè)。同時(shí),有時(shí)候我們要求這些元素的外觀和父元素一樣,可以直接使用 inherit從父元素繼續(xù)即可。
Tag:樣式 默認(rèn) 瀏覽器 教程
不同瀏覽器對(duì)雷同元素的默認(rèn)樣式并不一致,這也是為什么我們?cè)贑SS的最開(kāi)端要寫(xiě) * {padding:0;marging:0};
(責(zé)任編輯:網(wǎng)站建設(shè))
CSS樣式表教程之瀏覽器默認(rèn)樣式相關(guān)文章