---

在网页设计和开发中，CSS（层叠样式表）起着至关重要的作用，它能够精确控制网页的外观和布局。其中，文本样式和显示属性是CSS的重要组成部分，直接影响着网页内容的可读性和视觉效果。本文将详细介绍CSS样式表中常用的文本样式和显示属性，帮助你更好地掌握这些关键知识点，打造出美观、专业的网页。

---

1. 文字文本样式

1.1 font字体

在 CSS 中，Fonts（字体）属性扮演着极为重要的角色，它主要用于精准定义文本的诸多关键特性，包括字体系列，能让文本呈现出不同的字体风格；大小，可灵活控制文字的尺寸大小；粗细，为文字赋予不同程度的厚重感；以及字体样式（斜体），能让文字展现出倾斜的独特视觉效果。

1.1.1 font-size:字体大小

font-size 属性决定了文本在页面上呈现的大小，用于设置字号大小。

p {  
    font-size:20px; 
}

页面常用的单位是像素（px），谷歌浏览器默认文字的大小是16px。

注意： 不同浏览器可能默认显示的字号大小不一致，尽量给一个明确值大小，不要默认大小。给body指定整个页面文字的大小。

1.1.2 font-family:字体系列

font-family 是 CSS 里用于定义元素中文本所使用的字体系列的属性，用于设置哪一种字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将所有段落文本的字体设置为微软雅黑。

p{ font-family:"微软雅黑";}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准。

p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}

• 常用技巧：

1. 虽然字体类型支持中文，但是还是建议在设置字体的时候尽量使用其英文名称。
2. 各种字体之间必须使用英文状态下的逗号隔开。
3. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
4. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
5. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

• CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。例如 xp 系统不支持类似微软雅黑的中文。所以会用到一些方法来解决这些问题。

• 解决方案一： 你可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。
• 解决方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。

常见字体的对应表格

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

1.1.3 font-weight:字体粗细

在html中，我们可以使用<b>和<strong> 标签来实现文本加粗。现在也可以使用CSS来实现，但是CSS是没有语义的。

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400 等同于 normal，而 700 等同于 bold 我们重点记住这句话

但是，我们平时更喜欢用数字来表示加粗和不加粗。

1.1.4 font-style:字体风格

在html中，我们可以用<i> 和 <em> 标签来实现字体倾斜的。现在也可以使用CSS 来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

属性	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式。

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

1.1.5 font:综合设置字体样式

font 是 CSS 中的一个复合属性，它可以一次性设置多个字体相关的属性，如字体样式、字体粗细、字体大小、行高以及字体系列等，从而简化代码的编写。基本语法格式如下：

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

其中，font-style、font-weight 是可选值，而 font-size 和 font-family 是必需值。

• 在使用 font 复合属性时，font-size 和 font-family 必须同时指定，否则该属性将无效。
• 各属性值的顺序必须严格按照规定的语法顺序书写，否则可能导致样式不生效或出现意外结果。

1.1.6 font总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal
font	字体连写	1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现

1.2 CSS外观属性

1.2.1 color:文本颜色

color 属性是 CSS 中用于设置元素文本颜色的重要属性，用于定义文本的颜色。其取值方式有如下3种：

表示表示	属性值
预定义的颜色值	red，green，blue，pink等
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

注意：实际工作中， 用16进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色。

1.2.2 text-align:文本水平对齐

text-align 属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。

其可用属性值如下：

属性	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

注意： 是让盒子里面的内容水平居中， 而不是让盒子居中对齐。

1.2.3 text-indent:首行缩进

text-indent 属性在 CSS 中主要用于设置块级元素首行文本的缩进量，它可以让文本的排版更加整齐、美观，增强内容的可读性和专业性。

• 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
• 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

1.2.4 text-decoration 文本的装饰

text-decoration 是 CSS 里用于为元素内的文本添加修饰效果的属性，它可以改变文本的外观，起到强调、区分或符合特定设计风格的作用。

值	描述
none	默认。定义标准的文本。 取消下划线（最常用）
underline	下划线，也是我们链接自带的（常用）
overline	上划线（不用）
line-through	删除线（不常用）

1.2.5 line-height:行间距

line-height 属性在 CSS 中用于设置元素内文本行与行之间的垂直间距，也就是行高或行间距。

常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。一般情况下，行距比字号大7.8像素左右就可以了。line-height: 24px;

• 行高的测量方法：

• 单行文本垂直居中

行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。(文字的行高等于盒子的高度。)这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。

