大家通常看到一个没有带任何CSS样式文件的HTML却带有不错的样式,这是由于在W3C的HTML标准里,一些HTML标签自带一些CSS样式。
不同的浏览器把实现这些HTML自带样式的模块称作User Agent Stylesheet。
不同的浏览器实现的User Agent Stylesheet不一,但大部分都能遵循W3C的标准。
个人认为chrome实现的User Agent Stylesheet是最符合人们阅读习惯,例如p前后都有1em的外边距等。
不同的浏览器把实现这些HTML自带样式的模块称作User Agent Stylesheet。
不同的浏览器实现的User Agent Stylesheet不一,但大部分都能遵循W3C的标准。
个人认为chrome实现的User Agent Stylesheet是最符合人们阅读习惯,例如p前后都有1em的外边距等。
其实W3C的CSS标准中有一套完整的CSS样式的优先级规则,高优先级的样式覆盖低优先级,后面将逐步剖析这些优先级的规则,讲解怎样能做出高效能的CSS样式表
。
下面是 HTML4.0.1的W3C标准中默认的CSS样式 (来源于: http://www.w3.org/TR/CSS21/sample.html ):
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 }
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 }
}
下面是 HTML4.0.1的W3C标准中默认的CSS样式 (来源于: http://www.w3.org/TR/CSS21/sample.html ):
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
li
head
table
tr
thead
tbody
tfoot
col
colgroup
td, th
caption
th
caption
body
h1
h2
h3
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu
h5
h6
h1, h2, h3, h4,
h5, h6, b,
strong
blockquote
i, cite, em,
var, address
pre, tt, code,
kbd, samp
pre
button, textarea,
input, select
big
small, sub, sup { font-size: .83em }
sub
sup
table
thead, tbody,
tfoot
td, th, tr
s, strike, del
hr
ol, ul, dir,
menu, dd
ol
ol ul, ul ol,
ul ul, ol ol
u, ins
br:before
center
:link, :visited { text-decoration: underline }
:focus
BDO[DIR="ltr"]
BDO[DIR="rtl"]
*[DIR="ltr"]
*[DIR="rtl"]
@media print {
}
扩展:
1、<ul>默认的list-style-type: disc;
2、li {
display: list-item;
text-align: -webkit-match-parent;
}
3、ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}