《CSS常用样式速查手册：让你的网页颜值飙升！》

​刚学完CSS基础语法却不知道从哪下手？这篇整理了最常用的8大CSS样式，5分钟让你从小白变实操达人！

---

一、字体样式（精准控制文字）

p {
  font-family: "Microsoft YaHei", sans-serif; /* 优先微软雅黑 */
  font-size: 16px;    /* 字号 */
  font-weight: bold;  /* 加粗 */
  font-style: italic; /* 斜体 */
  line-height: 1.5;   /* 行高（无单位表示倍数） */
}

/* 简写写法（顺序不能乱！） */
h1 { font: italic 700 24px/1.2 "宋体"; }

​​ 避坑指南：​​

• 中文字体要用引号包裹
• 最后总要加通用字体族（如sans-serif）

---

二、文本样式（排版核心技巧）

.text {
  color: #333;                /* 颜色 */
  text-align: center;         /* 居中/左/右 */
  text-decoration: underline; /* 下划线/删除线 */
  letter-spacing: 2px;        /* 字间距 */
  text-indent: 2em;          /* 首行缩进（推荐em单位） */
}

​​ 实战场景：​​

• text-overflow: ellipsis 实现文字超出显示"..."
• white-space: nowrap 禁止文本换行

---

三、尺寸控制（盒子模型基础）

.box {
  width: 100px;    /* 宽度 */
  height: 60px;    /* 高度 */
  max-width: 100%; /* 响应式必备 */
  min-height: 50vh; /* 最小高度为视口50% */
}

​​⚡ 重要概念：​​

• px：固定像素
• %：相对父元素
• vw/vh：相对视口

---

四、背景样式（高级感秘诀）

header {
  background-color: #f5f5f5;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;  /* 禁止平铺 */
  background-position: center;   /* 图片定位 */
  background-size: cover;        /* 完全覆盖区域 */
}

/* 渐变色高级玩法 */
.gradient-bg {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}

---

五、鼠标交互反馈

.btn {
  cursor: pointer;  /* 手型指针 */
  transition: all 0.3s; /* 悬停动画 */
}

.btn:hover {
  transform: scale(1.05); /* 悬浮放大效果 */
}

​​ 用户友好设计：​​

• cursor: not-allowed 禁用状态
• cursor: zoom-in 放大镜效果

---

六、伪类实战（动态效果）

/* 链接不同状态 */
a:link { color: blue; }     /* 未访问 */
a:visited { color: purple; }/* 已访问 */
a:hover { text-decoration: none; }

/* 列表首元素特效 */
li:first-child {
  font-weight: bold;
  color: red;
}

---

七、透明度控制

.modal {
  opacity: 0.8;       /* 整体透明度 */
  background: rgba(0,0,0,0.5); /* 仅背景透明 */
}

​​ 关键区别：​​

• opacity：影响元素+子元素
• rgba：仅影响当前颜色

---

​​ 下一步建议：​​

1. 用这些样式改造你的HTML作业
2. 在Chrome开发者工具里实时调试
3. 尝试组合使用（如背景图+文字阴影）

下期预告：《CSS布局终极指南：Flex vs Grid全对比》