行高 = 上距离 + 内容高度 + 下距离

上距离和下距离总是相等的，因此文字看上去是垂直居中的。

• 行高和高度的三种关系

• 如果 行高 = 高度 文字会 垂直居中
• 如果行高 > 高度 文字会 偏下
• 如果行高 < 高度 文字会 偏上

1.2.6 CSS外观属性总结

属性	表示	注意点
color	颜色	我们通常用 十六进制 比如 而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住 添加 下划线 underline 取消下划线 none

2. CSS 背景(background)

2.1 背景颜色(color)

background-color 属性是 CSS 里用于设置元素背景颜色的属性，允许开发者为 HTML 元素的背景区域指定单一的颜色。该颜色会填充元素的内容区、内边距（padding）区域，但不包括外边距（margin）区域，从而改变元素在页面上的外观。

background-color:颜色值;   

默认的值是 transparent 透明的，也可以手动指定背景色为透明色。

2.2 背景图片(image)

background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片（比如精灵图技术）或者是超大的背景图片，优点是非常便于控制位置。

background-image : none | url (url) 

参数	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

background-image : url(images/demo.png);

• 小技巧： 我们提倡背景图片后面的地址，url不要加引号。

2.3 背景平铺（repeat）

background-repeat 属性在 CSS 里主要用于控制背景图像的重复方式，当你为元素设置了背景图像，且该图像尺寸小于元素大小时，此属性就决定了图像会如何在元素的背景区域内重复显示。

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

2.4 背景图片位置(position)

background-position属性在 CSS 中主要用于精确控制背景图像在元素背景区域内的初始位置。通过该属性，开发者能够灵活地调整背景图像的显示位置，以满足不同的设计需求

background-position : length || length
background-position : position || position 

参数	值
length	百分数 | 由浮点数字和单位标识符组成的长度值
position	top | center | bottom | left | center | right 方位名词

注意：

• 必须先指定background-image属性
• position 后面参数是x坐标和y坐标。 可以使用 方位名词 或者 精确单位。

• 参数是方位名词（position）：

• 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致

background-position : center right
background-position : right center
/* 这两个是等价的，没有先后顺序。 */  

• 如果只指定了一个方位名词，另一个值默认居中对齐。

background-position : right
/* 水平方向右对齐，垂直方向默认居中 */

• 参数是精确单位（length）：

如果 position 后面是精确坐标， 那么第一个肯定是 x， 第二的一定是y。

  background-position : 20px 50px;  

如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

 background-position : 20px;

• 参数是混合使用的：

如果指定的两个值是 精确单位和方位名字 混合使用，则第一个值是x坐标，第二个值是y坐标

实际工作用的最多的，就是背景图片居中对齐了。

2.5 背景附着（固定）

background-attachment 属性用于定义背景图像的滚动行为，即当页面滚动时，背景图像相对于元素或视口的位置如何变化。即背景图像是否固定或者随着页面或者随着页面的其余部分滚动。

background-attachment : scroll | fixed 

参数	作用
scroll	背景图像是随对象内容滚动（默认）
fixed	背景图像固定

2.6 背景简写(复合写法，建议)

background 是 CSS 中的一个复合属性，允许一次性设置多个与背景相关的样式，包括背景颜色、背景图像、背景重复方式、背景位置和背景附件等。

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

2.7 背景半透明(CSS3)

CSS3 提供了背景颜色半透明的效果。即

background: rgba(0, 0, 0, 0.3);

• 最后一个参数是alpha 透明度 取值范围 0~1之间
• 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
• 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
• 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。

2.8 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat（平铺）/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll（滚动）/fixed（固定）
背景简写	更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

3. 标签显示模式（display）

3.1 标签显示模式

在 HTML 和 CSS 中，标签的显示模式（也称为元素的显示类型）决定了元素在页面中如何布局以及与其他元素的交互方式。主要分为块级元素、行内元素和行内块元素三种。比如div 自己占一行， 比如span 一行可以放很多个。

标签的类型(分类)：HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

3.2 块级元素(block-level)

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

• 比较霸道，自己独占一行
• 高度，宽度、外边距以及内边距都可以控制。
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或者块级元素。

• 注意：

• 文字类的元素内不能使用块级元素；
• <p>标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>；
• 同理还有这些标签<h1> ~ <h6>，他们都是文字类块级标签，里面不能放其他块级元素。

3.3 行内元素(inline-level)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也称作内联元素。

