每个 Web 开发人员都应该知道的 10 个 CSS 技巧

2025-06-07

每个 Web 开发人员都应该知道的 10 个 CSS 技巧

根据 Redmonk 的调查，CSS（层叠样式表）仍然是十大编程语言之一（它建立在软件开发人员在科技行业日益增长的影响力这一前提下），尽管它不如 JavaScript 那么流行。CSS 在网站开发人员中很受欢迎，因为它非常健壮、相对容易学习，并且在不同的浏览器中无处不在。
与任何编程语言一样，CSS 也有很多快捷方式或技巧，可以帮助您编写更简洁的代码、改进设计组件并节省时间。您也可以使用代码编辑器将这些代码片段直接粘贴到您的网站中。
同样值得注意的是，CSS 并不需要您是高级 Web 开发人员。根据 W3Techs 的调查，96% 的网站都在使用 CSS，并且能够使用 CSS 来改进网站的布局和设计对于 WordPress 等主要开源内容管理系统 (CMS) 的功能至关重要。
事实上，大多数流行的网站构建器（它们以倡导“所见即所得”或 WYSIWYG 理念而臭名昭著）现在都允许用户插入自定义 CSS 代码。
如果您是 CSS 新手，那么这些技巧会对您大有裨益。如果您已经了解 CSS 的基础知识，那就让我们从这十个 CSS 技巧开始吧。

1. 如何在 CSS 中固定元素位置

尽管网站是动态的，但您可能希望移动某些项目。使用position:absolute脚本可以实现这一点。
但是，请谨慎使用此策略，并在实施之前在所有屏幕尺寸和分辨率上进行测试，以免破坏网站的设计。
遵循此脚本并使用精确的position节点可以确保元素在所有用户面前都保持在相同的位置。
示例：

.sidebar {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 300px;
  height: 150px;
}
Enter fullscreen mode Exit fullscreen mode

2. 如何使用 CSS 将内容置于中心

将内容放置在屏幕中央可能比较困难。不过，您可以使用position:absolute覆盖动态定位，让内容始终显示在屏幕中央。
该设置适用于任何分辨率的设备。请务必仔细检查所有内容是否位于正确位置，以及即使在小屏幕上，元素是否看起来自然。
例如：

section {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
}
Enter fullscreen mode Exit fullscreen mode

3. 如何在 CSS 中编辑单个页面上的样式

如果您使用 CMS 系统，并且希望某些文章看起来与其他文章有所不同，则可以使用自定义类来覆盖网站的 CSS 样式。这样可以确保您只对某个文章页面进行更改，而不会影响其他文章页面。
当您在 WordPress 博客上发布文章时，文章的 ID 会以类的形式包含在正文中，例如：

图片描述
然后，您可以执行如下操作来更改该帖子页面的样式：

