如何在 nodejs 2 中添加 css (1)

📌 相关文章

📜 如何在 nodejs 2 中添加 css (1)

📅 最后修改于: 2023-12-03 15:08:43.737000 🧑 作者: Mango

在 Node.js 中添加 CSS

在 Node.js 中使用 CSS 可以让我们更好地控制网站的样式，使页面呈现更加美观和用户友好。本文将介绍如何在 Node.js 中添加 CSS。

1. 添加 CSS 文件

首先需要在 Node.js 项目中添加一个 CSS 文件，文件名可以随意命名，例如 index.css。在 CSS 文件中我们可以写入样式规则，例如：

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 36px;
  color: #333;
  text-align: center;
}

.container {
  width: 80%;
  margin: 0 auto;
}

2. 链接 CSS 文件

要让网站应用能够加载 CSS 文件，我们需要在 HTML 文件中添加一个链接，指向 CSS 文件的路径。如果你使用 Express 框架，则可以在主应用程序中使用以下代码：

app.use(express.static("public"));

该代码将让 Express 应用程序在 public 目录下查找静态文件。在 public 目录下，我们可以创建一个 CSS 文件夹，然后将我们的 index.css 文件放在其中。

最后，在 HTML 文件的 head 标签中添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
    <link rel="stylesheet" href="/css/index.css">
  </head>
  <body>
    <div class="container">
      <h1>Welcome to My Website</h1>
      <p>This is my first Node.js application.</p>
    </div>
  </body>
</html>

这里我们使用 link 标签将 index.css 文件链接到 HTML 文件中。你需要确认 href 属性的路径与你的实际文件路径一致，这里我们将文件放在了 public/css 文件夹下，因此路径应该是 /css/index.css。

3. 测试页面

现在我们可以启动应用程序并访问页面，看看 CSS 是否已经生效。如果你使用 Express 框架，则可以使用以下代码启动应用程序：

const express = require("express");
const app = express();

app.use(express.static("public"));

app.listen(3000, () => {
  console.log("Server is running on port 3000...");
});

在命令行中执行 node app.js，然后在浏览器中输入 http://localhost:3000 即可访问页面。如果一切顺利，你应该能够看到页面正常显示，并且 CSS 样式已经生效。

结论

在 Node.js 中添加 CSS 非常简单，只需要编写样式规则并将 CSS 文件链接到 HTML 文件中即可。你可以使用 Express 框架来更方便地启动静态文件服务器。希望本文能对你有所帮助！