前面我们聊完了HTML部分的Emmet写法，接下来重点说说CSS的Emmet写法——它同样能帮你省去敲重复属性的力气，尤其是写样式时经常要重复输入的margin、padding、color等属性，用Emmet几秒钟就能搞定。

CSS的Emmet语法和HTML不太一样，它更像是一套「属性缩写规则」，掌握几个核心逻辑后，写样式会变得像「填表」一样简单。

一、CSS Emmet的核心逻辑：属性缩写+值简写

CSS Emmet的本质是：通过简写属性名+简写值，快速生成完整的CSS声明（即属性: 值;）。比如你想写margin: 10px;，用Emmet可能只需要输入m10；想写background-color: #fff;，可能只需要输入bgc#fff。

它的规则可以拆解为：
「简写属性名」 + 「简写值（可选）」 → 按Tab键 → 生成完整的属性: 值;声明

二、常用CSS属性的Emmet缩写对照表（小白必存）

下面按功能分类整理了最常用的CSS属性及其Emmet缩写，搭配例子更容易理解：

1. 盒模型相关（margin/padding/width/height）

这些是布局时最常写的属性，Emmet的缩写直接取属性首字母，值支持数字（默认单位px）或带单位的数值。

你需要写的CSS Emmet缩写 输入后生成的结果 说明
margin: 10px; m10 margin: 10px; m=margin，默认单位px
margin: 20px 15px; m20 15 margin: 20px 15px; 多个值按顺序对应（上 右 下 左 / 上下 左右 等）
padding: 15px; p15 padding: 15px; p=padding
width: 300px; w300 width: 300px; w=width
height: 200px; h200 height: 200px; h=height
margin: 10px 20px 5px 15px; m10 20 5 15 对应四方向值 顺序：上→右→下→左

单位简写：如果不写单位，默认是px；如果想用其他单位（比如em、rem），直接在数字后加单位，例如m1.5em → margin: 1.5em;。

2. 颜色相关（background/color/border-color）

颜色是样式中高频出现的属性，Emmet支持十六进制、RGB、颜色关键词等多种简写。

你需要写的CSS Emmet缩写 输入后生成的结果 说明
background-color: #ffffff; bgc#fff background-color: #fff; bgc=background-color，#fff是白色的十六进制简写（等价于#ffffff）
background: #f0f0f0; bg#f0f0f0 background: #f0f0f0; bg=background（简写背景色，不区分是否带透明度）
color: red; cred color: red; c=color，red是颜色关键词（也支持blue、green等）
color: #333333; c#333 color: #333; 十六进制颜色简写（3位或6位均可）
border-color: #000; bc#000 border-color: #000; bc=border-color

常用颜色关键词：red（红）、blue（蓝）、green（绿）、black（黑）、white（白）、yellow（黄）等，直接写英文即可。

3. 字体与文本（font-size/font-weight/text-align）

排版相关的属性（比如文字大小、粗细、对齐方式）也有一套简洁的缩写。

你需要写的CSS Emmet缩写 输入后生成的结果 说明
font-size: 16px; fs16 font-size: 16px; fs=font-size，默认单位px
font-weight: bold; fwbold font-weight: bold; fw=font-weight，bold是固定值（也可写700）
text-align: center; ta-c text-align: center; ta=text-align，c=center（其他值如l=left，r=right）
text-align: left; ta-l text-align: left; l=left
text-align: right; ta-r text-align: right; r=right
line-height: 1.5; lh1.5 line-height: 1.5; lh=line-height，默认无单位（可写1.5或24px）

对齐值简写：ta-c（居中）、ta-l（左对齐）、ta-r（右对齐）；字体粗细：fw400（正常）、fw700（加粗，等同于bold）。

4. 边框与圆角（border/border-radius）

边框和圆角是常见的装饰属性，Emmet的缩写也很直观。

你需要写的CSS Emmet缩写 输入后生成的结果 说明
border: 1px solid #ccc; bd1s#ccc border: 1px solid #ccc; bd=border，1=宽度，s=solid（实线），#ccc=颜色
border-radius: 5px; br5 border-radius: 5px; br=border-radius，默认单位px
border-top: 2px dashed #999; bdt2d#999 border-top: 2px dashed #999; bdt=border-top，2=宽度，d=dashed（虚线），#999=颜色

边框样式简写：s=solid（实线）、d=dashed（虚线）、dot=dotted（点线）；边框方位：bdt（上）、bdr（右）、bdb（下）、bdl（左）。

5. 布局相关（display/position/flex）

现代布局中，display、position、flex等属性高频出现，Emmet提供了对应的缩写。

你需要写的CSS Emmet缩写 输入后生成的结果 说明
display: flex; df display: flex; df=display: flex;
display: block; db display: block; db=display: block;
display: none; dn display: none; dn=display: none;
position: relative; pr position: relative; pr=position: relative;
position: absolute; pa position: absolute; pa=position: absolute;
flex-direction: row; fd-r flex-direction: row; fd=flex-direction，r=row（也可写c=column）
justify-content: center; jc-c justify-content: center; jc=justify-content，c=center
align-items: center; ai-c align-items: center; ai=align-items，c=center

常用布局值：df（flex布局）、db（块级）、dn（隐藏）；pr（相对定位）、pa（绝对定位）；fd-r（横向排列）、fd-c（纵向排列）；jc-c（主轴居中）、ai-c（交叉轴居中）。

三、CSS Emmet的使用方法（实操步骤）

CSS Emmet通常用在CSS文件或