1216 优先级提权方式.+字体与字体图标+盒模型属性的缩写

选择器组合实现优先级提权方式

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>选择器的优先级的提权方式</title>
    <style>
        /* 1.声明顺序对优先级的影响*/
         div{
             color: indigo;
            }
/* 在后面有一个相同的声明，根据源码的顺序，后面有效 */
         div{
             color: red;
            }
/* **********************************************/
         /* 2.选择器类型对优先级的影响 */
         .on{
             color: lawngreen;
         }
/************************************************/
        div{
             color: indigo;
           }
        body div{
             color: red;
         }
        .on{
             color: lawngreen;
         }
/* id>class>tag
计算公式：【id选择器的数量，class选择器的数量，tag选择器的数量】
          body div:[id=0,class=0,tag=2]
          idv:[id=0,class=0,tag=1]
          tag级向class级进位，class级向id级进位
          .on div：[id=0,class=1,tag=1] */
/************************************************/
         /*也可用伪类  :root  代表html*/
         html body div{  /*[0,0,3]*/
             background: lawngreen;
         }
         .on{    /*[0,1,0]*/
             background: rgb(184, 129, 129);
         }
         .on.h{  /*[0,2,0]*/
             background:red;
         }
    </style>
</head>
<body>
    <div class="on h">北京欢迎您！</div>
</body>
</html>

字体与字体图标

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>字体与字体图标</title>
<!--引入icon小图标，路径不要错-->
    <link rel="stylesheet" href="icon/iconfont.css">
    <style>
   /* 字体 font */
   .font{
   font-family: 'Courier New', Courier, monospace;
   font-size: 40px;
   font-style: italic;   /*斜体*/
   font-weight: lighter; /*细*/
   /* 简写形式 */
   font: italic lighter 40px 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
<!--引入icon小图标有两种方式，选择了简单的一种。用哪个写哪个的名字-->
    <span class="iconfont icon-kehuguanli"></span>
    <h2 class="font">PHP中文网</h2>
</body>
</html>

盒模型常用属性的缩写

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>盒模型的属性缩写</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: rgb(224, 169, 169);
            box-sizing: border-box;
        }
        .box{
   /* 边框：每个边框可以设置三个属性：宽度，样式，颜色*/
            border-top-width: 3px;
            border-top-color:skyblue;
            border-top-style: solid;
            /*简写形式*/
            border-top:rgb(0, 38, 255) 10px solid;
            border: 5px dashed yellow;
        }
        .box{
            /*内边距padding:上右下左；顺时针方向*/
            padding: 30px 20px 10px 8px;
            /* 将背景色裁切到内容区 */
            background-clip: content-box;
            /* 左右相等,上下不等 */
            padding: 30px 1px 8px;
            /* 左右相等，上下相等 */
            padding: 5px 30px;
            /* 上下左右都相等 */
            padding: 30px;
            /* 总结：第二个永远表示左右 */
        }
        .box{
      /* 外边距：上右下左，控制多个盒子之间的排列间距 */
            margin: 5px 8px 0px 30px;
             /* 左右相等,上下不等 */
            margin: 30px 1px 8px;
            /* 左右相等，上下相等 */
            margin: 5px 30px;
            /* 上下左右都相等 */
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

选择器组合实现优先级提权方式

字体与字体图标

盒模型常用属性的缩写

相关文章