Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1216 优先级提权方式.+字体与字体图标+盒模型属性的缩写
Blogger Information
Blog 13
fans 0
comment 0
visits 8364
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1216 优先级提权方式.+字体与字体图标+盒模型属性的缩写
一米互联
Original
481 people have browsed it

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

  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>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post