伪类选择器：状态匹配

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器：状态匹配</title>
    <style>
        /* 链接四种状态：顺序是固定的(如先link->visited->hover->active顺序不能乱) */
        /* 1. 默认，没有访问（没有点击） */
        a:link {
            color: blue;
            /* 下划线去掉 */
            text-decoration: none;
        }
        /* 2.已访问过的状态 */
        a:visited{
            color: violet;
        }
        /* 3.悬停状 */
        a:hover {
            color: red;
        }
        /* 4.激活，当鼠标点击压下去的时候 */
        a:active {
            color: green;
        }
        /* ------------------------------------------- */
        /* 第一个p第一个input */
        /* form p:first-of-type input:first-of-type{
            background-color: yellow;
        } */
        input:read-only {
            background-color: yellow;
        }
        input[type=email] {
            background-color: red;
        }
        input:required {
            background-color: violet;
        }
        input:disabled {
            background-color: yellowgreen;
        }
        input:focus {
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- 1.链接 -->
    <a href="https://www.php.cn">php中文网</a>
    <!-- 2.表单 -->
    <!-- autofocus 第一个能应用到焦点 其它不行 -->
    <form action="">
        <p>用户名：<input type="text" name="" value="admin" readonly autofocus></p>
        <p>邮箱：<input type="email" name="" value="" required autofocus></p>
        <p>密码：<input type="password" name="" value="12345678" disabled></p>
        <p><button>提交</button></p>
    </form>
</body>
</html>

选择器的优先级

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的优先级</title>
    <style>
        /* 1.当选择器相同时，与书写顺序有关，后面的样式覆盖前面的 */
        /* h2 {
            color: gold;
        }
        h2 {
            color: green;
        } */
        /* --------------------------------------------- */
        /* 2.当选择器不同时，与优先级相关，级别高的覆盖级别低 */
        /* .on {
            color: violet;
        } */
        /* h2 无效果，表示clas的优先级大于 tag标签 */
        /* h2 {
            color: green;
        } */
        /* 如果仍想提升选择器的优先级，此时到了class级，我们应该用id级 */
        #foo {
            color: blue;
        }
        /* .on无效，因为级别低了 */
        .on {
            color: violet;
        }
        /* 结论：id > class > tag */
        /* !important: 不是选择器 是提权关键字 */
    </style>
</head>
<body>
    <h2 class="on" id="foo"> hello php.cn</h2>
</body>
</html>

选择器的优先级的提权方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的优先级的提权方式</title>
    <style>
        /* 1.声明顺序对优先级的影响 */
        /* h2 {
            color: skyblue;
        } */
        /* 在后面有一个相同的声明，根据源码的顺序，后面有效 */
        /* h2 {
            color: red;
        } */
        /* 2. 选择器的类型对优先级的影响 */
        /* .on {
            color: skyblue;
        }
        h2 {
            color: red;
        } */
        /* 是不是只能用选择器类型的提权来提升优先级？ */
        /* 实际工作中，应该用一系列的选择器组合来灵活的设置优先级 */
        /* ----------------------------------------------------------- */
        /* body h2 {
            color: skyblue;
        }
        h2 {
            color: red;
        } */
        /* 大家都是标签级，为什么写到后面的无效，一定有一个规则 */
        /* id > class > tag */
        /* 有一个计算公式：[id选择器的数量，class选择器的数量，tag选择器的数量] */
        /* body h2: [id=0,class=0,tag=2] */
        /* h2: [id=0,class=0,tag=1] */
        /* tag级向class级进位（class比tag高位），class级向id级进位（id比class高位） */
        /* .on h2: [id=0,class=1,tag=1] 得 [0,1,1] */
        /* 如果想把body h2继续提权，选择一个只要比 body h2 权重高的选择器组合就可以了 */
        /* [0,0,3] */
        /* html body h2 {
            color: skyblue;
        } */
        /* [0,0,2] */
        /* body h2 {
            color: red;
        } */
        /* -------------------------------- */
        /* [0,0,3] */
        /* 因为html是根元素，上面没有人 */
        /* [0,1,0] */
        /* .on {
            color: skyblue;
        } */
        /* [0,0,3] */
        /* html body h2 {
            color: red;
        } */
        /* [0,1,1] */
        /* h2.on {
            color: skyblue;
        } */
        /* [0,1,0] */
        /* .on {
            color: red;
        } */
        /* [0,1,1] */
        /* h2.on {
            color: skyblue;
        } */
        /* [0,1,2] */
        /* body h2.on {
            color: red;
        } */
        /* [0,1,3] */
        /* html body h2.on {
            color: skyblue;
        } */
        /* [0,2,0] */
        .on.off {
            color: red;
        }
        /* [1,2,0] */
        .on.off#foo {
            color: skyblue;
        }
        /* [1,2,1] */
        h2.on.off#foo {
            color: green;
        }
        /* 注意提权公式是ice（或ict）,而选择器的写法是eci（或tci）刚好相反 */
    </style>