.postid-330 {
  font-size: 24px;
  font-weight: 750;
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

在其他主流 CMS 中，自定义类可以添加到单个帖子中。例如，Ghost 允许您将帖子指定为精选帖子，并为其添加 .featured 类。
如果您想频繁使用此方法，则应修改主 CSS 样式表以避免编写额外的代码。
这不仅限于 CMS；如果您有一个包含许多 HTML 文件的简单网站，则可以使用同一个 CSS 文件将特定样式应用于整个项目中的元素。
例如，如果您有一个包含 .landing 类的页面：

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <title>Landing Page</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="css/style.css" rel="stylesheet" />
  <body class="landing">
    <h1>Landing Page</h1>
    <p>My landing page.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

另一个是 .about 类：

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <title>About Page</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="css/style.css" rel="stylesheet" />
  <body class="landing">
    <h1>About Page</h1>
    <p>My about page.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

您可以将其添加到主样式表中，以便仅调整关于页面上的样式：

.about {
  font-size: 24px;
  font-weight: 750;
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

4. 如何在 CSS 中让图像适合页面

没有什么比图片溢出到网站访客的屏幕上更让人恼火的了。这会严重破坏网站的外观，甚至让访客望而却步。
不过，您可以使用这个简单的技巧，确保图片始终适合访客的屏幕，无论他们使用什么设备。

img {
  max-width: 100%;
  height: auto;
}
Enter fullscreen mode Exit fullscreen mode

5. CSS 中的访问链接样式

用户点击的已访问链接的默认样式可能与您当前网站的样式不兼容。您可以使用 CSS 代码更改链接在用户点击前后的外观。
然后，您可以将这些外观与网站的整体美感相结合，打造独特的体验。
示例：

a:link {
  color: #ff0000; /* the unvisited link is red */
}
a:visited {
  color: #ee82ee; /* the visited link turns violet */
}
Enter fullscreen mode Exit fullscreen mode

6. 如何在 CSS 中合并样式

如果您知道要将 CSS 样式应用于多个对象，那么逐个编写代码会非常耗时。当您使用逗号分隔各个对象并在其中编写 CSS 样式时，该样式会应用于所有对象。
由于您无需多次编写相同的代码，因此可以节省时间并减少代码量。
例如：

/* suppose you want to add a solid border around your caption element, image, and paragraph element */
.caption, img, p {
  border: 2px solid #000000;
}

/* you can also limit the selection using selectors */
p.white-text, div > p.unique {
  color: white;
  font-size: 24px;
}
Enter fullscreen mode Exit fullscreen mode

7. CSS 中的首字母样式

它的作用是吸引读者的注意力，激发他们阅读第一行的兴趣。
虽然这种风格可能看起来有些过时，但你仍然可以将其设计得更具现代感，并充分利用它对访客的心理影响。此外，由于首字下沉选项已集成到 CSS 语言中，你可以利用它轻松地为段落赋予新面貌。
例如：

p:first-letter {
  display: block;
  float: left;
  margin: 5px;
  color: #000000;
  font-size: 60px;
}
Enter fullscreen mode Exit fullscreen mode

8. 如何在 CSS 中禁用文本换行和添加省略号

如果空间不足，您可能需要截断文本以适应其他部分。您可以手动调整每个文本元素，但这需要时间，并且需要反复尝试。
您可以结合使用溢出、空格和文本溢出，在文本中创建自然的断行，使其易于阅读。
以下示例设置了文本宽度限制，隐藏了溢出部分，禁用了文本换行，并添加了省略号 (...) 以指示用户还有更多文本内容。示例
：

.product-description {
max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
Enter fullscreen mode Exit fullscreen mode

9. CSS 中的悬停效果延迟

:hover 选择器是一个 CSS 伪类，可用于为页面添加悬停效果。但是，通过添加过渡元素来延迟悬停效果，可以使其更加时尚。
它不仅看起来美观，还能给用户的眼睛带来一种动感，从而吸引他们的注意力。
例如：

.entry h2 {
  font-size: 48px;
  color: #000000;
  font-weight: 750;
}

/* Next, add a delay to the hover effect */
.entry h2:hover{
  color: #f00;
  transition: all 0.5s ease;
}
Enter fullscreen mode Exit fullscreen mode

10. 如何重置 CSS 样式

最后但同样重要的一点是，为了让你的设计在多个浏览器中完美运行，你可能需要修改所有默认样式属性。
当你试图让网站在所有浏览器中看起来一致时，每个浏览器都有自己的样式表，其中包含内置的默认样式，这可能会成为一个问题。
例如：

vertical-allign:baseline;
font-weight:inherit;
font-family:inherit;
font-style:inherit;
font-size:100%;
border:0;
margin:0;
padding:0;
outline:0;
Enter fullscreen mode Exit fullscreen mode

我希望你喜欢我们讨论的 CSS 技巧，并且它们能帮助你让你的页面看起来更好，编码生活更轻松。😅
下图是 CSS 工作原理的纯粹示例
图片描述

文章来源：https://dev.to/mianazanfarooq/10-css-hacks-every-web-developer-should-know-269g
Devto 翻译
PREV
设置适用于 Linux 的 Windows 子系统 设置适用于 Linux 的 Windows 子系统以供开发
NEXT
使用 Jest 和 Supertest 测试 NodeJs/Express API 🐧🐧 目录 关于测试！Jest 和 SuperTest 简介 谁适用测试？！