2020 July 05 HTML与CSS

CSS第三篇：Emmet插件、CSS特性

Emmet插件

  1. 什么是插件？
    1. 基于某个系统平台或某个软件平台开发的程序，只能在指定的平台运行，不能脱离指定的平台单独运行
    2. 插件的定位是开发实现原平台不具备的功能
    3. 概括：插件是一种可拔插的拓展程序，为其他应用程序增加额外的功能，比如浏览器插件
  2. Emmet作用
    1. 提供了一种非常简洁的语法规则，按下tab键就可以自动生成对应的一大串html、css代码
    2. 可以极大地提高代码编写效率
    3. 他是Zen Coding的升级版，由Zen Coding的原作者开发，功能更加强大

Emmet的基本语法

HTML

  1. !和html:5
    1. 写入!和html5 可以快速生成完整结构的html5代码
  2. >和+

    1. div>ul>li,点击tab：

       <div>
     <ul>
         <li></li>
     </ul>
 </div>

    2. div+p+bq,点击tab：

       <div></div>
 <p></p>
 <blockquote></blockquote>

    3. div+div>p>span+em,点击tab：

       <div></div>
 <div>
     <p><span></span><em></em></p>
 </div>
  3. *和^

    1. ul>li*5

       <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
 </ul>

    2. div+div>p>span+em^h1

       <div></div>
 <div>
     <p><span></span><em></em></p>
     <h1></h1>
 </div>
      1. ^:代表根em的父元素是兄弟关系；如果^^,就是跟em的父元素的父元素是兄弟关系
      2. 如果^很多很多，就跟第一个元素(div)同级
  4. ():分割

    1. div+(div>p>span)+em

       <div></div>
 <div>
     <p><span></span></p>
 </div>
 <em></em>
      1. 效果跟div+div>p>span^^em一样

    2. (div>dl>(dt+dd)*3)+footer>p

       <div>
     <dl>
         <dt></dt>
         <dd></dd>
         <dt></dt>
         <dd></dd>
         <dt></dt>
         <dd></dd>
     </dl>
 </div>
 <footer>
     <p></p>
 </footer>
  5. 属性

    1. div#header+div.page+div#footer.class1.class2.class3

       <div id="header"></div>
 <div class="page"></div>
 <div id="footer" class="class1 class2 class3"></div>

    2. td[title=hello]

       <td title="hello"></td>

    3. td[title="hello world!" colspan=3]

       <td title="hello world!" colspan="3"></td>

    4. td[title colspan]

       <td title="" colspan=""></td>
  6. $:设置索引

    1. ul>li.item$*5

       <ul>
     <li class="item1"></li>
     <li class="item2"></li>
     <li class="item3"></li>
     <li class="item4"></li>
     <li class="item5"></li>
 </ul>

    2. 区别：ul>li.item*5

       <ul>
     <li class="item"></li>
     <li class="item"></li>
     <li class="item"></li>
     <li class="item"></li>
     <li class="item"></li>
 </ul>

    3. ul>li.item$$*5

       <ul>
     <li class="item01"></li>
     <li class="item02"></li>
     <li class="item03"></li>
     <li class="item04"></li>
     <li class="item05"></li>
 </ul>
  7. $@:设置起始值

    1. ul>li.item$@4*3

       <!--从4开始-->
 <ul>
     <li class="item4"></li>
     <li class="item5"></li>
     <li class="item6"></li>
 </ul>
  8. {}:输入内容

    1. a{click}

       <a href="">click</a>

    2. a>{click}

       <a href="">click</a>

    3. a{click}+span{here}

       <a href="">click</a><span>here</span>

    4. a>{click}+span{here}

       <a href="">click<span>here</span></a>
  9. 隐式标签

    1. 在div标签下

       <div>
     .wrap>.content
 </div>
        
 <!--输出-->
 <div>
     <div class="wrap">
         <div class="content"></div>
     </div>
 </div>

    2. ul标签

       ul>.item*3
 <!--输出-->
 <ul>
     <li class="item"></li>
     <li class="item"></li>
     <li class="item"></li>
 </ul>

CSS

1. W200:
    width: 200px;
2. w20+h30+m40:
    width: 20px;
    height: 30px;
    margin: 40px;
3. m20-30-40-50
    margin: 20px 30px 40px 50px;
4. p-10-20--30
    padding: -10px 20px -30px;
5. fz20
    font-size: 20px;
6. fz1.5
    font-size: 1.5em;
7. c#3
    color: #333333;
8. p:% 、 e: em 、x:ex
    w100p => width: 100%;
    m10p30e5x => margin: 10% 30em 5ex;
9. #1 => #111111 #e0 => #e0e0e0 #ec0 => #eecc00
10. p20-30!+m10!
    padding: 20px 30px !important;
    margin: 10px !important;

emmet官方文档查阅

  1. github地址:https://github.com/emmetio/emmet

CSS特性

