search

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

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

一米互联
一米互联原创
2020年12月17日 16:38:24480浏览

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset='UTF-8'>
  5.     <title>选择器的优先级的提权方式</title>
  6.     <style>
  7.         /* 1.声明顺序对优先级的影响*/
  8.          div{
  9.              color: indigo;
  10.             }
  11. /* 在后面有一个相同的声明，根据源码的顺序，后面有效 */
  12.          div{
  13.              color: red;
  14.             }
  15. /* **********************************************/
  16.          /* 2.选择器类型对优先级的影响 */
  17.          .on{
  18.              color: lawngreen;
  19.          }
  20. /************************************************/
  21.         div{
  22.              color: indigo;
  23.            }
  24.         body div{
  25.              color: red;
  26.          }
  27.         .on{
  28.              color: lawngreen;
  29.          }
  30. /* id>class>tag
  31. 计算公式：【id选择器的数量，class选择器的数量，tag选择器的数量】
  32.           body div:[id=0,class=0,tag=2]
  33.           idv:[id=0,class=0,tag=1]
  34.           tag级向class级进位，class级向id级进位
  35.           .on div：[id=0,class=1,tag=1] */
  36. /************************************************/
  37.          /*也可用伪类  :root  代表html*/
  38.          html body div{  /*[0,0,3]*/
  39.              background: lawngreen;
  40.          }
  41.          .on{    /*[0,1,0]*/
  42.              background: rgb(184, 129, 129);
  43.          }
  44.          .on.h{  /*[0,2,0]*/
  45.              background:red;
  46.          }
  47.     </style>
  48. </head>
  49. <body>
  50.     <div class="on h">北京欢迎您！</div>
  51. </body>
  52. </html>

字体与字体图标

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset='UTF-8'>
  5.     <title>字体与字体图标</title>
  6. <!--引入icon小图标，路径不要错-->
  7.     <link rel="stylesheet" href="icon/iconfont.css">
  8.     <style>
  9.    /* 字体 font */
  10.    .font{
  11.    font-family: 'Courier New', Courier, monospace;
  12.    font-size: 40px;
  13.    font-style: italic;   /*斜体*/
  14.    font-weight: lighter; /*细*/
  15.    /* 简写形式 */
  16.    font: italic lighter 40px 'Courier New', Courier, monospace;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <!--引入icon小图标有两种方式，选择了简单的一种。用哪个写哪个的名字-->
  22.     <span class="iconfont icon-kehuguanli"></span>
  23.     <h2 class="font">PHP中文网</h2>
  24. </body>
  25. </html>

盒模型常用属性的缩写

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset='UTF-8'>
  5.     <title>盒模型的属性缩写</title>
  6.     <style>
  7.         .box{
  8.             width: 200px;
  9.             height: 200px;
  10.             background: rgb(224, 169, 169);
  11.             box-sizing: border-box;
  12.         }
  13.         .box{
  14.    /* 边框：每个边框可以设置三个属性：宽度，样式，颜色*/
  15.             border-top-width: 3px;
  16.             border-top-color:skyblue;
  17.             border-top-style: solid;
  18.             /*简写形式*/
  19.             border-top:rgb(0, 38, 255) 10px solid;
  20.             border: 5px dashed yellow;
  21.         }
  22.         .box{
  23.             /*内边距padding:上右下左；顺时针方向*/
  24.             padding: 30px 20px 10px 8px;
  25.             /* 将背景色裁切到内容区 */
  26.             background-clip: content-box;
  27.             /* 左右相等,上下不等 */
  28.             padding: 30px 1px 8px;
  29.             /* 左右相等，上下相等 */
  30.             padding: 5px 30px;
  31.             /* 上下左右都相等 */
  32.             padding: 30px;
  33.             /* 总结：第二个永远表示左右 */
  34.         }
  35.         .box{
  36.       /* 外边距：上右下左，控制多个盒子之间的排列间距 */
  37.             margin: 5px 8px 0px 30px;
  38.              /* 左右相等,上下不等 */
  39.             margin: 30px 1px 8px;
  40.             /* 左右相等，上下相等 */
  41.             margin: 5px 30px;
  42.             /* 上下左右都相等 */
  43.             margin: 30px;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="box"></div>
  49. </body>
  50. </html>
上一条：CSS选择器提权方法及盒模型常用属性下一条：CSS引入方式和选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多