选择器优先级及属性简写

css伪类选择器：状态匹配

链接四种状态：顺序是固定的

以链接a元素为例

<a href="https://www.php.cn">>link</a>

1. 默认状态，没有访问/点击

a:link{
            color:blue;
            /* 下划线去掉 */
            text-decoration: none;
        }

1. 已访问的状态

a:visited{
            color:violet;
        }

1. 鼠标悬停的状态

a:hover{
            color:red;
            text-decoration: underline;
        }

1. 激活,当鼠标点击压下去的时候

a:active{
            color:green;
        }

以表单为例

<!-- 2.表单 -->
    <form action="">
        <p>用户名：<input type="text" name="" value="" readonly></p>
        <p>邮箱：<input type="email" name="" value="" required></p>
        <p>密码：<input type="password" name="" value="123456" disabled></p>
        <p><button>提交</button></p>
    </form>

通过控件的布尔属性的状态选择

        input:read-only{
            background-color: violet;
        }
        input:required{
            background-color:yellow;
        }
        input:disabled{
            background-color: #eee ;
        }

css选择器的优先级

1. 当选择器相同时，与书写顺序有关

2. 选择器不同时与优先级有关，级别高的覆盖级别低的 。
   优先级有公式计算，类似进位,越左边越高 id > class > tag
   [id选择器的数量,class选择器的数量,tag选择器的数量]

   例如：

<h2 class="foo on" id="one">hello world</h2>

        [0,0,1]
        h2{
            color:gold;
        }
        /* [0,0,2] > [0,0,1] */
        [0,0,2]
        body h2{
            color:green;
        }
        /* [0,1,1] 权限高于 [0,0,2]也高于[0,0,20000] */
        [0,1,1]
        h2.on{
            color:skyblue;
        }
        /* [0,1,2] > [0,1,1] */
        [0,1,2]
        body h2.on{
            color:green;
        }
        /* [1,0,0] 高于 [0,1,2] 也高于 [0,20000,0] */
        #one{
            color:red;
        }

实际工作中，应该用一系列的选择器组合来灵活的设置优先级

注意在开发过程中，如果需要修改样式，尽量增加样式提高优先级来覆盖之前的样式，不要直接修改已有的样式。如果需要还原原来的样式直接删除新增的即可。

图标字体如何设置

1. 阿里图标字体库 https://www.iconfont.cn/
   选择需要的下载
2. 解压后将文件放到项目中
3. 根据demo_index.html提示操作。

需要 注意的是，文件路径一定要修改正确。修改字体属性时一定要增加权限，否则不能生效。

背景图片的设置

body {
            /* background-image: url("https://img.php.cn/upload/course/000/000/001/5fbb84ba39b3a182.jpg");
            background-repeat: no-repeat;
            background-size: 300px;
            background-position: top; */
            /* 里面有两个值，默认是center,0 0 指的是坐标，通常不会给绝对值。 */
            /* 背景裁切 */
            /* 有个缩写属性，不分顺序 */
            background: url("https://img.php.cn/upload/course/000/000/001/5fbb84ba39b3a182.jpg") no-repeat top;
        }

盒模型之属性缩写

<div class="box"></div>

.box{
            width: 200px;
            height: 300px;
            background-color: lightgreen;
            box-sizing: border-box;
        }
.box {
            /* 边框
            每个边框可以设置3个属性：
            宽度，样式，颜色 */
            /* border-top-width: 3px;
            border-top-color:red;
            border-top-style: solid; */
            /* 顶边 */
            border-top: 5px solid red;
            /* 底边 */
            border-bottom: 10px solid #000;
            /* 四个边设置一样的，开发中比较常见 */
            border:5px solid red;
        }
        .box{
            /* 内边距  */
            /* padding: 上 右 下 左 ；按顺时针方向; */
            padding: 5px 10px 15px 20px;
            /* 页面上看不到是因为padding是透明的，且背景色会自动扩展到padding */
            /* 将背景色裁切到内容区 */
            background-clip:content-box;
            /* 当左右相同，而上下不相等，使用三值语法 */
            padding: 10px 20px 15px;
            /* 当上下相同，左右也相同使用二值语法  */
            padding: 10px 30px;
            /* 当四个方向都相等时，使用单值语法 */
            padding:10px;
            /* 当使用三值，二值时，只需要记住第二个永远表示左右 */
        }
        .box {
            /* 外边距：控制多个盒子之前的排列间距 */
            /* 四个值的时候，上右下左 */
            margin: 5px 8px 10px 12px;
            /* 左右相同，用三值语法 */
            margin:10px 30px 15px;
            /* 上下相同，左右也相同使用二值语法 */
            margin:12px 15px;
            /* 四边都一样用单值语法 */
            margin: 20px;
        }

总结

1. 边框：
   border-top: 5px solid red；
   可以设置四边，粗细，样式，颜色
   简写：
   border:5px solid red;
2. 内边距
   paddding:四值，三值，二值，单值语法怎么写； 第二个永远表示左右
   注意： 默认padding是透明的，且背景色会自动扩展到padding
3. 外边距
   margin:四值，三值，二值，单值语法怎么写； 第二个永远表示左右