• 相邻行内元素在一行上，一行可以显示多个。
• 高、宽直接设置是无效的。
• 默认宽度就是它本身内容的宽度。
• 行内元素只能容纳文本或则其他行内元素。

• 注意：

• 链接里面不能再放链接。
• 特殊情况<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

3.4 行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

• 相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个。（行内元素特点）
• 默认宽度就是它本身内容的宽度。（行内元素特点）
• 高度，行高、外边距以及内边距都可以控制。（块状元素特点）

3.5 三种模式总结区别

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

3.6 标签显示模式转换 display

有时候需要改变 HTML 标签的默认显示模式，以满足特定的布局和设计需求。可以使用 CSS 的 display 属性来实现标签显示模式的转换。

• 块转行内：display:inline;
• 行内转块：display:block;
• 块、行内元素转换为行内块： display: inline-block;

4. 补充

4.1 开发者工具（chrome）

Chrome 开发者工具是一款内置于 Google Chrome 浏览器中的强大工具集，它为网页开发者提供了丰富的功能，极大地提升了网页开发、调试和优化的效率。

• 启用方式

• 快捷方式：在网页上右键单击，选择 “检查”；或者使用快捷键，Windows 和 Linux 系统下是 Ctrl + Shift + I，Mac 系统下是 Cmd + Opt + I。
• 菜单方式：点击 Chrome 浏览器右上角的三个点，依次选择 “更多工具” > “开发者工具”。

• 主要面板及使用场景

元素（Elements）面板

• 可以看到网页的 HTML 结构，展开各个节点查看详细内容。直接在 DOM 树上修改元素的标签、属性和文本内容，修改结果会立即在页面上呈现。例如，将某个按钮的文本从 “点击” 改为 “立即点击”，观察页面效果。
• 查看和修改 CSS 样式。选中某个元素后，右侧会显示应用到该元素的所有 CSS 样式，包括内联样式、内部样式表和外部样式表中的样式。直接在样式规则中修改属性值，如颜色、字体大小等，实时预览样式变化。还可以通过勾选或取消勾选样式规则前的复选框来启用或禁用该规则。面板下方会以可视化的方式展示元素的盒模型，包括内容区、内边距、边框和外边距，方便调整布局。

---

控制台（Console）面板

• 输出调试信息：在 JavaScript 代码中使用 console.log()、console.error()、console.warn() 等方法输出信息到控制台，方便查看程序运行状态和变量值。
• 执行 JavaScript 代码：可以在控制台输入 JavaScript 命令并执行，直接与页面上的元素和变量进行交互。比如，在控制台输入 document.body.style.backgroundColor = 'lightblue' 可以将页面背景颜色改为浅蓝色。
• 查看错误和警告信息：当网页存在 JavaScript 错误或警告时，控制台会显示相应的信息，帮助开发者快速定位问题。

---

源代码（Sources）面板

• 查看和调试代码。可以看到网页加载的所有 HTML、CSS 和 JavaScript 文件，展开文件查看代码内容。在 JavaScript 代码中设置断点，当代码执行到断点处时会暂停，方便逐行调试代码。可以查看变量的值、调用栈等信息。使用调试工具的单步执行按钮（如 “单步跳过”、“单步进入”、“单步跳出”），控制代码的执行流程，深入分析代码的执行过程。
• 将浏览器中的文件与本地开发环境中的文件进行映射，在开发者工具中修改代码后会自动同步到本地文件，提高开发效率。

---

网络（Network）面板

• 监控网络请求：打开该面板后重新加载页面，会记录所有的网络请求，包括请求的 URL、请求方法、状态码、响应时间等信息。
• 分析请求性能：查看每个请求的详细信息，如请求头、响应头、响应内容等。通过分析请求的时间线，找出加载时间较长的资源，优化资源加载顺序和减少不必要的请求。
• 模拟网络环境：在面板的设置中可以选择不同的网络环境，如慢 3G、快 3G 等，测试网页在不同网络条件下的性能表现。

---

性能（Performance）面板

• 录制性能数据：点击 “录制” 按钮，然后在页面上进行一些操作，录制完成后会生成一份性能分析报告。
• 分析性能指标：报告中会显示页面的加载时间、脚本执行时间、渲染时间等性能指标，通过查看火焰图、时间线等图表，找出性能瓶颈，优化代码和资源加载。

---

内存（Memory）面板