</head>
<body>
    <h2 class="on off" id="foo"> hello php.cn</h2>
</body>
</html>

属性的简写和iconfont

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的简写和iconfont</title>
    <style>
        .title {
            /* font-family: sans-serif;
            font-size: 24px;
            font-style: initial;
            font-weight: lighter; */
            /* font简写 */
            font: italic lighter 36px sans-serif;
        }
        /* 生成的 @font-face */
        @font-face {
        font-family: 'iconfont';
        src: url('./icon-font/iconfont.eot');
        src: url('./icon-font/iconfont.eot?#iefix') format('embedded-opentype'),
            url('./icon-font/iconfont.woff2') format('woff2'),
            url('./icon-font/iconfont.woff') format('woff'),
            url('./icon-font/iconfont.ttf') format('truetype'),
            url('./icon-font/iconfont.svg#iconfont') format('svg');
        }
        /* 定义使用 iconfont 的样式 */
        span.iconfont {
        font-family: "iconfont" !important;
        font-size: 38px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }
        /* 定义使用 iconfont icon-addpeople_fill的样式 */
        span.iconfont.icon-addpeople_fill {
        font-size: 100px;
        color: violet;
        }
        body {
            /* background-color: cornsilk;
            background-image: url(https://www.php.cn/static/images/index_yunv.jpg);
            background-repeat: no-repeat;
            background-size: 300px; */
            /* background-position: 0 0;
            background-position: 100px 200px;
            background-position: top; */
            /* background-position: top center; */
            /* 简写 */
            background: url(https://www.php.cn/static/images/index_yunv.jpg) no-repeat top center;
        }
    </style>
    <link rel="stylesheet" href="./icon-font/iconfont.css">
</head>
<body>
    <h2 class="title">php中文网</h2>
    <span class="iconfont icon-addpeople_fill"></span>
    <br>
    <span class="iconfont">&#xe70b;</span>
</body>
</html>

盒模型的属性和缩写

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型的属性和缩写</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: violet;
            box-sizing: border-box;
        }
        .box {
            /* 边框 */
            /* 每个边框可以设置三个属性：宽度，样式，颜色 */
            /* border-top-width: 5px;
            border-top-color: red;
            border-top-style: solid; */
            /* border-top: 5px green solid;
            border-bottom: 10px red solid;
            border-left: solid 15px blue;
            border-right: indigo solid 20px; */
            /* 简写 */
            border: 5px solid olive;
        }
        .box {
            /* 内边距 */
            /* padding: 上 右 下 左；按顺时针方向 */
            padding: 5px 10px 15px 20px;
            /* 页面看不到是因为padding是透明的，且背景色会自动扩展到padding */
            /* 将背景色裁剪到内容区 */
            background-clip: content-box;
            /* 当左右相等，而上下不相等，使用三值语法 */
            padding: 5px 20px 10px;
            /* 当左右相等，上下也相等，使用二值语法 */
            padding: 5px 20px;
            /* 如果四个方向全相等，使用单值语法 */
            padding: 20px;
        }
        .box {
            /* 外边距：控制多个盒子之间的排列间距 */
            /* 四值，顺时针，上右下左 */
            margin: 5px 10px 15px 20px;
            /* 三值，左右相等，上下不等 */
            margin: 5px 10px 15px;
            /* 二值，左右相等，上下也相等 */
            margin: 5px 10px;
            /* 单值，四个方向全相等 */
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>