CSS中的emmet语法（使用缩写的方式提高书写html编写速度）

使用CSS的emmet语法：使用缩写的方式提高书写html编写速度。
（1）快速生成html结构语法：

如果想要生成多个相同的标签，加上“*”就可以了，如div*3，生成三个div。
如果有父子关系的标签，可以用>比如，ul>li就可以了；
如果有兄弟关系的标签，用+就可以了，比如div+p;
如果生成带有类名或者id名字，直接写.demo或者#two tab键就可以了；
如果生成的div类名是有顺序的，可以用自增符号$

.
（2）快速生成CSS样式语法：

比如w200 按tab可以生成width：200px;
比如lh26 按tab可以生成line-height：26px;

（3）快速格式化代码；Shift+Alt+F
或者可以这样做：
设置当我们保存页面的时候自动格式化代码：
文件->首选项->设置
搜索emmet .include;
在settings.json下的【用户】中添加以下语句：

"editor.formatOnType":true,
"editor.formatOnSave":true

设置这一次即可，以后只需要自动保存格式化。

{"cssrem.rootFontSize": 37.5,"emmet.excludeLanguages": [],"editor.formatOnType": true,"editor.formatOnSave": true,"markdown"
}

CSS中的emmet语法（使用缩写的方式提高书写html编写速度）相关推荐

CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）
CSS基础 1. emmet 语法 -- 开发效率 1.1 emmet 语法生成 html 标签 emmet 的特点和作用是什么? 通过简写提高编码效率. emmet 生成 HTML 结构语法序号 ...
css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Position属 ...
html5 css透明效果,css中实现背景透明的三种方式
css中实现背景透明通常有如下3种方式,以下是这三种方式的不透明度为80%的写法: css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, g ...
css中脱离标准流的三种方式,CSS的三种手段让元素脱离标准本文档流
1.浮动浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...
css中脱离标准流的三种方式,CSS——脱离标准流方法一：浮动
浮动是css里面布局用的最多的属性. 浮动语句: float:left; 左浮动 float:right; 右浮动 1.没有浮动的时候 2.两个盒子都左浮动浮动的元素脱标,那么就能并排了,并且能 ...
芯片手册中的英语言学——寄存器缩写命名方式探究
今日在暴啃芯片手册!其中最令人头疼的就是成百上千的寄存器英文缩写. 在实际学习过程中会发现,很多寄存器会加上三个四个甚至更多的英文缩写字母作为后缀,而其很多时候百度并不一定能查询到全拼!这使得我们在学 ...
CSS中隐藏页面元素的几种方式和区别
前言. 在平常的样式排版中,我们经常遇到将某个模块隐藏的场景,通过css隐藏的元素方法有很多种,它们看起来实现的效果是一致的,但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪 ...
以CSS方式提高您网站的速度
目录优化字体怎么修复 Google字体的字体显示呈现可以首先看到的内容这个怎么运作? 考虑元素初始高度奖励:本地延迟加载图像和iframe(HTML方式) 结论在本文中,我们将讨论如何仅用 ...
Emmet语法——HTML和CSS快速生成代码/VS code如何快速格式化代码
前言:本篇文章简单讲述了HTML和CSS中的Emmet语法,更多详细语法内容可以参见此文章 https://code.z01.com/Emmet/ Emmet 语法 Emmet语法的前身是Zen co ...

CSS中的emmet语法（使用缩写的方式提高书写html编写速度）

CSS中的emmet语法（使用缩写的方式提高书写html编写速度）相关推荐

最新文章

热门文章