大多数单行代码都是 CSS 规则中的一个声明。在某些情况下，选择器不仅仅是一个简单的元素；在其他情况下，我会添加额外的声明作为建议，以获得更好的体验，从而使它们不仅仅是一行代码 — — 对于这些情况，我提前表示歉意。
其中一些单行代码更多是个人选择，并不适用于所有网站（并非每个人都使用表格或表单）。我将简要介绍每一种代码、它们的用途（附示例图片）以及我喜欢使用它们的原因。请注意，示例图片可能建立在之前的示例之上。
以下是单行命令的作用摘要：
限制视口内的内容宽度
增加正文文本大小
增加文本行之间的距离
限制图片宽度
限制内容内的文本宽度
以更平衡的方式换行标题
表单控件颜色与页面样式相匹配
易于遵循的表格行
表格单元格和标题的间距
减少动画和动作
限制视口中的内容宽度
body {
max-width: clamp(320px, 90%, 1000px);
/* additional recommendation */
margin: auto;
}
添加这一行代码将减少内容大小以占据视口的 90％，将其宽度限制在 320 到 1000 像素之间（可以随意更新最小值和最大值）。
这一改变将自动让您的内容看起来更加美观。它将不再是一大段文本，而是看起来更加结构化和有条理的内容。如果您还添加了margin: auto;，body内容将在页面上居中。两行代码使内容看起来好多了。
对齐且包含的文本比长篇大论的文本看起来更好
增加文本大小
body {
font-size: 1.25rem;
}
让我们面对现实吧：浏览器默认的 16px 字体大小太小了。虽然这可能是基于我年纪大了而提出的个人观点 😅
一个快速的解决方案是增加正文中的字体大小。由于em浏览器使用级联和单位，网页上的所有文本都会自动增加。
较大的文本使内容更易于阅读。
增加行间距
body {
line-height: 1.5;
}
提高可读性和打破令人讨厌的文本墙的另一种方法是增加段落和内容之间的行间距。我们可以使用line-height属性轻松做到这一点。
行与行之间的空格打破了文本的墙和白色的河流。
这个选择（与前两个选择一起）将大大增加我们页面的垂直尺寸，但我向你保证，文本将更具可读性，对所有用户来说更友好。
限制图像大小
img {
max-width: 100%;
}
图像的大小应与它们所占空间的大小大致相同，但有时，我们得到的图片非常长，这会导致内容移动并产生水平滚动。
避免这种情况的一种方法是将最大宽度设置为 100%。虽然这不是一个万无一失的解决方案（边距和填充可能会影响宽度），但它在大多数情况下都有效。
防止水平滚动，使图像与文本更好地融合
限制内容内的文本宽度
p {
max-width: 65ch;
}
避免可怕的文本墙和空间长河的另一种策略是，即使与正文的最大宽度结合使用，也要应用这种样式。它可能看起来不必要，有时甚至很奇怪，因为段落会比其他元素更窄。但我喜欢这种对比和更短的线条。
过去，60ch 或 65ch 的值对我来说很有效，但您可以使用其他值并调整最大宽度以满足您的需求。播放并探索它在您的网页上的外观。
将较大的文本块分成较小的块以提高可读性
以更平衡的方式换行标题
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
标题是网页结构的重要组成部分，但由于标题较大且内容较短，因此看起来可能很奇怪。尤其是当它们占用多行时。一个有用的解决方案是使用 来平衡标题text-wrap。
尽管 balance 似乎是 text-wrap 最受欢迎的值，但它并不是唯一的值。我们还可以使用pretty，如果需要，它会将多余的单词移到最后一行，而不是平衡所有内容。不幸的是，pretty 尚未获得广泛支持。
平衡包装可以提高可见性和可读性
表单控件颜色与页面样式相匹配
body {
accent-color: #080; /* use your favorite color */
}
另一个小变化没有产生重大影响，但使事情看起来更好。直到最近，我们无法使用 CSS 来设置原生表单控件，只能使用浏览器显示。但事情已经发生了变化。
开发整个组件可能很麻烦，但使用这一行代码就可以直接设置与网站其余部分和设计系统更相似的颜色。
正是这些小细节（和颜色）让页面变得完整
易于遵循的表格行
:is(tbody, table) > tr:nth-child(odd) {
background: #0001; /* or #fff1 for dark themes */
}
我们必须使用表格来显示数据，而不是布局。但表格默认很丑，我们不希望数据看起来丑陋。具体来说，有助于组织数据并使其更易读的一件事是使用深色/浅色行交替的斑马表。
上面显示的一行代码可以轻松实现该样式。它可以简化为仅tr不考虑tbody或table父级，但它也会应用于表头，而我们可能不想要。这是一个品味问题。
更容易水平跟踪数据（按行）
表格单元格和标题的间距
td, th {
padding: 0.5em; /* or 0.5em 1em... or any value different from 0 */
}
最后一个让表格更易于访问和阅读的更改是通过在表格单元格和标题中添加填充来稍微留出空间。默认情况下，大多数浏览器都没有填充，不同单元格的文本会相互接触，让人难以区分一个单元格的开始和另一个单元格的结束。
我们可以改变 padding 值来调整到我们喜欢的大小。但是，不要调整过大，以免造成不必要的滚动或过多的空白。
更容易水平和垂直跟踪数据
减少动画和动作
@media (prefers-reduced-motion) {
*, *::before, *::after {
animation-duration: 0s !important;
/* additional recommendation */
transition: none !important;
scroll-behavior: auto !important;
}
}
好的，好的。这段代码远不止一行代码。它有一个一行版本（通过将动画持续时间设置为零秒来删除动画），但网页上的其他内容会使元素移动。
通过在 prefers-reduced-motion 媒体查询中设置这些声明，我们将尊重用户减少运动的选择。这种方法有些激进，因为它会删除所有运动，这可能不一定是用户的意图 - 它是“减少运动”而不是“无运动”。如果合适，我们仍然可以根据具体情况保留运动。
没有动画？没问题！