微信小程序开发的css使用规则

微信小程序开发的CSS使用规则

1. 引入 CSS

         <style>
             /*  在这里编写  CSS  代码  */
         </style>
     

2. 选择器

         <selector>  {
             /*  在这里编写  CSS  规则  */
         }
     

3. 颜色值

         color:  #ff0000;  /*  红色  */
         background-color:  #ffffff;  /*  白色  */
     

4. 字体样式

         font-family:  'Arial',  sans-serif;  /*  字体族  */
         font-size:  16px;  /*  字体大小  */
         font-weight:  bold;  /*  字体粗细  */
     

5. 布局样式

         display:  flex;  /*  弹性布局  */
         justify-content:  center;  /*  水平居中  */
          align-items:  center;  /*  垂直居中  */
         width:  100%;  /*  宽度  */
         height:  100%;  /*  高度  */
     

6. 边框样式

         border-width:  1px;  /*  边框宽度  */
         border-style:  solid;  /*  边框样式  */
         border-radius:  10px;  /*  边框圆角  */
     

7. 列表样式

         ul  {
             list-style:  none;  /*  去除列表项前的默认符号  */
         }
     

8. 动画和过渡

         @keyframes  animation-name  {
             0%  {
                 /*  动画起始状态  */
             }
             100%  {
                 /*  动画结束状态  */
             }
         }
         .element  {
              animation:  animation-name  1s  ease;  /*  动画名称、持续时间、缓动函数  */
         }
     

9. 响应式设计

         @media  screen  and  (max-width:  600px)  {
             /*  在这里编写响应式样式  */
         }
     

10. 优化性能

         /*  减少不必要的样式  */
         .hidden  {
             display:  none;
         }
         /*  使用简洁的选择器  */
         .container  >
  .child  {
             /*  在这里编写样式  */
         }