search

博客列表 >优先级提权方式、字体和字体图标的应用、盒模型常用属性的缩写

优先级提权方式、字体和字体图标的应用、盒模型常用属性的缩写

Y的博客
Y的博客原创
2020年12月18日 16:49:25654浏览

选择器的提权方式

  • 选择器优先级：id>class>tag
  • 有一个计算公式【id选择器的数量、class选择器的数量、tag选择器的数量】
  • tag级向class级进位，class级向id级进位
    1. <style>
    2.    /* h2:[id=0,class=0,tag=1] */
    3.   h2{
    4.       background-color: lightgreen;
    5.   }
    6.     /*body h2:[id=0,class=0,tag=2] */
    7.    body h2{
    8.       background-color: lightskyblue;
    9.   }
    10.   /*html body h2:[id=0,class=0,tag=3] */
    11.   html body h2{
    12.       background-color: lightyellow;
    13.   }
    14.   /*html body h2.it:[id=0,class=1,tag=3] */
    15.   html body h2.it{
    16.       background-color: lightgrey;
    17.   }
    18.   /*html body h2#it.it:[id=1,class=1,tag=3] */
    19.   html body h2#it.it{
    20.       background-color: lightslategray;
    21.   }
    22.   </style>

    字体和字体图标的应用

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>字体和字体图标的应用</title>
    7.   <style>
    8.       /* 字体属性 */
    9.       h2 {
    10.           /* font-size: 20px;
    11.           font-style: italic;
    12.           font-weight: lighter; */
    13.           /* 简写 */
    14.           font: 16px italic lighter;
    15.       }
    16.       h2 span {
    17.           color: red;
    18.       }
    19.   </style>
    20.   <link rel="stylesheet" href="style/icon-font/iconfont.css">
    21. </head>
    22. <body>
    23.   <h2 class="title">
    24.       <span class="iconfont icon-aixin"></span>
    25.       字体样式
    26.       <span class="iconfont icon-dianzan"></span></h2>
    27. </body>
    28. </html>

    盒模型常用属性的缩写


    ``
    1.   .box {
    2.   width: 200px;
    3.   height: 200px;
    4.   background-color: slategray;
    5.   box-sizing: border-box;
    6.   }
    7.   .box {
    8.   /* 每个边框可以设置三个属性：宽度、样式、颜色 */
    9.   /* border-top-width: 5px;
    10.   border-top-color: red;
    11.   border-top-style: solid; */
    12.   /* 缩写border-top: 5px solid #000; */
    13.   border-top: 5px solid #000;
    14.   border-bottom: 10px solid lightcoral;
    15.   /* 可以用border设置整个边框 */
    16.   border: 3px solid lightgreen;
    17.   }
    18.   .box {
    19.   /* 内边距padding：上右下左；顺时针方向写 */
    20.   padding: 5px 10px 20px 15px;
    21.     /* 页面看不到因为padding是透明的，且背景会自动扩展到padding */
    22.   /* 将背景颜色裁切到内容区才能看到 */
    23.   background-clip: content-box;
    24.   /* 当左右相等上下不相等时，使用三值语法 */
    25.   padding: 10px 20px 15px;
    26.   /* 当左右相等上下也相等时，使用两值语法 */
    27.   padding: 20px 30px;
    28.   /* 如果四个方向全相等使用单值语法 */
    29.   padding: 10px;
    30.   /* 总结：当使用三值或二值时只要记住第二个永远表示左右就可以了 */
    31.   }  
    1.   .box {
    2.   /* 外边距控制多个盒子之间的排列距离 */
    3.   /* 四值，上右下左，顺时针 */
    4.   margin: 5px 10px 20px 15px;
    5.   /* 三值，左右相等，上下不相等 */
    6.   margin: 5px 10px 15px;
    7.   /* 两值，左右相等，上下相等 */
    8.   margin: 5px 15px;
    9.    /* 单值，都相等 */
    10.    margin: 15px;    
    11.    }
上一条：自撸PHP发开框架FUGEN，继承组件medoo+plates，轻量级TP6框架替代品...下一条：em,rem的原理与应用场景，并实例演示rem / em /vh/ vw的区别与联系
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多