css基础学习（选择器优先级提权方式、字体、盒模型常用属性的缩写方案）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的优先级以及提权方式、字体及图标、盒子模型常用属性的缩写方案</title>
    <style>
        /* 1.选择器优先权：id>class>tag(标签选择器) 
            a.声明顺序对优先级的影响：两个相同的声明，根据顺序生效，从上到下最后有效（浏览器读取css样式时为从上到下读取，后面的声明会将前面同类声明覆盖。）
            2.选择器提权方式：一个标签的样式显示优先级公式，默认为[id=0,class=0,tag=0]
        判断条件为数组内元素从第一个开始做比较，第一个元素开始比较大小，大着优先级大，相等则继续判断第二个元素大小。
        例如：
        */
        /* 等级为[0,0,2] */
        body p{
            color: red;
        }
        /* 等级为[0,0,1] */
        p{
            color:green;
        }
        /* 等级为[0,1,0] */
        .p{
            color:indigo
        }
        /* 等级为[0,1,1] */
        p.p{
            color:blue
        }
        /* 等级为[0,2,0] */
        .p.p2{
            color:rgb(119, 55, 55);
        }
        /* 等级为[1,0,0] */
        #p{
            color: cornflowerblue;
        }
        /* ----------------------------------------------- */
    /* <!-- 字体属性 --> */
        .h2{
            /* font-family: 'Courier New', Courier, monospace;字体样式
            font-size: 26px;大小
            font-style: normal;样式
            font-weight: bold;粗细 */
            /* 简写 */
            font: normal bold 36px 'Courier New';
        }
        /* body{
            background-color: bisque;
            background-image: url("https://img.php.cn/upload/course/000/000/001/5ec659c41669a893.png");
            background-repeat: no-repeat;
            background-size: 300px;
            background-position: top center;/* center可以不写，因为其为默认值 
        } */
        .div{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            /*边框
             border-top-color: red;
            border-top-width:2px;
            border-top-style: solid; */
            /* 缩写为 */
            border:2px solid black;
            /* 将背景色裁剪到内容区 */
            background-clip: content-box;
            /* 边距
            外边距 margin:上 右 下 左;
            内边距 padding:上 右 下 左;
            简写：
            如左右相等则使用三值语法：上 左右 下 /10px 40px 80px 
            如上下相等左右相等则用二值语法：上下 左右 /10px 40px 
            上下左右都相等则单值语法：上下左右/10px
            三值和二值语法的第二个永远代表左右的值。
            */
            /* margin-top: 20px;
            margin-left: 20px;
            margin-bottom: 20px;
            margin-right: 20px; */  
            /* 缩写为 */
            margin: 10px 20px 30px 40px;
            padding: 10px 30px 50px 80px ;
        }
    </style>    
</head>
<body>
    <!-- 选择器的优先级以及提权方式 -->
    <!-- <p class="p p2" id="p">php</p> -->
<!-- ------------------------------------------------------ -->
    <!-- 字体属性 -->
    <!-- <h2 class="h2">PHP中文网</h2> -->
<!-- ------------------------------------------------------ -->
    <!-- 盒模型常用属性的缩写方案 -->
    <div class="div"></div>
</body>
</html>
相关文章
