WebStorm快速编码HTML5+CSS3代码快捷键

HTML快捷键+tab键自动补齐

• 直接键入标签名称
• 加类名 div.className
• 加id名 div.idName
• 父子关系 ul>li
• 兄弟关系 img+a
• $符号,会从0-n自动填充 (div.className$)*6
• *符号,会复制同类多个标签 ul>li*6

CSS快捷键+tab键自动补齐

文字属性

• font-style
  • fs font-style: italic;
  • fsn font-style: normal;
• font-weight
  • fw font-weight:;
  • fwb font-weight: bold;
  • fwbr font-weight: bolder;
• font-size
  • fz font-size:;
  • fz30 font-size: 30px
• font-family
  • ff font-family: ;
• font缩写
  • font: style weight size family;
  • font: italic bold 10px "楷体";

ps注意点:

1. 在这种缩写格式中有的属性值可以省略sytle可以省略,weight可以省略
2. 在这种缩写格式中style和weight的位置可以交换
3. 在这种缩写格式中有的属性值是不可以省略的,size不能省略,family不能省略
4. size和family的位置是不能顺便乱放的,size一定要写在family的前面, 而且size和family必须写在所有属性的最后

文本属性

• text-decoration

  • td text-decoration: none;
  • tdu text-decoration: underline;
  • tdl text-decoration: line-through;
  • tdo text-decoration: overline;

• text-align

  • ta text-align: left;
  • tar text-align: right;
  • tac text-align: center;

• text-indent

  • ti text-indent:;
  • ti2e text-indent: 2em;

颜色属性

• color
  • c color: #000;

ps注意点:颜色的取值有4种方式

1. 英文单词.如white, black, blue, green, red等等
2. rgb三原色.其中r(red 红色) g(green 绿色) b(blue 蓝色)
3. rgbg.a(alpha)代表透明度
4. 16进制.如 #fff, #f12345

CSS的显示模式

• display
  • di display: inline;
  • db display: block;
  • dib display: inline-block;

ps注意点:

1. 块级元素(block)
   • 独占一行
   • 如果没有设置宽度, 那么默认和父元素一样宽
   • 如果设置了宽高, 那么就按照设置的来显示
2. 行内元素(inline)
   • 不会独占一行
   • 如果没有设置宽度, 那么默认和内容一样宽
   • 行内元素是不可以设置宽度和高度的
3. 行内块级元素(inline-block)
   • 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素

背景颜色

• background-color
  • bc background-color: #fff;

背景图片

• background-image
  • bi background-image: url();

背景平铺

• background-repeat
  • bgr background-repeat:
  • bgrx background-repeat: repeat-x;
  • bgry background-repeat: repeat-y;
  • bgrn background-repeat: no-repeat;

ps注意点:

1. repeat 默认, 在水平和垂直都需要平铺
2. no-repeat 在水平和垂直都不需要平铺
3. repeat-x 只在水平方向平铺
4. repeat-y 只在垂直方向平铺

背景关联

• background-attachment

• ba background-attachment:;
• bas background-attachment: scroll;
• baf background-attachment: fixed;

背景连写

• background缩写(背景颜色 背景图片 平铺方式 关联方式 定位方式)
  • bg+ background: #fff url() 0 0 no-repeat;

ps背景图片和插入图片的区别

1. 背景图片仅仅是一个装饰, 不会占用位置
   插入图片会占用位置
2. 背景图片有定位属性, 所以可以很方便的控制图片的位置;插入图片没有定位属性, 所有控制图片的位置不太方便
3. 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

边框

• border
  • bdt border-top:;
  • bdr border-right:;
  • bdb border-bottom:;
  • bdl border-left:;
  • bd+ border: 1px solid #000;
• border-xx-xx
  • btw border-top-width:;
  • bts border-top-style:;
  • btc border-top-color: #000;

ps类似的还有border-direction-attribute

外边距

• padding
  • pt padding-top:;
  • pr padding-right:;
  • pb padding-bottom:;
  • pl padding-left:;

内边距

• margin
  • mt margin-top:;
  • mr margin-right:;
  • mb margin-bottom:;
  • ml margin-left:;

浮动

• float
  • fl float: left;
  • fr float: right;

定位

• psa position: absolute;
• ps position: relative;