CSS重置
如今的浏览器在呈现HTML方面要好得多,因此过去的CSS重置在大多数情况下已经不再必要。然而,默认的浏览器样式在大多数情况下并不是特别好,这就是为什么有很多CSS重置存在的原因。在从其中一些中汲取灵感的基础上,这是我的主观CSS重置,以及我选择包含每个规则的解释。
html {
max-width: 70ch;
margin: auto;
padding: 3em 1em;
font-family: system-ui, 'Segoe UI', Roboto, Cantarell,
'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1.25em;
line-height: 1.75;
}
body {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 3em 0 1em;
}
p, ul, ol {
margin-bottom: 2em;
color: #1d1d1d;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
```css
pre, code, kbd {
font-family: monospace, monospace;
font-size: 1em;
}
html
:max-width
- 使用ch
单位设置最大宽度,使其位于最佳可读范围的中间位置(60-80个字符)。margin
- 将内容居中显示在页面上。padding
- 防止在较小的视口上出现边到边的文本。font-family
- 使用系统字体堆栈以确保最佳的字体渲染效果。system-ui
是一个新的通用字体系列,取代了-apple-system
和BlinkMacSystemFont
。font-size
- 使用较大的字体大小以提高可读性,并跟上最近的设计趋势。line-height
- 使用较大的行高以增加视觉清晰度。body
:margin
- 在所有浏览器中移除默认的边距。h1
-h6
:margin
- 对于标题使用较大的边距以改善视觉层次结构。p
,ul
,ol
:margin-bottom
- 在文本元素之间添加间距。color
- 降低文本颜色的亮度以提高可读性。small
:font-size
- 修正不同浏览器之间的字体大小差异。sub
,sup
:font-size
- 修正不同浏览器之间的字体大小差异。line-height
- 防止元素影响行高。position
- 相对于父元素定位元素。vertical-align
- 将元素与基线对齐。bottom
,top
- 正确地定位元素。pre
,code
,kbd
:font-family
- 对于代码元素使用等宽字体。font-size
- 修正不同浏览器之间的字体大小差异。