CSS - 保持简洁！打造专业外观的 3 个核心概念

创建一个专业、简洁的 Web 应用程序并不需要太多。只需遵循以下三个原则以及每个类别中的基本技巧，就能轻松创建出专业的用户界面。今天，我们将探讨以下核心概念：

1. 间距
2. 对比
3. 微妙

间距

间距涵盖诸如padding、margin、line-height和 之类的内容letter-spacing。为元素留出足够的空间可以提高可读性和整洁度。

填充

内边距的大小与您选择的字体大小和行距密切相关。在本例中，我使用了padding: 30px;，但正如您所见，每行文本看起来都有点拥挤。

行高

下一个示例包含line-height: 1.5em。注意到它的可读性提高了多少吗？如果我使用较小的字体大小，那么我可能还会降低行高，甚至可能还会减少填充。

对比

对比度对于易读性和可访问性至关重要。它涵盖了文本和背景颜色之间的差异，以及字体粗细的差异：粗体、半粗体、细体。

颜色对比

让我们看看如果我们降低文本和背景颜色之间的对比度会发生什么。

现在，让我们在黑色 (#000) 和中灰色 (#999) 之间找到中间值。下面，我使用了color: #333;，这样可以稍微降低对比度，以减轻眼睛疲劳。

字体粗细对比

标题h2元素使用字体粗细来与其下方的文本形成对比。

注意，在 上方有额外的空间h2。这是因为默认情况下，h2会在它的上方和下方添加额外的外边距。由于我们已将padding: 30px;整个盒子环绕起来，因此 上方的额外外边距h2不再必要。让我们按照间距概念将其移除。

微妙

任何互补的风格都应该是微妙的。我们以边框为例。

微妙的边界

下面，我们添加了黑色边框，但边框和盒子背景颜色之间的对比度似乎有点太强了。我们希望焦点集中在内容上，而黑色边框会分散一些注意力。

让我们为边框选择一种较浅的颜色。

平滑度

在某些情况下，你可能希望用户界面更加平滑一些。让我们使用 来稍微平滑一下盒子的边角border-radius。

添加微妙的互动

假设我们想告诉用户这个框是可点击的。让我们改变鼠标光标，并在用户将鼠标悬停在框上时添加阴影效果，但要确保效果足够细微！

...让我们通过添加状态之间的过渡时间来增加一些平滑度。我们将添加transition: 0.3s;到我们的容器样式中。

普遍适用性

这三个概念是通用的。这是一个黑暗版本。

...这是另一个简易版本。

概括

看到了吗？彻底改变我们用户界面的外观和感觉并不需要太多。细微的改变就能带来巨大的改变。我们没有使用任何夸张的滤镜或样式。我们保持简洁，并运用了三个核心概念——间距、对比度和细微之处。

我的推特是@eddieaich