zoukankan      html  css  js  c++  java
  • 浏览器默认HTML的CSS样式属性

      这个“浏览器默认HTML的CSS样式属性”,在你需要还原默认值的时候,比较有用。开始的时候应用通配选择器 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了。

      以前一直在找这份文档,今天偶然在w3上看到了。除了inline和block的定义,主要是要注意body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式(margin和font-size)。

    代码
    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; line-height: 1.12 }
    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, object,
    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 }
    abbr, acronym
    { font-variant: small-caps; letter-spacing: 0.1em }
    :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 }
  • 相关阅读:
    数据结构-第5章学习小结
    数据结构-第4章学习小结
    数据结构-第3章学习小结
    数据结构-第2章学习小结
    数据结构-第1章学习小结
    实验五 单元测试
    实验四 代码评审
    实验三 UML建模工具的安装和使用
    实验二 结对编程 (第二阶段)
    结对编程实验 第一阶段
  • 原文地址:https://www.cnblogs.com/qianduan/p/1728069.html
Copyright © 2011-2022 走看看