浏览器的User Agent Stylesheet

大家通常看到一个没有带任何CSS样式文件的HTML却带有不错的样式，这是由于在W3C的HTML标准里，一些HTML标签自带一些CSS样式。  

不同的浏览器把实现这些HTML自带样式的模块称作User Agent Stylesheet。  
不同的浏览器实现的User Agent Stylesheet不一，但大部分都能遵循W3C的标准。  
个人认为chrome实现的User Agent Stylesheet是最符合人们阅读习惯，例如p前后都有1em的外边距等。  

在chrome里的User Agent Stylesheet如下图所示。  
 

从上图中还可以看出浏览器的User Agent Stylesheet的优先级是很低的，经常被其他样式覆盖，这也是设置了CSS样式文件后能够起作用的原因。  

从CSS的英文全称 Cascading Style Sheet，中文译作“层叠样式表单”， 其中cascading取义为层叠，即不同层级的样式表单叠加覆盖的意思。  

其实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 }  

/* 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 }  
}