CSS

同类型选择器的渲染原则
- 就近原则（只渲染最后一个样式）
不同类型的选择器渲染原则
- ID > 类 > 标签 > 通配符
不同类型的样式表渲染原则
- 内嵌 > 内部 > 外部
不同原则的优先级
- 重要性 > 具体性 > 就近
字体
- 衬线
- 非衬线
- 等宽

标签	注释
header	页眉
main	页体
footer	页脚
link	外部样式表

属性	注释
background-color	背景颜色
overflow	如何处理内容溢出
text-align	对齐方式
margin	外边距（模块与模块或模块与页面边框的间隔）
padding	内边距（内容与模块边框间隔）
letter-spacing	文本间距
border	模块的边框
line-height	行高
text-shadow	文本阴影效果
text-indent	文本缩进
font-weight	字体的粗细
font-style	字体的斜体属性
font-stretch	字体的拉伸属性
font	字体的全部属性
border-radius	模块四周圆角度
border-bottom	下边框
outline	轮廓
background	背景图
display	模块的属性
visibility	模块的可见性（占用的显示空间不会被清除）
position	模块的位置
top	顶部位置
bottom	底部位置
left	左边位置
right	右边位置
border-collapse	表格的边框属性
float	模块浮动的方向
clear	清除模块指定方向的浮动元素

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {  /* 网页字体 */
            /* font-family: Arial; */
            /* src: url("Arial.ttf"); */
            font-weight: auto;
            font-style: auto;
            font-stretch: auto;
        }

        * {  /* 通配符选择器（渲染全部标签） */
            font-size: 64px;
            letter-spacing: 10px;
            border: 1px solid blue;
            line-height: 64px;
            text-shadow: 1px 1px 2px coral;
            text-indent: 5px;
            border-radius: 5px 5px 5px 5px;
        }  /* 以'*'符号渲染的就是通配符选择器 */

        h1 {  /* 标签选择器（全部渲染h1标签名的标签，不管有无指定class或id） */
            color: aqua;
            background-color: red;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }  /* 以标签名渲染的就是标签选择器 */

        .bar {  /* 类选择器（全部渲染bar类名的标签） */
            color: red !important;  /* !important：指定最高级原则 */
        }  /* 以类名渲染的就是类选择器（类名前加上'.'才能定义类名） */

        .bar {
            color: coral;
            text-align: center;
            background-color: aquamarine;
            margin: 10px 10px 10px 10px;
            padding: 10px 10px 10px 10px;
        }

        #hoo {  /* ID选择器（只渲染一个指定ID名的标签，ID名不可重复） */
            color: red;
        }  /* 以ID名渲染的就是ID选择器（ID名前加上'#'才能定义ID名） */

        input[type=text]:focus {  /* 属性选择器（只对类型是text的input标签渲染），:focus：获得焦点时发生的事件 */
            border: 1px solid red;
            border-bottom: none;
            outline: 3px solid chartreuse;
        }  /* 以'[]'指定类型的标签就是属性选择器 */

        ol li {  /* 后代选择器（仅对ol标签下的li标签渲染） */
            color: red;
        }  /* 以空格分隔的就是后代选择器 */

        ol ~ ul {  /* 兄弟选择器（仅对ol标签以下的所有ul标签，直到遇见不是ul的标签） */
            color: darkgoldenrod;
        }  /* 以'~'连接的就是兄弟选择器 */

        h1 + h2 {  /* 相邻兄弟选择器（仅对h1标签下的一个h2标签） */
            color: black;
        }  /* 以'+'连接的就是相邻兄弟选择器 */

        h1 > a {  /* 子代选择器（仅对h1包含的a标签） */
            color: cornflowerblue;
            /* background: url("") no-repeat no-repeat +10px -10px; */
            display: inline-block;
            visibility: visible;
            position: absolute;
            top: auto;
            bottom: auto;
            left: auto;
            right: auto;
        }  /* 以'>'连接的就是子代选择器 */

        table {
            border-collapse: collapse;
            float: right;
            clear: top;
        }

        table > tr:nth-child(odd) {  /* 奇偶选择器（仅对指定奇偶的标签有效） */
            color:red
        }  /* 以nth-child(odd/even)结尾的就是奇偶选择器（odd：奇数行，even：偶数行） */
    </style>
    <link rel="stylesheet" href="">
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
    <h1>Foooooooooo</h1>
    <h2 class="bar">Bar</h2>
    <h3 id="hoo">Hoo</h3>
    <h4 style="color: aqua;background-color: azure">HQSY</h4>  <!-- style：内嵌样式 -->
    <input type="text">
    <ol>
        <li>111</li>
    </ol>
    <ul>
        <li>222</li>
    </ul>
    <h1>h1</h1>
    <h2>h2</h2>
    <h1><a>A</a></h1>
    <table>
        <tr>
            <td>td</td>
            <td>td</td>
        </tr>
        <tr>
            <td>td</td>
            <td>td</td>
        </tr>
    </table>
</body>
</html>