Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 优先级提权方式、字体和字体图标的应用、盒模型常用属性的缩写
Blogger Information
Blog 64
fans 2
comment 1
visits 47019
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
优先级提权方式、字体和字体图标的应用、盒模型常用属性的缩写
Y的博客
Original
655 people have browsed it

选择器的提权方式

  • 选择器优先级：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.    }
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