CSS属性的继承

  1. CSS中有些属性是可以继承的，何为属性继承？
    1. 一个元素如果没有设置某属性值，就会跟随父元素的值
    2. 当然，一个元素如果有设置某属性的值，就是用自己设置的值

  2. 那些样式可以被继承？

     font- 开头
 line- 开头
 text- 开头
 color 颜色
  3. 不能继承的属性，一般可以使用inherit值强制继承
  4. 浏览器的检查中也会标记出当前标签的哪些样式是继承过来的
    1. 打开检查工具，点击p，右边的styles中会出现inherited from div

  5. 代码举例：

     <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         div {
             /* 继承 */
             color: red;
             /* 不继承 */
             width: 200px;
             height: 200px;
             /* 不继承 */
             background-color: blue;
             /* 不继承 */
             border: 2px solid yellow;
         }
            
         p {
             /* border默认不继承父类， inherit强制继承父类*/
             border: inherit;
         }
     </style>
 </head>
 <body>
    
 <div>
     <p>我是p标签</p>
 </div>
    
 </body>

继承的注意点

  1. CSS属性继承的是计算值，并不是当初编写属性时指定的值
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .div1 {
           font-size: 20px;
       }

       .div2 {
           /* 20px * 50% = 10px */
           font-size: 50%;
       }

       .div3 {
           /* 这个继承div2，为10px，继承的是div2的计算结果值 */
           font-size: inherit;

           /* 这个错误，值为10px*50% = 5px */
           /* font-size: 50%; */
       }
    </style>
</head>
<body>
<div class="div1">
    div1
    <div class="div2">
        div2
        <div class="div3">div3</div>
    </div>
</div>

</body>

CSS属性的优先级

CSS属性的层叠

  1. CSS允许多个相同名字的CSS属性层叠同在一个元素上
    1. 层叠的结果：只有一个CSS属性会生效
  2. 浏览器的开发者工具非常清晰的显示了哪个CSS属性会生效
    1. 被覆盖的都会划线
  3. 至于那个CSS属性会生效，取决于CSS属性所处环境的优先级高低
#box {
    color: red;
}

.word {
    color: green;
}

div {
    color: blue;
}
* {
    color: yellow;
}

<div id="box" class="word">一段文字</div>

CSS属性的优先级

  1. 按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）

     !important 10000
 内联样式：1000
 id选择器：100
 类选择器、属性选择器、伪类：10
 类型（标签）选择器、伪元素：1
 通配符：0
  2. 比较优先级的严谨方法：
    1. 从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较
    2. 如果数量相同，比较下一个较小的权值，以此类推
    3. 所有的权值比较完毕后，发现数量相同，就采取“就近原则”
  3. 总结：选择器的针对性越强，优先级越高

  4. 举例：

     <!-- 内联样式有效 -->
 <div id="box" class="word" style="color: gray;">一段文字</div>

pic

  1. 注意：!important 优先级只针对某一个属性

     .word {
         color: green;
         /* 最终显示这个字体 */
         font-size: 20px;
    }

    div {
         color: blue;
    }

    * {
        /* 显示这个颜色 */
         color: yellow !important;
         /* 优先级低 */
         font-size: 50px;
    }
 </style>
  2. 选择器优先级比较：

    1. 例1

       /* 
  1. 先比较权值最大的选择器id，则div.word没有，第一个淘汰
  2. 比较下一个权值比较大的，类选择器.word,则#box 没有，被淘汰
  3. 比较标签选择器div，则.word#box选择器被淘汰
  4. 则div.word#box 权值最大
   */
         
  #box {
       color: green;
  }
  div.word {
       color: yellow;
  }
  div.word#box {
       color: blue;
  }
  .word#box {
       color: red;
  }

    2. 例2：

       /* 2个id选择器，2个类选择器，优先级搞 */
 .five#radio .one #three {
        
 }  
 /* 2个id选择器，一个类选择器，优先级低 */
 #box #btn .four div span {
            
 }
  3. 常见的坑

    1. p标签不能嵌套div标签,div可以嵌套p标签

       p {
    color: red !important;
 }
 <p>
     <!-- 颜色红色 -->
     我是p标签
     <!-- 颜色仍然为黑色，不是浏览器默认设置，而是不支持嵌套 -->
     <div>我是div</div>
 </p>

      1. 如果硬是嵌套了，浏览器会自动生成下面代码，从代码检查可以看到

         <p>我是p标签</p>
 <div>我是div</div>
 <p></p>

    2. a、h标签有浏览器默认样式，不会继承父类样式，即使父类优先级设置!important

       div {
     color:  red !important;
 }
 div>我是div
   <br>
   <span>我是span</span>
   <br>
   <!-- a元素，浏览器有默认设置颜色，不会继承父类颜色 -->
   <a href="http://">a标签</a>
 </div>

CSS属性使用经验

  1. 为何有时候编写的CSS属性不好使，有可能因为：
    1. 选择器优先级太低
    2. 选择器没选中对应的元素
    3. CSS属性使用方法不太对
      1. 元素不支持CSS属性，比如span默认是不支持width和height的
      2. 浏览器不支持此CSS属性，比如旧版的浏览器不支持CSS3的属性
      3. 被同类型的CSS属性覆盖，比如font覆盖font-size
  2. 建议：
    1. 充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错
    2. 比如，在检查工具的styles中用鼠标选中width属性的值，然后按住键盘的上、下箭头或者鼠标滚轮，自动加减值
    3. 在styles中动态添加css样式

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents