昨天大意了懶了沒有寫公衆号文章，今天抓緊補上一篇。前天說的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>