CSS基础知识（六）格式化代码及工具使用

一、格式化代码

1. Emmet语法
   前身为Zen coding,它使用缩写来提高html/css的编写速度，VSCode内部已经集成该语法，快速生成HTML结构语法和CSS样式语法

2. 快速生成HTML结构语法

• 生成标签，直接输入标签按Tab键即可
• 生成多个相同的标签，标签加星号*键按Tab键
• 父子级关系的标签，可以用大于号>和enter键
• 兄弟关系的标签，可以用加号+和enter键
• 生成带有类名或id名字，可写成标签加.类名/#名加Tab键（p.one生成

  ）

• 生成.div类名是有顺序的，可用自增符号￥
• 生成标签的内部写内容，可用{}表示
  

3.快速生成CSS样式语法

• CSS基本采取简写形式即可（w 200 加Tab生成width: 200px;）
• 单词首字母加Tab键

4.快速格式化代码

• Shift+Alt+F/右键-格式化代码
• 保存页面时自动格式化代码（在设置中的文本编辑器中找到格式，勾选Format On Save即可，也可把Format On Type勾选上）

5.去掉li前面的项目符号

语法  list-style: none;

二、snipaste工具的使用

• 简单强大的截图工具，可以将截图贴到屏幕上
• F1可截图，同时测量大小，设置箭头书写文字等
• F3在桌面置顶显示
• 点击图片，alt可以取色（按下Shift可以切换取色模式）
• 按下esc取消图片显示

三、PS工具的使用

• 网页美工大部分效果图都是利用PS来做的，所以我们大部分切图工具都是在PS里完成的
• 使用
  a. 文件-打开
  b. Ctrl+R 打开标尺
  c. 右击标尺，单位为像素
  d.Ctrl和加号是放大，Ctrl加减号是缩小
  e.按住空格键，鼠标可以变成小手，拖动PS视图
  f.用选区拖动，可以测量大小
  g.Ctrl加D可以取消选区（点击一下旁边空白处也可以取消选区）