CSS 实用技巧 - 第二部分

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

我的第一篇“CSS实用技巧”博客文章反响热烈，现在我带来了第二部分。准备好，一起深入探索CSS的世界吧！

严加管控

对于大多数开发者来说，实现网站的响应式设计是一件非常头疼的事情，因为他们需要编写冗长的代码，其中包含大量的媒体查询。但我有一个妙招可以帮到你们。你们可以使用 `min`、`max` 和 `clamp` 等函数来重构代码。以下代码展示了如何将宽度设置为一个限制值，最小值为 200 像素，最大值为 600 像素，推荐值为 50%。

article {
    width: clamp(200px, 50%, 600px);
}

下图对比展示了我如何运用这个技巧将 13 行代码简化为 1 行代码：

链接伪类

很多开发者和设计师经常忽略这个简单却有效的 CSS 技巧，而这个技巧可以解决访客的可用性问题。

a:link { color: blue; }
a:visited { color: purple; }

伪link:类控制所有尚未被点击的链接，而另一个:visited伪类则处理用户已访问过的所有链接的样式。这能让访客了解他们已访问过的网站区域，以及他们尚未探索的区域。

首字母大写

首字下沉让我想起传统的纸质书籍和报纸。我非常喜欢它，因为它是页面开头呈现文字内容的绝佳方式。第一个大写字母真的能吸引你的注意力。我们可以使用:first-letterCSS 来创建首字下沉效果。以下是一个示例：

p:first-letter {
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  float: left;
  font-size: 6rem;
  line-height: 0.65;
  margin: 0.1em 0.1em 0.2em 0;
}

输出：

悬停效果

这或许很简单，但却非常实用。如果你想让鼠标悬停在某个元素上时高亮显示，可以:hover给按钮、文本链接、代码块或图标添加样式。以下是让鼠标悬停在 h2 标签上时改变其颜色的 CSS 代码示例：

.entry h2{
    font-size:24px;
    color:#000;
    font-weight:700;
}

.entry h2:hover{
    color:#f00;
}

悬停效果过渡

对于网站菜单或图片上的悬停效果，颜色变化过快可能会影响用户体验。理想情况下，我们应该让颜色变化逐渐过渡，而这正是 transition 属性的作用所在。以下代码展示了如何在相同的悬停效果中，使颜色变化在 0.4 秒内完成，而不是瞬间变为红色。

.entry h2 {
  transition: color 0.3s ease;
}

.entry h2:hover{
    color:#f00;
}

这次就到这里啦！非常感谢大家对我的第一篇博客如此热烈的反响。没想到发布仅仅24小时就获得了60多个收藏，真是太惊喜了！如果你还没看过，可以点击这里查看。
在评论区告诉我，你们最喜欢哪个小技巧！

你可以在Twitter和LinkedIn上关注我。