HTML標簽的默認樣式和CSS-reset

默認樣式表

此樣式表基于對當前UA實踐的廣泛研究,描述了所有HTML4元素的典型格式跷跪。鼓勵開發(fā)人員在其實現(xiàn)中將其用作默認樣式表。

以下樣式表供大家去查看:

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; unicode-bidi: embed }
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 }
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, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
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"; white-space: pre-line }
center          { text-align: center }
: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="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

CSS-Reset

reset 的目的膏萧,是將所有的瀏覽器的自帶樣式重置掉楣导,這樣更易于保持各瀏覽器渲染的一致性。

這里提供鏈接給小伙伴去了解各類人士的cssreset文帘腹,里面包含YUI等等——cssreset

國內(nèi)的大牛們也很多自己去制定屬于自己的CSS Rest贰盗。但是在玉伯寫完第一版之后,在總結文章的結尾還是千叮嚀阳欲,萬囑咐說:

請記锥嬗:永遠不存在萬能解決方案,永遠沒有銀彈球化。 因此我的建議和 Eric 是一樣的:請根據(jù)具體需求秽晚,適量裁剪和修改后再使用。

替代品 Normalize.css

reset 的目的筒愚,是將所有的瀏覽器的自帶樣式重置掉赴蝇,這樣更易于保持各瀏覽器渲染的一致性。

而normalize 的理念則是盡量保留瀏覽器的默認樣式巢掺,不進行太多的重置扯再。——normalize

優(yōu)勢對比

前面講到CSS Reset的核心作用就是清零址遇,而且過于暴力;那么作為后者Normalize.css斋竞,到底有什么優(yōu)勢可以完全取代前者呢倔约?

1.Normalize.css 保護了有價值的默認值
Reset通過為幾乎所有的元素施加默認樣式,強行使得元素有相同的視覺效果坝初。 相比之下浸剩,Normalize.css保持了許多默認的瀏覽器樣式钾军。 這就意味著你不用再為所有公共的排版元素重新設置樣式。 當一個元素在不同的瀏覽器中有不同的默認值時绢要,Normalize.css會力求讓這些樣式保持一致并盡可能與現(xiàn)代標準相符合吏恭。

2.Normalize.css 修復了瀏覽器的bug
它修復了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇重罪。 關于這一點樱哼,Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題剿配、在IE9中SVG的溢出搅幅、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關的bug。

3.Normalize.css 修復了瀏覽器的bug
使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈呼胚。在Normalize.css中就不會有這樣的問題茄唐,因為在我們的準則中對多選擇器的使用時非常謹慎的,我們僅會有目的地對目標元素設置樣式蝇更。

4.Normalize.css 是模塊化的
這個項目已經(jīng)被拆分為多個相關卻又獨立的部分沪编,這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分(比如表單的一般化)年扩。

5.Normalize.css 擁有詳細的文檔
Normalize.css的代碼基于詳細而全面的跨瀏覽器研究與測試蚁廓。這個文件中擁有詳細的代碼說明并在Github Wiki中有進一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作常遂、為什么要寫這句代碼纳令、瀏覽器之間的差異,并且你可以更容易地進行自己的測試克胳。

這個項目的目標是幫助人們了解瀏覽器默認是如何渲染元素的平绩,同時也讓人們很容易地明白如何改進瀏覽器渲染。

總結

還是要根據(jù)自身網(wǎng)站系統(tǒng)的情況來考慮之后漠另,自己去修改出一份最適合自己的css-reset捏雌。

最后還是引用張鑫旭的一句話來總結下:

最少的CSS代碼,最少的渲染笆搓,最少的重置就是最好的CSS樣式代碼性湿,這反應了您的CSS層次。說句不好聽的話满败,CSS reset是用來讓那些CSS菜鳥肤频,對CSS不太了解的人準備的。

參考地址

關于CSS Reset 那些事

CSS reset的重新審視

cssreset

Normalize.css

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末算墨,一起剝皮案震驚了整個濱河市宵荒,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖报咳,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件侠讯,死亡現(xiàn)場離奇詭異,居然都是意外死亡暑刃,警方通過查閱死者的電腦和手機厢漩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來岩臣,“玉大人溜嗜,你說我怎么就攤上這事⌒隽常” “怎么了粱胜?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長狐树。 經(jīng)常有香客問我焙压,道長,這世上最難降的妖魔是什么抑钟? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任涯曲,我火速辦了婚禮,結果婚禮上在塔,老公的妹妹穿的比我還像新娘幻件。我一直安慰自己,他們只是感情好蛔溃,可當我...
    茶點故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布绰沥。 她就那樣靜靜地躺著,像睡著了一般贺待。 火紅的嫁衣襯著肌膚如雪徽曲。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天麸塞,我揣著相機與錄音秃臣,去河邊找鬼。 笑死哪工,一個胖子當著我的面吹牛奥此,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播雁比,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼稚虎,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了偎捎?” 一聲冷哼從身側(cè)響起祥绞,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤非洲,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蜕径,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡败京,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年兜喻,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赡麦。...
    茶點故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡朴皆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出泛粹,到底是詐尸還是另有隱情遂铡,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布晶姊,位于F島的核電站扒接,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏们衙。R本人自食惡果不足惜钾怔,卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蒙挑。 院中可真熱鬧宗侦,春花似錦、人聲如沸忆蚀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽馋袜。三九已至男旗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間桃焕,已是汗流浹背剑肯。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留观堂,地道東北人让网。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像师痕,于是被迫代替她去往敵國和親溃睹。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,871評論 2 354

推薦閱讀更多精彩內(nèi)容