webstorm 高效开发(CSS)
一些开发小技巧:
平时我们在写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;
=========================================================================================
如在 “网络开发方面“ 遇到问题的 或 有项目需求,可加我微信:
(专注:SEO优化营销、网站定制【PC站、微站、手机站、商城】、网络系统定制、微信小程序开发;10年技术经验)