第 11 屆 iThome 鐵人賽

DAY 22

2

Software Development

精通 Visual Studio Code系列第 22 篇

DAY 22 CSS 神器 - Emmet

11th鐵人賽 vscode

2019-10-07 00:01:03

1322 瀏覽

分享至

DAY 22 CSS 神器 - Emmet

Emmet 除了能用在 HTML 之外，在 CSS 也很好用，你只需要打幾個字首，然後一樣按下 Enter 它就能幫你打出來。由於 Emmet 提供的東西也很多，所以我大概列出幾個我常用的 Snippet 就好。

視覺排版類

關鍵字	CSS
`pos`	`position:relative;`
`t`	`top:;`
`r`	`right:;`
`b`	`bottom:;`
`l`	`left:;`
`d`	`display:block;`
`d:n`	`display:none;`

Margin & Padding

關鍵字	CSS
`m`	`margin:;`
`mt`	`margin-top:;`
`mr`	`margin-right:;`
`mb`	`margin-bottom:;`
`ml`	`margin-left:;`
`p`	`padding:;`
`pt`	`padding-top:;`
`pr`	`padding-right:;`
`pb`	`padding-bottom:;`
`pl`	`padding-left:;`

other

關鍵字	CSS
`!`	`!important`
`@m, @media`	`@media screen {}`

更多可用的關鍵字

如果你想要知道更多可用的 Emmet 關鍵字，建議你去看 Emmet 的官方小抄。

備註：由於我平常比較少在玩前端，所以常用的 CSS 就比較少一點，如果你是常玩前端的話，相信 Emmet 應該可以加速你的開發速度 ?

DAY 21 HTML 神器 - Emmet (Part 4)

DAY 23 整合式終端機 (Part 1)

系列文

精通 Visual Studio Code 共 31 篇

目錄

RSS系列文訂閱系列文

41 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22202 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