• 检测内存泄漏：通过录制堆快照，分析对象的内存占用情况，找出内存泄漏和过度使用内存的问题。
• 查看内存使用时间线：记录内存使用的时间线，展示内存分配和释放的过程，了解内存的动态变化情况。

---

应用（Application）面板

• 管理存储：可以查看和管理网页使用的本地存储（Local Storage）、会话存储（Session Storage）、IndexedDB 等，进行数据的增删改查操作。
• 缓存和服务工作者管理：查看浏览器的缓存内容，清除缓存，注册和调试服务工作者，优化网页的离线支持和缓存策略。

---

安全（Security）面板

• 查看安全信息：显示网页的安全信息，如是否使用 HTTPS、证书信息等。
• 诊断安全问题：当网页存在安全问题时，面板会提供相应的警告和建议，帮助开发者及时发现和解决安全隐患。

• 通过开发人员工具小指针工具，查找页面元素。左侧是html页面结构，右侧是css样式。

• 小技巧

1. ctrl+滚轮 可以 放大开发者工具代码大小。
2. 左边是HTML元素结构 右边是CSS样式。
3. 右边CSS样式可以改动数值和颜色查看更改后效果。
4. ctrl + 0 复原浏览器大小

4.2 emmet语法

Emmet 是一种能显著提高前端开发效率的语法，它使用缩写来快速生成 HTML 和 CSS 代码。

4.2.1 快速生成HTML标签

• 基本标签生成

直接输入标签名，按下 Tab 键，即可生成对应的 HTML 标签。

输入内容	按下 Tab 后的生成结果
div	<div></div>
p	<p></p>
span	<span></span>

• 嵌套标签生成

使用大于号 > 来表示标签之间的父子关系，以此生成嵌套结构的 HTML 标签。

输入内容	按下 Tab 后的生成结果
ul>li	<ul><li></li></ul>
div>p>span	<div><p><span></span></p></div>
nav>ul>li>a	<nav><ul><li><a></a></li></ul></nav>

• 兄弟标签生成

运用加号 + 可以创建同级别的兄弟标签。

输入内容	按下 Tab 后的生成结果
div+p	<div></div><p></p>
header+main+footer	<header></header><main></main><footer></footer>
h1+h2+h3	<h1></h1><h2></h2><h3></h3>

• 重复标签生成

星号 * 用于快速复制标签，生成多个相同的标签。

输入内容	按下 Tab 后的生成结果
li*3	<li></li><li></li><li></li>
p*5	<p></p><p></p><p></p><p></p><p></p>
img*2	<img><img>

• 分组标签生成

使用括号 () 对标签进行分组，明确结构层次，便于生成复杂的 HTML 结构。

输入内容	按下 Tab 后的生成结果
(div>p)+span	<div><p></p></div><span></span>
(header>h1)+(main>article)+(footer>p)	<header><h1></h1></header><main><article></article></main><footer><p></p></footer>
(ul>li*3)+(ol>li*2)	<ul><li></li><li></li><li></li></ul><ol><li></li><li></li></ol>

• 添加属性：类名：使用点号 . 添加类名。

输入内容	按下 Tab 后的生成结果
div.container	<div class="container"></div>
p.text-center	<p class="text-center"></p>
span.highlight	<span class="highlight"></span>

• 添加属性： ID：使用井号 # 添加 ID。

输入内容	按下 Tab 后的生成结果
div#main	<div id="main"></div>
section#hero	<section id="hero"></section>
form#contact-form	<form id="contact-form"></form>

• 添加属性： 自定义属性：通过方括号 [] 添加自定义属性。

输入内容	按下 Tab 后的生成结果
input[type="text"][name="username"]	<input type="text" name="username">
a[href="https://example.com"][target="_blank"]	<a href="https://example.com" target="_blank"></a>
img[src="image.jpg"][alt="An example image"]	<img src="image.jpg" alt="An example image">

• 标签编号

美元符号 $ 可实现标签编号，根据 $ 的数量和位置确定编号的格式和起始位置。

输入内容	按下 Tab 后的生成结果
li.item$*3	<li class="item1"></li><li class="item2"></li><li class="item3"></li>
h$*6	<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
img[src="image$".jpg]*2	<img src="image1.jpg"><img src="image2.jpg">

• 插入文本

使用花括号 {} 插入文本内容，将文本直接放在花括号内。

输入内容	按下 Tab 后的生成结果
a{Click me}	<a>Click me</a>
p{Hello, World!}	<p>Hello, World!</p>
h1{Welcome to my website}	<h1>Welcome to my website</h1>

