昨天大意了懒了没有写公众号文章，今天抓紧补上一篇。前天说的HTML语言中EMMET语法快速生成HTML标签，今天说下快速生成CSS样式。
快速生成CSS样式语法:
CSS基本采取简写形式即可:
1.比如 w200 按下tab键，可以生成 width:200px;
2.比如 lh26 按下tab键，可以生成 line-hight:26px;
第一个的效果如下:
第二个的效果为:
这里需要注意一点:
在样式<style>中，直接使用 w200 或者lh20，再点击tab是没有用的，需要是创建样式代码中才可以，即在大括号中可以使用该快捷键方式。
相当于是每个单词的第一个字母，基本上所有快捷方式都可以使用。
但是在我们初期写代码时，还是要稳扎稳打，尽量手写代码。比如跳槽时对方笔试，很可能就是手写代码。这个时候如果没有掌握基本语法，会很头疼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML语言EMMET语法之快速生成CSS样式</title>
<style>
.one {
/* 宽度 */
width: 200px;
/* 行间距 */
line-height: 20px;
/* 不需要下划线 */
text-decoration: none;
}
</style>
</head>
<body>
</body>
</html>
接下来说下快速格式化代码
写代码时，有时候可能会从别处copy来代码。复制过来的代码有时候样式是不正确的，那么怎么来将代码样式规范化呢？
在VS code中，代码区域右键，选择格式化代码，也可以使用快捷键。
shift+alt+f 也可以设置，当我们保存页面时，自动将代码进行格式化。
- 文件->首选项->设置
- 搜索 emmet.include
- 在settings.json下的【用户】中填写以下语句:
"editor.formatOnType":trye;
"editor.formatOnSave":true; - 只需要设置一次即可，以后都可以自动保存并格式化代码
新版的修改位置在搜索中输入 格式化即可
修改内容为:
{
"workbench.colorTheme": "Default Dark+",
"editor.fontSize": 18,
"editor.formatOnType": true,
"editor.formatOnSave": true,
"emmet.includeLanguages": {
"settings.json": ""
}
}
我们打乱下代码效果:
然后保存试下
展示正常了。
具体对应代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML语言EMMET语法之快速生成CSS样式</title>
<style>
.one {
/* 宽度 */
width: 200px;
/* 行间距 */
line-height: 20px;
/* 不需要下划线 */
text-decoration: none;
}
</style>
</head>
<body>
</body>
</html>
好的，今天就先到这里了，下午见