引言
CSS样式声明是构建网页视觉表现的核心。本文将系统介绍最常见的CSS样式属性，包括颜色、字体、文本、尺寸等各个方面，并提供实用的开发技巧和最佳实践。
一、颜色相关样式
1. color - 文字颜色
控制元素内部文字颜色的基本属性：
p {
color: red; /* 预设颜色值 */
color: #ff4400; /* 淘宝红，十六进制表示 */
color: #f40; /* 简写形式 */
color: rgb(255, 68, 0); /* RGB表示 */
}
颜色表示方法对比：
- 预设值：简单直观但选择有限（如red, green, blue）
- 十六进制：最常用，6位或3位简写（#008c8c或#08c）
- RGB：更直观的数字表示（rgb(0,140,140)）
常用颜色速查：
- 黑色：
#000 - 白色：
#fff - 红色：
#f00 - 绿色：
#0f0 - 蓝色：
#00f - 灰色：
#ccc - 紫色：
#f0f - 青色：
#0ff - 黄色：
#ff0
2. background-color - 背景颜色
设置元素背景颜色，语法与color相同：
.header {
background-color: #f8f8f8;
}
实用技巧：使用半透明背景
.modal {
background-color: rgba(0,0,0,0.5); /* 黑色50%透明 */
}
二、字体相关样式
3. font-size - 字体大小
控制文字尺寸的关键属性：
body {
font-size: 16px; /* 绝对单位 */
}
h1 {
font-size: 2em; /* 相对单位，相对于父元素 */
}
单位选择建议：
px：固定尺寸，适合需要精确控制的场景em：相对单位，更灵活但计算复杂rem：相对于根元素(html)的字体大小，推荐使用
4. font-weight - 字体粗细
控制文字粗细程度：
.title {
font-weight: bold; /* 常用预设值 */
}
.subtitle {
font-weight: 700; /* 数字值，相当于bold */
}
注意：不是所有字体都支持数字权重，通常使用normal(400)和bold(700)即可。
5. font-family - 字体类型
指定文字字体：
body {
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
最佳实践：
- 指定多个字体作为后备
- 最后总是添加通用字体族（sans-serif或serif）
- 包含空格的字体名需要加引号
6. font-style - 字体样式
主要用于设置斜体：
.quote {
font-style: italic;
}
.icon {
font-style: normal; /* 覆盖默认斜体 */
}
三、文本相关样式
7. text-decoration - 文本装饰
控制文本装饰线：
a {
text-decoration: none; /* 去除下划线 */
}
.discount {
text-decoration: line-through; /* 删除线 */
}
实用场景：
- 去除链接默认下划线
- 添加删除线表示原价
- 上划线(overline)特殊装饰
8. text-indent - 首行缩进
段落首行缩进：
article p {
text-indent: 2em; /* 推荐使用em单位 */
}
9. line-height - 行高
控制行间距：
p {
line-height: 1.6; /* 无单位值，推荐使用 */
}
.button {
height: 40px;
line-height: 40px; /* 实现单行文本垂直居中 */
}
重要技巧：
- 使用无单位值（如1.5）相对于当前字体大小
- 设置与容器高度相同的line-height实现垂直居中
10. letter-spacing - 字符间距
调整字母/字符间距：
.logo {
letter-spacing: 2px;
}
四、尺寸相关样式
11. width & height - 宽高设置
控制元素尺寸：
.container {
width: 1200px;
height: auto; /* 自动高度 */
}
.card {
width: 50%; /* 相对父元素宽度 */
}
现代CSS推荐：
- 多用
max-width而非固定width - 使用
min-height避免内容溢出 - 考虑使用
vw/vh单位实现视口相关尺寸
12. text-align - 文本对齐
控制文本水平对齐：
.center {
text-align: center;
}
五、综合应用与最佳实践
字体样式简写
body {
font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif;
}
/* 等价于 */
body {
font-style: italic;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
font-family: "Microsoft YaHei", sans-serif;
}
响应式单位选择策略
- 根元素设置基准大小：
html {
font-size: 62.5%; /* 1rem = 10px */
}
- 主要使用rem单位：
h1 {
font-size: 2.4rem; /* 24px */
}
- 需要缩放的元素使用vw/vh：
.hero {
font-size: 5vw;
}
性能优化建议
- 避免过多字体文件请求
- 使用系统字体栈提高加载速度
- 合理使用will-change属性优化动画性能
- 减少不必要的重绘和回流
结语
掌握这些基础样式声明是成为前端开发者的第一步。实际开发中，建议：
- 建立自己的常用样式代码片段库
- 遵循团队CSS编写规范
- 逐步学习更高级的布局和动画样式
- 关注CSS新特性（如CSS变量、网格布局等）
CSS的世界既广阔又精彩，希望本文能为你打下坚实的基础，助你在网页设计的道路上走得更远。
