css之关于user agent stylesheet

柔光的暖阳◎ 2021-07-05 01:54 316阅读 0赞

## 1.什么是`user agent stylesheet`? ##

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

不同的浏览器把实现这些`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 }
    
    /* 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 }
    }

当然,浏览器的`User Agent Stylesheet`的优先级是很低的，经常被其他样式覆盖，这也是设置了`CSS`样式文件后能够起作用的原因。`user agent stylesheet`是浏览器的一些默认样式。如果对这个默认样式不满意最简单的解决办法就是重新设置该样式的属性，因为`user agent stylesheet`优先级很低，会被覆盖，这样就不会影响到我们的样式了.