欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

【03】emmet系列之CSS语法_html/css_WEB-ITnose

程序员文章站 2022-03-26 13:54:28
...
  【01】emmet系列之基础介绍

  【02】emmet系列之HTML语法

  【03】emmet系列之CSS语法

  【04】emmet系列之编辑器

  【05】emmet系列之各种缩写

单位:

有几个常用值别名:

  • p %
  • e em
  • x ex
  • example:

    输入:

    1. w100p
    输出:

    1. width:100%

    example:

    输入:

    1. m10p30e5x
    输出:

    1. margin:10%30em5ex

    example:

    输入:

    1. h10p+m5e

    输出:

    1. height:10%;margin:5em;

    颜色值:

    1. bd5#0s

    输出:

    1. border:5px#000 solid

    你可以写一个,两个,三个或六个字符的颜色值:

  • #1 #111111
  • #e0 #e0e0e0
  • #fc0 #ffcc00
  • !important修饰符

    您可以添加!在任何CSS缩写,以便获得最终的后缀!important价值:

    1. p !+ m10e !

    输出:

    1. padding :! important ; margin :10 em ! important ;

    浏览器前缀:

    如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入

    1. -bdrs

    输出:

    1. -webkit-border-radius:;
    2. -moz-border-radius:;
    3. -ms-border-radius:;
    4. -o-border-radius:;
    5. border-radius:;

    [魔芋注]在Emmet中我们只需修改旋转属性值的其中一个,再按ctrl+b快捷键,其它相关的属性值也相应的改变。(如果无效,可能与sublime的快捷键冲突,修改之)

    比如输入trs,则会生成:

    1. -webkit-transform:;
    2. -moz-transform:;
    3. -ms-transform:;
    4. -o-transform:;
    5. transform:;

    输入:

    1. trf

    输出:

    1. -webkit-transform:;
    2. -ms-transform:;
    3. -o-transform:;
    4. transform:;


    你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:

    1. -webkit-super-foo:;
    2. -moz-super-foo:;
    3. -ms-super-foo:;
    4. -o-super-foo:;
    5. super-foo:;


    如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:

    1. -webkit-transform:;
    2. -moz-transform:;
    3. transform:;

    前缀缩写如下:

  • w 表示 -webkit-
  • m 表示 -moz-
  • s 表示 -ms-
  • o 表示 -o-
  • 附加属性

    可能你之前已经了解了一些缩写,比如 @f,可以生成:

    1. @font-face {
    2. font-family:;
    3. src:url();
    4. }

    一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成:

    1. @font-face {
    2. font-family:'FontName';
    3. src: url('FileName.eot');
    4. src: url('FileName.eot?#iefix') format('embedded-opentype'),
    5. url('FileName.woff') format('woff'),
    6. url('FileName.ttf') format('truetype'),
    7. url('FileName.svg#FontName') format('svg');
    8. font-style: normal;
    9. font-weight: normal;
    10. }

    模糊匹配


    如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:

    1. overflow: hidden;

    渐变

    输入lg(left, #fff 50%, #000),会生成如下代码:

    1. background-image:-webkit-gradient(linear,00,100%0, color-stop(0.5,#fff), to(#000));
    2. background-image:-webkit-linear-gradient(left,#fff 50%, #000);
    3. background-image:-moz-linear-gradient(left,#fff 50%, #000);
    4. background-image:-o-linear-gradient(left,#fff 50%, #000);
    5. background-image: linear-gradient(left,#fff 50%, #000);

    1. lg(left,#fc0 30%,red)

    输出:

    1. background-image:-webkit-linear-gradient(left,#fc0 30%, red);
    2. background-image:-o-linear-gradient(left,#fc0 30%, red);
    3. background-image: linear-gradient(to right,#fc0 30%, red);

    1. border-image:lg(left,#fc0 30%,red)

    输出:

    1. -webkit-border-image:-webkit-linear-gradient(left,#fc0 30%, red);
    2. -o-border-image:-o-linear-gradient(left,#fc0 30%, red);
    3. border-image:linear-gradient(to right,#fc0 30%, red);

    技巧篇

    1,对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如:

    1. fl →float: left;

    2,编写这些CSS样式时,有很多是我们想好的写法,但生成的不是你想要的,比如position: absolute;,我们会输入pa,生成的就不是position: absolute;,这时我们可以:

    1. poa → position: absolute;

    3,一些用-连接的CSS样式和属性值,都可以取首字母:

    1. whscbs → whitewhite-space-collapse:break-strict;

    4,对于有多个属性值的CSS属性,在编写时只需在属性值之间添加-:

    1. m4-6→ margin:4px6px;
    2. p4-6-8→ padding:4px6px8px;

    5,属性值没有单位的CSS缩写:

    1. lh2 → line-height:2;, fw400 → font-weight:400;

    这些CSS属性有:

    1. z-index, line-height, opacity and font-weight

    6,#是一个值分离器,所以不需要使用连字符分隔它,例如:

    1. bd5#0s → border: 5px #000 solid:

    7,输出默认的CSS样式+,用+操作符,比如:

    1. bg+→ background:#fff url() 0 0 no-repeat;