W3C 規定~ 全部 HTML 標籤的 CSS 屬性預設值

所有 HTML 標籤在 CSS 中的預設值

每個 HTML 標籤在 CSS 中都有不同的預設值,例如預設的文字大小、預設的間距、預設的框格模型….等。

例如 <h1> 的文字大小 預設值是 2em ,<h2> 的文字大小 預設值是 1.5em,<body> 的外間距是 8px ….等。

當我們在寫 CSS 的時候,必須要先了解這些預設值的存在,才能夠明確的掌控網頁該如何調整排版。不過,大部份的人,會使用另一種方法,就是先把這些預設值歸 0 ,然後再重新寫上需要的 CSS 屬性,這一招是目前大家認為比較好的解決方案。

CSS 教學 - 網頁排版  - W3C 規定~  全部 HTML 標籤的 CSS 屬性預設值 - fly015

以下,就是 W3C  所有規定的 HTML 標籤在 CSS 中的預設值

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 }
 
 
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 { 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" }
 
:before, :after { 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 }
 
}

 

「W3C原文」 Default style sheet for HTML 4

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

關於「姜智豪 老師」

於 1996 年開始從事網頁設計工作 20 多年,參與設計過許多網站專案的開發,一直熱衷網頁設計工作至今。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 Photoashop、 HTML、CSS、RWD、JavaScript、jQuery 等網頁技術,對於 SEO 優化搜尋引擎排名提昇,以及 Instructional Design 教學專案設計亦有深入的研究。
posted in CSS 教學 - 網頁排版 and tagged , , , , .

留言功能已關閉。