WebStorm 快速开发教程 --CSS篇

为了追求开发效率,开发过程中选择一款高性价比的编辑器也是很重要的,个人喜欢使用WebStorm,优点不在赘述,本文的重点是使用webstorm开发过程中的一些快速开发小技巧,希望对你有用.

废话不多说,说正事:平时我们在写CSS样式的时候都是这样的:比如要写width:300px,是不是一个字一个字的敲,嗯,其实还有很便捷的操作:先输入w300然后按下tab键,这个时候奇迹出现了.是不是直接出现了width:300px是不是很强势(这种操所好像不适用于Hbuild,因为Hbuild的数字键默认是选择提示中的信息,所以不怎么好用);.要输入border:1px solid #ccc,输入"bd+" 按下tab全部出现了是不是?

那是不是所有的CSS属性都可以简写的?是的,基本上都是属性和属性值的首字母.也有特殊的,比如por按tab之后是position:relative;pr按tab之后是padding-right;以下是我摸索出来的一些快捷方式: 分享给大家,详情见附注; 空格前面的是简写的方式,后面的时具体的声明;相信大家用熟了写代码一定会6的飞起.

这样操纵有一些注意事项:

1 默认单位为px,如果想输入其他单位,跟在数值后面结课,比如width:2rem的操纵是:输入w2rem 再按下tab就可以了;

2 line - height 的简写方式为 lh加数字,但是完成后要注意带上单位,切记切记,我试了好几款编辑器,都不带单位,我也不知道line-height的默认单位是啥,谁知道告诉我一声;
3 以下简写方式基于WebStorm测试全部准确,WebStorm的强大之一就是可以自动补充兼容的属性值;唯一的缺点就是提示太智能了.可能其他编辑器的简写方式不同,建议慢慢摸索,都会有快捷输入的;这种输入的开发效率杠杠的.

附注:
fs font-style: italic;
fsn font-style: normal;
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder
fz font-size:;
fz30 font-size: 30px;
ff font-family:;
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;
ta text-align: left;
tar text-align: right;
tac text-align: center;
ti text-indent:;
ti2e text-indent: 2em;
di display: inline;
db display: block;
dib display: inline-block;
bp background-position: 0 0;
bg+ background: #fff url() 0 0 no-repeat;
bd+ border: 1px solid #000;
bdrs border-radius;

另外:js的输入中,提示信息出来后,多按enter效率也会快很多的;如果大家还有啥压箱底的技能,一定要分享出来啊.说了这么多,赶紧新建一个CSS文件试试吧!

WebStorm 快速开发教程 --CSS篇

猜你喜欢