/** * CSS Reset - 基础样式重置 * * 职责:规范化浏览器默认样式,建立一致的基础 * 作用域:全局 * 依赖:variables.css(可选,主要用于一致性) */ /* ==================== Box Model 规范 ==================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ==================== HTML & Body 基础设置 ==================== */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body { font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-base); color: var(--color-text-primary); background-color: var(--color-bg-base); overflow-x: hidden; } /* ==================== 语义化标签重置 ==================== */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); } p { margin-bottom: 0; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-hover); } ul, ol { list-style: none; } /* ==================== 表单元素重置 ==================== */ button, input, textarea, select { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; border: none; background: none; outline: none; } button { cursor: pointer; user-select: none; } button:disabled { opacity: var(--disabled-opacity); cursor: var(--disabled-cursor); } input:focus, textarea:focus, select:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ==================== 图片与媒体 ==================== */ img, svg, video, canvas { display: block; max-width: 100%; height: auto; } /* ==================== 表格重置 ==================== */ table { border-collapse: collapse; border-spacing: 0; width: 100%; } th, td { text-align: left; vertical-align: top; } /* ==================== 其他元素 ==================== */ hr { border: 0; border-top: 1px solid var(--color-border-light); margin: var(--spacing-md) 0; } code, pre { font-family: var(--font-family-monospace); font-size: 0.9em; } blockquote { margin: 0; padding-left: var(--spacing-md); border-left: 4px solid var(--color-border-medium); } /* ==================== 滚动条样式(Webkit) ==================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--color-border-medium); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--color-border-dark); } /* ==================== 文本选择 ==================== */ ::selection { background-color: var(--color-selection-bg); color: var(--color-text-primary); } ::-moz-selection { background-color: var(--color-selection-bg); color: var(--color-text-primary); } /* ==================== 辅助功能 ==================== */ /* 隐藏但对屏幕阅读器可见 */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* 移除 focus 时的 outline(仅在非键盘导航时) */ :focus:not(:focus-visible) { outline: none; } /* ==================== 打印样式 ==================== */ @media print { *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; } abbr[title]::after { content: " (" attr(title) ")"; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }