选择器提权-字体图标-盒模型常用属性缩写

作业内容：1. 实例演示选择器组合实现优先级提权方式; 2.实例演示字体与字体图标;3.实例演示盒模型常用属性的缩写方案

1. 实例演示选择器组合实现优先级提权方式

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <p class="paragraph on" id="foo">tag content</p>
    </body>
</html>

<style>
    /* 对元素 tag content 提权依次为 */
    /* [0, 0, 1] */
    p {
        background-color: violet;
    }
    /* 1. 声明顺序覆盖提权 */
    /* [0, 0, 1] */
    p {
        background-color: blueviolet;
    }
    /* 2. 元素组合提权 */
    /* [0 ,0 ,2] */
    body p {
        background-color: brown;
    }
    /* [0, 0, 3] */
    html body p {
        background-color: burlywood;
    }
    /* [0, 1, 0] */
    .paragraph {
        background-color: cadetblue;
    }
    /* [0, 1, 1] */
    p.paragraph {
        background-color: chartreuse;
    }
    /* [0, 1, 2] */
    body p.paragraph {
        background-color: chocolate;
    }
    /* [0, 1, 3] */
    html body p.paragraph {
        background-color: coral;
    }
    /* [0, 2, 0] */
    .paragraph.on {
        background-color: cornflowerblue;
    }
    /* [0, 2, 1] */
    p.paragraph.on {
        background-color: cornsilk;
    }
    /* [0, 2, 2] */
    body p.paragraph.on {
        background-color: crimson;
    }
    /* [0, 2, 3] */
    html body p.paragraph.on {
        background-color: cyan;
    }
    /* [0, 3, 0] */
    :root .paragraph.on {
        background-color: darkblue;
    }
    /* [0, 3, 1] */
    :root p.paragraph.on {
        background-color: darkcyan;
    }
    /* [0, 3, 2] */
    :root body p.paragraph.on {
        background-color: darkgoldenrod;
    }
    /* [1, 0, 0] */
    #foo {
        background-color: darkgray;
    }
    /* [1, 0, 1] */
    p#foo {
        background-color: darkgreen;
    }
    /* [1, 0, 2] */
    body p#foo {
        background-color: darkkhaki;
    }
    /* [1, 0, 3] */
    html body p#foo {
        background-color: darkmagenta;
    }
    /* [1, 1, 0] */
    .paragraph#foo {
        background-color: darkolivegreen;
    }
    /* [1, 1, 1] */
    p.paragraph#foo {
        background-color: darkorange;
    }
    /* [1, 1, 2] */
    body p.paragraph#foo {
        background-color: darkorchid;
    }
    /* [1, 1, 3] */
    html body p.paragraph#foo {
        background-color: darkred;
    }
    /* [1, 2, 0] */
    .paragraph.on#foo {
        background-color: darksalmon;
    }
    /* [1, 2, 1] */
    p.paragraph.on#foo {
        background-color: darkseagreen;
    }
    /* [1, 2, 2] */
    body p.paragraph.on#foo {
        background-color: darkslateblue;
    }
    /* [1, 2, 3] */
    html body p.paragraph.on#foo {
        background-color: darkslategray;
    }
    /* [1, 3, 0] */
    :root .paragraph.on#foo {
        background-color: darkturquoise;
    }
    /* [1, 3, 1] */
    :root p.paragraph.on#foo {
        background-color: darkviolet;
    }
    /* [1, 3, 2] */
    :root body p.paragraph.on#foo {
        background-color: deeppink;
    }
</style>

2.实例演示字体与字体图标

/* 已将 iconfont.* 复制到 css 目录 */
<link rel="stylesheet" href="css/iconfont.css">

<p>
    <span class="iconfont icon-baidu"></span>
    <span class="iconfont icon-google"></span>
</p>

3.实例演示盒模型常用属性的缩写方案

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <div class="box">box conent</div>
    </body>
</html>

/* 盒模型常用属性的缩写 */
.box{
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    text-align: center;
    color: violet;
    /* 边框 border */
    border-width: 5px;
    border-color: red;
    border-style: solid;
    border: 15px red solid;
    /* 字体 font */
    font-family: 'Times New Roman', Times, serif;
    font-size: 36px;
    font-weight: lighter;
    font-style: italic;
    font: italic lighter 36px sans-serif;
    /* 背景 background */
    background-image: url(https://www.php.cn/static/images/user_avatar.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background: url(https://www.php.cn/static/images/user_avatar.jpg) no-repeat top center;
    /* 内外边距，上右下左 */
    padding: 10px 20px;
    margin: 15px;
    background-color: grey;
    background-clip: content-box;
}