CSS 常见样式声明 👌

• 1. 颜色相关属性
  • 1.1 color - 文字颜色
  • 1.2 background-color - 背景颜色
• 2. 字体相关属性
  • 2.1 font-size - 字体大小
  • 2.2 font-weight - 字体粗细
  • 2.3 font-family - 字体类型
  • 2.4 font-style - 字体样式
• 3. 文本相关属性
  • 3.1 text-decoration - 文本修饰
  • 3.2 text-indent - 首行缩进
  • 3.3 line-height - 行高
  • 3.4 letter-spacing - 字符间距
  • 3.5 text-align - 文本对齐
• 4. 尺寸相关属性
  • 4.1 width - 宽度
  • 4.2 height - 高度

1. 颜色相关属性

1.1 color - 文字颜色

设置元素内部文字的颜色。

颜色表示方法

方法	语法	示例	说明
预设值	颜色名称	red, blue, green	浏览器预定义的颜色名称
RGB	rgb(r, g, b)	rgb(255, 0, 0)	红绿蓝三原色，取值 0-255
十六进制	#RRGGBB 或 #RGB	#ff0000 或 #f00	十六进制表示法
RGBA	rgba(r, g, b, a)	rgba(255, 0, 0, 0.5)	带透明度的 RGB
HSL	hsl(h, s%, l%)	hsl(0, 100%, 50%)	色相、饱和度、亮度

常用颜色值

/* 基础颜色 */
.red {
  color: #ff0000;
} /* 红色，简写：#f00 */
.green {
  color: #00ff00;
} /* 绿色，简写：#0f0 */
.blue {
  color: #0000ff;
} /* 蓝色，简写：#00f */
.black {
  color: #000000;
} /* 黑色，简写：#000 */
.white {
  color: #ffffff;
} /* 白色，简写：#fff */

/* 常用颜色 */
.taobao-red {
  color: #ff4400;
} /* 淘宝红，简写：#f40 */
.gray {
  color: #cccccc;
} /* 灰色，简写：#ccc */
.purple {
  color: #ff00ff;
} /* 紫色，简写：#f0f */
.cyan {
  color: #00ffff;
} /* 青色，简写：#0ff */
.yellow {
  color: #ffff00;
} /* 黄色，简写：#ff0 */

1.2 background-color - 背景颜色

设置元素的背景颜色，颜色表示方法与 color 属性相同。

.highlight {
  background-color: #ffff00; /* 黄色背景 */
  color: #000; /* 黑色文字 */
}

.card {
  background-color: rgba(0, 0, 0, 0.1); /* 半透明黑色背景 */
}

2. 字体相关属性

2.1 font-size - 字体大小

设置元素内部文字的尺寸大小。

单位类型

单位	类型	说明	示例
px	绝对单位	像素，固定大小	font-size: 16px;
em	相对单位	相对于父元素字体大小	font-size: 1.2em;
rem	相对单位	相对于根元素字体大小	font-size: 1.2rem;
%	相对单位	相对于父元素字体大小的百分比	font-size: 120%;

.title {
  font-size: 24px; /* 标题：24像素 */
}

.small-text {
  font-size: 0.8em; /* 相对于父元素的80% */
}

::: important 每个元素必须有字体大小。如果没有声明，则继承父元素的字体大小；如果没有父元素（如 html 元素），则使用浏览器的基准字号（通常为 16px）。 :::

2.2 font-weight - 字体粗细

设置文字的粗细程度。

取值方式

值	说明	等效关键字
100-300	细体	lighter
400	正常	normal
500-600	中等粗细	-
700	粗体	bold
800-900	超粗体	bolder

提示：<strong> 元素默认具有 font-weight: bold 样式。

2.3 font-family - 字体类型

设置文字使用的字体。

字体分类

分类	说明	示例
衬线字体	有装饰线的字体	Times New Roman, 宋体
无衬线字体	没有装饰线的字体	Arial, 微软雅黑
等宽字体	每个字符宽度相同	Courier New, Consolas

/* 衬线字体 */
.serif-font {
  font-family: "Times New Roman", "宋体", serif;
}

