HTML标签的默认样式和CSS-reset

作者: 古朋 | 来源:发表于2017-04-22 23:25 被阅读0次

    默认样式表

    此样式表基于对当前UA实践的广泛研究,描述了所有HTML4元素的典型格式。鼓励开发人员在其实现中将其用作默认样式表。

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

    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

    国内的大牛们也很多自己去制定属于自己的CSS Rest。但是在玉伯写完第一版之后,在总结文章的结尾还是千叮咛,万嘱咐说:

    请记住:永远不存在万能解决方案,永远没有银弹。 因此我的建议和 Eric 是一样的:请根据具体需求,适量裁剪和修改后再使用。

    替代品 Normalize.css

    reset 的目的,是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性。

    而normalize 的理念则是尽量保留浏览器的默认样式,不进行太多的重置。——normalize

    优势对比

    前面讲到CSS Reset的核心作用就是清零,而且过于暴力;那么作为后者Normalize.css,到底有什么优势可以完全取代前者呢?

    1.Normalize.css 保护了有价值的默认值
    Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。 相比之下,Normalize.css保持了许多默认的浏览器样式。 这就意味着你不用再为所有公共的排版元素重新设置样式。 当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

    2.Normalize.css 修复了浏览器的bug
    它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。 关于这一点,Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

    3.Normalize.css 修复了浏览器的bug
    使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在Normalize.css中就不会有这样的问题,因为在我们的准则中对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。

    4.Normalize.css 是模块化的
    这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。

    5.Normalize.css 拥有详细的文档
    Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。

    这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的,同时也让人们很容易地明白如何改进浏览器渲染。

    总结

    还是要根据自身网站系统的情况来考虑之后,自己去修改出一份最适合自己的css-reset。

    最后还是引用张鑫旭的一句话来总结下:

    最少的CSS代码,最少的渲染,最少的重置就是最好的CSS样式代码,这反应了您的CSS层次。说句不好听的话,CSS reset是用来让那些CSS菜鸟,对CSS不太了解的人准备的。

    参考地址

    关于CSS Reset 那些事

    CSS reset的重新审视

    cssreset

    Normalize.css

    相关文章

      网友评论

        本文标题:HTML标签的默认样式和CSS-reset

        本文链接:https://www.haomeiwen.com/subject/fedezttx.html