App.basic.css

/* 基础全局配置 - 适用于快速搭建测试环境 */

/* 全局重置 */
* {
  margin: 0; /* 重置所有元素外边距 */
  padding: 0; /* 重置所有元素内边距 */
  box-sizing: border-box; /* 使用边框盒模型 */
}

/* HTML根元素 */
html {
  font-size: 16px; /* 设置根字体大小，用于rem单位计算 */
  scroll-behavior: smooth; /* 启用平滑滚动 */
}

/* 文档主体 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* 系统字体栈 */
  line-height: 1.6; /* 设置行高提高可读性 */
  color: #333; /* 深灰色文字 */
  background-color: #fff; /* 白色背景 */
  font-size: 16px; /* 基础字体大小 */
  -webkit-font-smoothing: antialiased; /* 优化字体渲染 */
}

/* 标题重置 */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em; /* 标题底部间距 */
  font-weight: 600; /* 中等粗细 */
  line-height: 1.3; /* 紧密行高 */
}

/* 段落间距 */
p {
  margin-bottom: 1em; /* 段落底部间距 */
}

/* 链接样式 */
a {
  color: #0066cc; /* 蓝色链接 */
  text-decoration: none; /* 去除下划线 */
  transition: color 0.2s ease; /* 颜色过渡 */
}

a:hover {
  color: #004499; /* 悬停时深蓝色 */
  text-decoration: underline; /* 悬停时显示下划线 */
}

/* 按钮基础样式 */
button {
  background: #0066cc; /* 蓝色背景 */
  color: white; /* 白色文字 */
  border: none; /* 去除边框 */
  padding: 8px 16px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标指针 */
  font-size: 14px; /* 字体大小 */
  transition: background-color 0.2s ease; /* 背景色过渡 */
}

button:hover {
  background: #004499; /* 悬停时深蓝色背景 */
}

button:disabled {
  background: #ccc; /* 禁用时灰色背景 */
  cursor: not-allowed; /* 禁用时鼠标样式 */
}

/* 表单元素 */
input, textarea, select {
  border: 1px solid #ddd; /* 浅灰色边框 */
  border-radius: 4px; /* 圆角 */
  padding: 8px 12px; /* 内边距 */
  font-size: 14px; /* 字体大小 */
  font-family: inherit; /* 继承字体 */
  outline: none; /* 去除默认轮廓 */
  transition: border-color 0.2s ease; /* 边框颜色过渡 */
}

input:focus, textarea:focus, select:focus {
  border-color: #0066cc; /* 焦点时蓝色边框 */
}

/* 图片响应式 */
img {
  max-width: 100%; /* 最大宽度100% */
  height: auto; /* 自动高度保持比例 */
  display: block; /* 块级元素去除底部空隙 */
}

/* 列表重置 */
ul, ol {
  padding-left: 20px; /* 左侧缩进 */
}

ul {
  list-style-type: disc; /* 实心圆点 */
}

ol {
  list-style-type: decimal; /* 数字序号 */
}

/* 表格样式 */
table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 全宽 */
}

th, td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px 12px; /* 单元格内边距 */
  text-align: left; /* 左对齐 */
}

th {
  background-color: #f5f5f5; /* 表头灰色背景 */
  font-weight: 600; /* 表头加粗 */
}

/* 代码样式 */
code {
  background-color: #f5f5f5; /* 浅灰背景 */
  padding: 2px 4px; /* 内边距 */
  border-radius: 3px; /* 小圆角 */
  font-family: 'Courier New', Courier, monospace; /* 等宽字体 */
  font-size: 0.9em; /* 稍小字体 */
}

pre {
  background-color: #f5f5f5; /* 浅灰背景 */
  padding: 12px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  overflow-x: auto; /* 水平滚动 */
  line-height: 1.4; /* 代码行高 */
}

pre code {
  background: none; /* 重置背景 */
  padding: 0; /* 重置内边距 */
}

/* 引用块 */
blockquote {
  border-left: 4px solid #0066cc; /* 左边蓝色边框 */
  padding-left: 16px; /* 左侧内边距 */
  margin: 16px 0; /* 上下外边距 */
  font-style: italic; /* 斜体 */
  color: #666; /* 深灰色文字 */
}

/* 分割线 */
hr {
  border: none; /* 去除默认边框 */
  height: 1px; /* 高度1像素 */
  background-color: #ddd; /* 浅灰色 */
  margin: 20px 0; /* 上下外边距 */
}

/* 基础工具类 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.hidden { display: none; }
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}