# 统一样式快速参考卡
## 📋 CSS文件加载顺序（重要！）
```html
```
## 🎨 主题色
```css
--color-primary: #4CAF50 /* 绿色 - 主色调 */
--color-secondary: #2196F3 /* 蓝色 - 次要色 */
--color-danger: #F44336 /* 红色 - 危险/删除 */
--color-success: #4CAF50 /* 绿色 - 成功 */
--color-warning: #FFC107 /* 黄色 - 警告 */
```
## 🔘 按钮类名
```html
```
## 📝 表单类名
```html
```
## 🖼️ 图片上传和预览
```html
点击或拖拽上传
```
## ✍️ 手写签名
```html
```
## 📊 表格类名
```html
```
## 📦 卡片类名
```html
```
## 📌 标题类名
```html
页面标题
章节标题
子章节标题
```
## 🔧 工具类
```html
居中
左对齐
右对齐
绿色
红色
灰色
间距
Flex
隐藏
块级
```
## 📱 响应式断点
```css
/* 移动端 */
@media (max-width: 768px) { }
/* 超小屏幕 */
@media (max-width: 480px) { }
/* 平板端 */
@media (min-width: 769px) and (max-width: 1199px) { }
/* PC端 */
@media (min-width: 1200px) { }
```
## ⚠️ 注意事项
1. **CSS加载顺序**: unified-styles.css 必须最先加载
2. **避免重复**: 不要重复定义已有的样式
3. **使用变量**: 优先使用 `var(--color-primary)` 而非硬编码
4. **移动端字体**: input/select/textarea 在移动端需要 `font-size: 16px` 防止iOS缩放
5. **图片尺寸**:
- 桌面端: 120x90px
- 移动端: 100x75px
- 超小屏: 80x60px
## 🚀 快速开始新页面
```html
页面标题
```
## 📚 更多参考
- 完整文档: `STYLE_UNIFICATION_GUIDE.md`
- 完成报告: `STYLE_UNIFICATION_COMPLETE.md`
- 批量更新: `add_unified_styles_to_all_pages.php`
---
**提示**: 遇到样式问题时，先检查浏览器开发者工具，确认CSS文件是否正确加载。