/* 无衬线字体 */
.sans-serif-font {
  font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

/* 等宽字体 */
.monospace-font {
  font-family: "Courier New", "Consolas", monospace;
}

/* 推荐的中文字体栈 */
.chinese-text {
  font-family: "PingFang SC", /* macOS 中文字体 */ "Microsoft YaHei", /* Windows 中文字体 */
      "Hiragino Sans GB", /* 较老的 macOS 中文字体 */ "WenQuanYi Micro Hei", /* Linux 中文字体 */
      sans-serif; /* 后备无衬线字体 */
}

::: important 重要：必须使用用户计算机中存在的字体才会生效。建议使用字体栈（多个字体）以适配不同操作系统。 :::

2.4 font-style - 字体样式

设置字体的样式，通常用于设置斜体。

.normal-style {
  font-style: normal; /* 正常样式 */
}

.italic-style {
  font-style: italic; /* 斜体 */
}

.oblique-style {
  font-style: oblique; /* 倾斜体 */
}

提示：<i> 和 <em> 元素默认具有斜体样式。在现代开发中，<i> 常用于显示图标（icon）。

3. 文本相关属性

3.1 text-decoration - 文本修饰

给文本添加装饰线。

属性值

值	效果	常用场景
none	无装饰	去除链接下划线
underline	下划线	强调文本
overline	上划线	特殊装饰
line-through	删除线	表示删除或过期内容

.no-decoration {
  text-decoration: none; /* 无装饰，常用于链接 */
}

.underline {
  text-decoration: underline; /* 下划线 */
}

.strikethrough {
  text-decoration: line-through; /* 删除线 */
}

/* 组合使用 */
.multiple-decoration {
  text-decoration: underline overline; /* 上划线 + 下划线 */
}

相关元素：

• <a> 元素默认有下划线
• <del> 元素表示删除的内容，默认有删除线
• <s> 元素表示过期的内容，默认有删除线

3.2 text-indent - 首行缩进

设置首行文本的缩进距离。

.paragraph {
  text-indent: 2em; /* 缩进2个字符 */
}

.article {
  text-indent: 32px; /* 缩进32像素 */
}

.negative-indent {
  text-indent: -1em; /* 负缩进，悬挂缩进效果 */
}

3.3 line-height - 行高

设置每行文本的高度，影响行与行之间的距离。

.normal-line-height {
  line-height: 1.5; /* 相对于字体大小的1.5倍 */
}

.fixed-line-height {
  line-height: 24px; /* 固定行高24像素 */
}

/* 垂直居中技巧 */
.center-text {
  height: 50px;
  line-height: 50px; /* 行高等于容器高度，实现垂直居中 */
}

TIP

技巧：设置行高为纯数字（如 1.5）表示相对于当前元素字体大小的倍数，这是推荐的做法。

3.4 letter-spacing - 字符间距

设置字符之间的间距。

.normal-spacing {
  letter-spacing: normal; /* 默认间距 */
}

.wide-spacing {
  letter-spacing: 2px; /* 增加2像素间距 */
}

.tight-spacing {
  letter-spacing: -1px; /* 减少1像素间距 */
}

.title-spacing {
  letter-spacing: 0.1em; /* 相对间距 */
}

3.5 text-align - 文本对齐

设置元素内部文字的水平对齐方式。

.left-align {
  text-align: left; /* 左对齐（默认） */
}

.center-align {
  text-align: center; /* 居中对齐 */
}

.right-align {
  text-align: right; /* 右对齐 */
}

.justify-align {
  text-align: justify; /* 两端对齐 */
}

4. 尺寸相关属性

4.1 width - 宽度

设置元素的宽度。

常用单位

单位	说明	示例
px	像素，绝对单位	width: 300px;
%	相对于包含块宽度的百分比	width: 50%;
em	相对于当前元素字体大小	width: 20em;
rem	相对于根元素字体大小	width: 20rem;
vw	相对于视口宽度的百分比	width: 50vw;

.fixed-width {
  width: 300px; /* 固定宽度 */
}

.responsive-width {
  width: 80%; /* 响应式宽度 */
}

.full-width {
  width: 100%; /* 全宽 */
}

4.2 height - 高度

设置元素的高度，单位与宽度相同。

.fixed-height {
  height: 200px; /* 固定高度 */
}

.viewport-height {
  height: 100vh; /* 视口高度 */
}

.auto-height {
  height: auto; /* 自动高度（默认） */
}