4.2.2 快速生成CSS样式语法

Emmet 语法在 CSS 编写中同样能显著提升效率。

• 属性缩写

Emmet 为众多 CSS 属性提供了简洁的缩写形式，输入缩写后按 Tab 键就能生成完整的属性和值。

缩写	展开结果	说明
w100	width: 100px;	设置宽度为 100 像素
h50	height: 50px;	设置高度为 50 像素
fz16	font-size: 16px;	设置字体大小为 16 像素
lh2	line-height: 2;	设置行高为 2 倍
m10	margin: 10px;	设置元素的外边距为 10 像素
p20	padding: 20px;	设置元素的内边距为 20 像素
c#f00	color: #ff0000;	设置文本颜色为红色
bgc#0f0	background-color: #00ff00;	设置背景颜色为绿色

可以组合多个属性缩写，一次性生成多个 CSS 属性。

缩写	展开结果	说明
m10p20	margin: 10px; padding: 20px;	同时设置外边距为 10 像素和内边距为 20 像素
w200h100	width: 200px; height: 100px;	同时设置宽度为 200 像素和高度为 100 像素
fz14lh1.5	font-size: 14px; line-height: 1.5;	同时设置字体大小为 14 像素和行高为 1.5 倍

可以通过在数值后添加不同的单位缩写来指定单位。

缩写	展开结果	说明
w50%	width: 50%;	设置宽度为 50%
m1em	margin: 1em;	设置外边距为 1em
lh1.2rem	line-height: 1.2rem;	设置行高为 1.2rem

支持多种颜色值的缩写形式。

缩写	展开结果	说明
#fff	color: #ffffff;	白色
#000	color: #000000;	黑色
rgba(1,2,3,.4)	color: rgba(1, 2, 3, 0.4);	自定义 RGBA 颜色

输入属性名后按 Tab 键，会弹出常见的属性值供选择。

输入	操作	可选择的值示例
display:	按 Tab	block, inline, inline-block, flex, grid 等
float:	按 Tab	left, right, none
position:	按 Tab	static, relative, absolute, fixed, sticky

对于一些需要浏览器前缀的属性，Emmet 会自动补齐。

缩写	展开结果	说明
trs	-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;	过渡效果属性，补齐多个浏览器前缀
trf	-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);	变换属性，补齐多个浏览器前缀

可以使用 Emmet 快速生成一组相关的 CSS 属性。

缩写	展开结果	说明
d:f	display: flex;	开启 Flexbox 布局
d:g	display: grid;	开启 Grid 布局
pos:a	position: absolute; top: 0; left: 0;	设置绝对定位并将元素置于左上角

4.2.3 快速格式化代码

Emmet 本身主要侧重于通过缩写语法快速生成代码，而不是直接用于格式化代码，但在多数支持 Emmet 的代码编辑器里，可以结合编辑器自身的功能来快速格式化使用 Emmet 生成的代码。

• Visual Studio Code

• Emmet 代码生成：在 HTML 或 CSS 文件里输入 Emmet 缩写，按 Tab 键生成代码。例如，输入 ul>li*3 再按 Tab，会生成相应的 HTML 列表代码。
• 代码格式化：
  • 快捷键方式：在 Windows 和 Linux 系统下，使用 Shift + Alt + F 快捷键；在 Mac 系统下，使用 Shift + Option + F 快捷键。
  • 命令面板方式：按下 Ctrl + Shift + P（Windows、Linux）或 Cmd + Shift + P（Mac）打开命令面板，输入“Format Document”并回车执行，即可对当前文件的代码进行格式化。
• 设置默认格式化程序：若有多个格式化程序可供选择，可点击编辑器右下角的格式化程序名称，选择合适的格式化程序，如“Prettier”等，之后再进行格式化操作。

• WebStorm

• Emmet 代码生成：输入 Emmet 缩写按 Tab 生成代码，例如输入 ol>li*4 按 Tab 生成有序列表代码。
• 代码格式化：
  • 快捷键方式：使用 Ctrl + Alt + L（Windows、Linux）或 Cmd + Alt + L（Mac）快捷键。
  • 菜单方式：通过菜单栏选择“Code” -> “Reformat Code”，就能对代码进行格式化。

---

通过本文对CSS样式表常用文本样式和显示属性的详细介绍，相信你对如何使用CSS来控制文本的外观和布局有了更深入的理解。在实际的网页开发中，合理运用这些属性可以让你的网页更加美观、易读，提升用户体验。

---