编程笔记 html5&css&js 055 css默认值

发布时间:2024年01月23日

编程笔记 html5&css&js 055 css默认值

没有明确设置的属性都是有默认值的,这个也要知道,代码复制到本地使用。

<!DOCTYPE html>
<html lang="zh-cn">
   <head>
      <title>css默认值 编程笔记 html5&css&js</title>
      <meta charset="utf-8" />
      <style>
         body {
            color: cyan;
            background-color: teal;
         }
         table {
            margin: auto;
            width: 80%;
            font-family: "Microsoft Yahei";
            word-wrap: break-word;
            text-align: justify;
            border-collapse: collapse;
            font-size: 18px;
            border-width: 1px;
            border-style: solid;
            border-color: black;
            width: 60%;
         }
         table th {
            height: 50px;
            font-size: 28px;
         }
         table td {
            height: 24px;
            font-size: 18px;
         }
         table th,
         table td {
            padding: 8px 8px;
            border-color: orange;
            border-style: solid;
            border-collapse: collapse;
            box-sizing: 1px;
            border-width: 1px;
         }
      </style>
   </head>
   <body>
      <table>
         <tbody>
            <tr>
               <th width="30%">元素</th>
               <th width="70%">默认的 CSS 值</th>
            </tr>
            <tr>
               <td>a:link</td>
               <td>
                  <ul>
                     <li>color: (internal value);</li>
                     <li>text-decoration: underline;</li>
                     <li>cursor: auto;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>a:visited</td>
               <td>
                  <ul>
                     <li>color: (internal value);</li>
                     <li>text-decoration: underline;</li>
                     <li>cursor: auto;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>a:link:active</td>
               <td>color: (internal value);</td>
            </tr>
            <tr>
               <td>a:visited:active</td>
               <td>color: (internal value);</td>
            </tr>
            <tr>
               <td>abbr</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>address</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>font-style: italic;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>area</td>
               <td>display: none;</td>
            </tr>
            <tr>
               <td>article</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>aside</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>audio</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>b</td>
               <td>font-weight: bold;</td>
            </tr>
            <tr>
               <td>base</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>bdi</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>bdo</td>
               <td>unicode-bidi: bidi-override;</td>
            </tr>
            <tr>
               <td>blockquote</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>margin-top: 1em;</li>
                     <li>margin-bottom: 1em;</li>
                     <li>margin-left: 40px;</li>
                     <li>margin-right: 40px;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>body</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>margin: 8px;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>body:focus</td>
               <td>outline: none;</td>
            </tr>
            <tr>
               <td>br</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>button</td>
               <td>None</td>
            </tr>
            <tr>
               <td>canvas</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>caption</td>
               <td>
                  <ul>
                     <li>display: table-caption</li>
                     <li>text-align: center;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>cite</td>
               <td>font-style: italic;</td>
            </tr>
            <tr>
               <td>code</td>
               <td>font-family: monospace;</td>
            </tr>
            <tr>
               <td>col</td>
               <td>display: table-column;</td>
            </tr>
            <tr>
               <td>colgroup</td>
               <td>display: table-column-group</td>
            </tr>
            <tr>
               <td>datalist</td>
               <td>display: none;</td>
            </tr>
            <tr>
               <td>dd</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>margin-left: 40px;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>del</td>
               <td>text-decoration: line-through;</td>
            </tr>
            <tr>
               <td>details</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>dfn</td>
               <td>font-style: italic;</td>
            </tr>
            <tr>
               <td>dialog</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>div</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>dl</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>margin-top: 1em;</li>
                     <li>margin-bottom: 1em;</li>
                     <li>margin-left: 0;</li>
                     <li>margin-right: 0;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>dt</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>em</td>
               <td>font-style: italic;</td>
            </tr>
            <tr>
               <td>embed:focus</td>
               <td>outline: none;</td>
            </tr>
            <tr>
               <td>fieldset</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>margin-left: 2px;</li>
                     <li>margin-right: 2px;</li>
                     <li>padding-top: 0.35em;</li>
                     <li>padding-bottom: 0.625em;</li>
                     <li>padding-left: 0.75em;</li>
                     <li>padding-right: 0.75em;</li>
                     <li>border: 2px groove (internal value);</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>figcaption</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>figure</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>margin-top: 1em;</li>
                     <li>margin-bottom: 1em;</li>
                     <li>margin-left: 40px;</li>
                     <li>margin-right: 40px;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>footer</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>form</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>margin-top: 0em;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>h1</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>font-size: 2em;</li>
                     <li>margin-top: 0.67em;</li>
                     <li>margin-bottom: 0.67em;</li>
                     <li>margin-left: 0;</li>
                     <li>margin-right: 0;</li>
                     <li>font-weight: bold;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>h2</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>font-size: 1.5em;</li>
                     <li>margin-top: 0.83em;</li>
                     <li>margin-bottom: 0.83em;</li>
                     <li>margin-left: 0;</li>
                     <li>margin-right: 0;</li>
                     <li>font-weight: bold;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>h3</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>font-size: 1.17em;</li>
                     <li>margin-top: 1em;</li>
                     <li>margin-bottom: 1em;</li>
                     <li>margin-left: 0;</li>
                     <li>margin-right: 0;</li>
                     <li>font-weight: bold;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>h4</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>margin-top: 1.33em;</li>
                     <li>margin-bottom: 1.33em;</li>
                     <li>margin-left: 0;</li>
                     <li>margin-right: 0;</li>
                     <li>font-weight: bold;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>h5</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>font-size: .83em;</li>
                     <li>margin-top: 1.67em;</li>
                     <li>margin-bottom: 1.67em;</li>
                     <li>margin-left: 0;</li>
                     <li>margin-right: 0;</li>
                     <li>font-weight: bold;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>h6</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>font-size: .67em;</li>
                     <li>margin-top: 2.33em;</li>
                     <li>margin-bottom: 2.33em;</li>
                     <li>margin-left: 0;</li>
                     <li>margin-right: 0;</li>
                     <li>font-weight: bold;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>head</td>
               <td>display: none;</td>
            </tr>
            <tr>
               <td>header</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>hr</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>margin-top: 0.5em;</li>
                     <li>margin-bottom: 0.5em;</li>
                     <li>margin-left: auto;</li>
                     <li>margin-right: auto;</li>
                     <li>border-style: inset;</li>
                     <li>border-width: 1px;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>html</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>html:focus</li>
                     <li>outline: none;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>i</td>
               <td>font-style: italic;</td>
            </tr>
            <tr>
               <td>iframe:focus</td>
               <td>outline: none;</td>
            </tr>
            <tr>
               <td>iframe[seamless]</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>img</td>
               <td>display: inline-block;</td>
            </tr>
            <tr>
               <td>input</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>ins</td>
               <td>text-decoration: underline;</td>
            </tr>
            <tr>
               <td>kbd</td>
               <td>font-family: monospace;</td>
            </tr>
            <tr>
               <td>label</td>
               <td>cursor: default;</td>
            </tr>
            <tr>
               <td>legend</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>padding-left: 2px;</li>
                     <li>padding-right: 2px;</li>
                     <li>border: none;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>li</td>
               <td>display: list-item;</td>
            </tr>
            <tr>
               <td>link</td>
               <td>display: none;</td>
            </tr>
            <tr>
               <td>main</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>map</td>
               <td>display: inline;</td>
            </tr>
            <tr>
               <td>mark</td>
               <td>
                  <ul>
                     <li>background-color: yellow;</li>
                     <li>color: black;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>menu</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>list-style-type: disc;</li>
                     <li>margin-top: 1em;</li>
                     <li>margin-bottom: 1em;</li>
                     <li>margin-left: 0;</li>
                     <li>margin-right: 0;</li>
                     <li>padding-left: 40px;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>menuitem</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>meta</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>meter</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>nav</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>noscript</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>object:focus</td>
               <td>outline: none;</td>
            </tr>
            <tr>
               <td>ol</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>list-style-type: decimal;</li>
                     <li>margin-top: 1em;</li>
                     <li>margin-bottom: 1em;</li>
                     <li>margin-left: 0;</li>
                     <li>margin-right: 0;</li>
                     <li>padding-left: 40px;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>optgroup</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>option</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>output</td>
               <td>display: inline;</td>
            </tr>
            <tr>
               <td>p</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>margin-top: 1em;</li>
                     <li>margin-bottom: 1em;</li>
                     <li>margin-left: 0;</li>
                     <li>margin-right: 0;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>param</td>
               <td>display: none;</td>
            </tr>
            <tr>
               <td>picture</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>pre</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>font-family: monospace;</li>
                     <li>white-space: pre;</li>
                     <li>margin: 1em 0;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>progress</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>q</td>
               <td>display: inline;</td>
            </tr>
            <tr>
               <td>q::before</td>
               <td>content: open-quote;</td>
            </tr>
            <tr>
               <td>q::after</td>
               <td>content: close-quote;</td>
            </tr>
            <tr>
               <td>rp</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>rt</td>
               <td>line-height: normal;</td>
            </tr>
            <tr>
               <td>ruby</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>s</td>
               <td>text-decoration: line-through;</td>
            </tr>
            <tr>
               <td>samp</td>
               <td>font-family: monospace;</td>
            </tr>
            <tr>
               <td>script</td>
               <td>display: none;</td>
            </tr>
            <tr>
               <td>section</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>select</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>small</td>
               <td>font-size: smaller;</td>
            </tr>
            <tr>
               <td>source</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>span</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>strike</td>
               <td>text-decoration: line-through;</td>
            </tr>
            <tr>
               <td>strong</td>
               <td>font-weight: bold;</td>
            </tr>
            <tr>
               <td>style</td>
               <td>display: none;</td>
            </tr>
            <tr>
               <td>sub</td>
               <td>
                  <ul>
                     <li>vertical-align: sub;</li>
                     <li>font-size: smaller;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>summary</td>
               <td>display: block;</td>
            </tr>
            <tr>
               <td>sup</td>
               <td>
                  <ul>
                     <li>vertical-align: super;</li>
                     <li>font-size: smaller;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>table</td>
               <td>
                  <ul>
                     <li>display: table;</li>
                     <li>border-collapse: separate;</li>
                     <li>border-spacing: 2px;</li>
                     <li>border-color: gray;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>tbody</td>
               <td>
                  <ul>
                     <li>display: table-row-group;</li>
                     <li>vertical-align: middle;</li>
                     <li>border-color: inherit;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>td</td>
               <td>
                  <ul>
                     <li>display: table-cell;</li>
                     <li>vertical-align: inherit;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>template</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>textarea</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>tfoot</td>
               <td>
                  <ul>
                     <li>display: table-footer-group;</li>
                     <li>vertical-align: middle;</li>
                     <li>border-color: inherit;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>th</td>
               <td>
                  <ul>
                     <li>display: table-cell;</li>
                     <li>vertical-align: inherit;</li>
                     <li>font-weight: bold;</li>
                     <li>text-align: center;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>thead</td>
               <td>
                  <ul>
                     <li>display: table-header-group;</li>
                     <li>vertical-align: middle;</li>
                     <li>border-color: inherit;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>time</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>title</td>
               <td>display: none;</td>
            </tr>
            <tr>
               <td>tr</td>
               <td>
                  <ul>
                     <li>display: table-row;</li>
                     <li>vertical-align: inherit;</li>
                     <li>border-color: inherit;</li>
                  </ul>
               </td>
            </tr>
            <tr>
               <td>track</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>u</td>
               <td>text-decoration: underline;</td>
            </tr>
            <tr>
               <td>ul</td>
               <td>
                  <ul>
                     <li>display: block;</li>
                     <li>list-style-type: disc;</li>
                     <li>margin-top: 1em;</li>
                     <li>margin-bottom: 1 em;</li>
                     <li>margin-left: 0;</li>
                     <li>margin-right: 0;</li>
                     <li>padding-left: 40px;</li>
                  </ul>
               </td>
            </tr>

            <tr>
               <td>var</td>
               <td>font-style: italic;</td>
            </tr>

            <tr>
               <td>video</td>
               <td>None.</td>
            </tr>
            <tr>
               <td>wbr</td>
               <td>None.</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

文章来源:https://blog.csdn.net/qq_40071585/article/details/135777402
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。