當前位置: 網站建設 > 網頁設計 > 建站經驗 >

CSS樣式表教程之瀏覽器默認樣式

時間:2013-03-02 03:46來源:未知 作者:admin 點擊:

標簽:CSS樣式表教程之瀏覽器默認樣式 CSS(655)瀏覽器(54)Interne(1)這段(1)樣式(83)代碼(82)教程(56)默認(15)
這段代碼在Internet Explorer中使用的字體是Times New Roman,而在Firefox和Opera中使用的是體系默認字體。因此我們要為<h1>在CSS中設定一個同一的樣式。 reset.css是每個頁面都必需的款式文件(或者你已經把它內置到相干的CSS文件中了), CSS樣式表在網頁
CSS樣式表教程之瀏覽器默認樣式》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334142013.htm

這段代碼在Internet Explorer中使用的字體是Times New Roman,而在Firefox和Opera中使用的是體系默認字體。因此我們要為<h1>在CSS中設定一個同一的樣式。

reset.css是每個頁面都必需的款式文件(或者你已經把它內置到相干的CSS文件中了),CSS樣式表在網頁設計中的特性,是咱們實現跨閱讀器設計的不可缺乏的一環。

不外當初說的可不僅是這些,CSS樣式表在網頁設計中的4個特性。基礎上,不同內核的兩個瀏覽器在某些元素的表現都會存在差異,比如縮進的大小、字體取舍、字符樣式等。興許一個很美麗的CSS樣式表在一個瀏覽器上表現良好,在另外一個瀏覽器上即便是不CSS Bug的情形也會變得構造凌亂起來,我都是瀏覽器默認樣式在作祟。

至于哪些元素應該被重設?Yahoo!已經為我們做了比擬出的總結。依據雅虎的倡議,你須要把這些規則放到一個名為Reset.css的文件中獨自援用(推舉這種做法):

--> [網站建設之]CSS樣式表教程之瀏覽器默認樣式

html, body, div, span, applet,CSS樣式如何實現Logo立體盒子效果, object, iframe,
h1,css樣式名規范命名建議, h2, h3, h4, h5, h6, p, blockquote, pre,CSS樣式書寫之選擇器詳解,
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: "" "";
}

因而,我們在天生CSS樣式規矩的時候,一個必做的步驟就是重設瀏覽器的默認樣式,也就是籠罩掉瀏覽器的默認樣式。和使用 * {padding:0;margin:0}有所不同,并不是所有的元素都存在padding和margin的差別(元素列表、有序列表在Internet Xplorer和Firefox中的不同是因為它們的縮進采取了margin縮進和padding縮進)。例如下面這段代碼:

和Yahoo!一樣,Eric Meyer在他的網站也給出了一個新的寫法:

html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,CSS樣式 background-position說明,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;
}
你要做的就是把這些規則簡單地保留到reset.css中,而后在頁面中使用。在需要給這些元素增添新的樣式的時候,和其它元素的設定沒有什么不同。

然而,假如我們像應用* {padding:0;margin:0}一樣去使用通配符“*”來簡略地設定全局樣式,那么一個很顯明的問題就會呈現,比方像form元素、input元素、textarea等在某些瀏覽器中會疏忽對它們的從新設定,CSS權重的問題 選擇器權重值的計算,更主要的是這將會重大損壞這些元素的外觀,所以你又不得不去手動去逐一為它們重新設定一個padding值跟margin值。所以我們應當廢棄簡單地使用“*&rdquo,CSS有趣實例 讓整個網頁翻轉效果;,而是為第一個存在表示不一致的元素進行重設,如body,CSS有趣代碼 遠離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 的問題(我研究之后也想簡單寫一下),值得研討(查看原文:Reset Reloaded)。實在這兩個reset.css差異并不大,能夠抉擇其中之一或者合并使用。

留神:上面reset.css中 input,textarea,select{*font-size:100%;} 只有Internet Explorer可以意識,這樣的設定是為了使在Internet Explorer中可以縮放表單控件字體的大小。而 legend{color:#000;} 是由于在Internet Explorer中lengend元素使用字體色彩和系統有關(甚至和系統作風有關)。這里還要指出的是,html{color:#000;background:#FFF;} 這條規則雖是細節,卻很重要,因為在某些時候他直接影響了頁面的整體外觀,百度就存在這樣的設計失誤(雅虎沒仿佛也沒有給這一條,但是在某個示例中好像涌現了)。

同時,元素的默認樣式可能會破壞頁面的外觀。好比<b>元素會把文字加粗,<blockquote>會大段縮進,<em>會使文字傾斜等,如果你想請求頁面文本外觀一致的話,也應該在CSS中把這些元素的外觀進行重設。同時,有時候我們要求這些元素的外觀和父元素一樣,可以直接使用 inherit從父元素繼續即可。

Tag:樣式   默認   瀏覽器   教程    

不同瀏覽器對雷同元素的默認樣式并不一致,這也是為什么我們在CSS的最開端要寫 * {padding:0;marging:0};

 


(責任編輯:網站建設)
CSS樣式表教程之瀏覽器默認樣式相關文章
上一篇:CSS樣式表在網頁設計中的特性 下一篇:CSS樣式表注釋書寫規范
回到頂部