如何链接 css 文件 nodjes - CSS (1)

📌 相关文章

📜 如何链接 css 文件 nodjes - CSS (1)

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

如何链接 CSS 文件 Node.js

在 Node.js 中，我们可以使用express框架来搭建 Web 应用程序。要链接 CSS 文件，我们需要在 HTML 文件中引入 CSS 文件并将其放置在我们 Web 应用程序的公共文件夹中。本文将分步介绍如何将 CSS 文件链接到 Node.js 的 HTML 页面中。

步骤

创建公共文件夹

首先，我们需要在我们的项目中创建一个公共文件夹，用于存放所有的静态资源文件，包括图片、CSS 文件和 JavaScript 文件。我们可以选择给这个文件夹一个有意义的名字，如 “public”。这个文件夹的位置可以自由选择，但通常会放在项目的根目录下。

代码示例：

mkdir public
cd public

添加 CSS 文件

在公共文件夹中创建一个新的 CSS 文件，并将其保存为 style.css。将您的 CSS 代码添加到此文件中。请注意，此 CSS 文件中的所有 CSS 样式将应用于 Web 应用程序中的所有页面。

代码示例：

/* style.css */
body {
  background-color: #fff;
  font-family: Arial, sans-serif;
  color: #333;
}

在 HTML 页面中链接 CSS 文件

我们需要在 HTML 页面的头部中添加一个链接标签，指向我们在第 2 步中创建的 CSS 文件。我们应该将链接标签放置在<head>标签中，并添加rel和href属性，其中rel属性指示所链接的文件类型，href属性则指示该文件的路径。

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My Web Application</title>
    <link rel="stylesheet" type="text/css" href="/style.css" />
  </head>
  <body>
    <h1>Welcome to my web application</h1>
    <p>Enjoy your stay!</p>
  </body>
</html>

在上面的代码中，我们将href属性设置为 /style.css。这将告诉浏览器在公共文件夹下查找 style.css 文件。

将公共文件夹添加到 Express 应用程序中

最后，我们需要将公共文件夹添加到 Express 应用程序中。这可以通过在我们的主文件（通常是 app.js 或 server.js）中使用内置的 express.static 中间件来实现。express.static 中间件将服务于公共文件夹中的所有文件。

代码示例：

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

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

app.listen(3000, () => {
  console.log("Server running at http://localhost:3000");
});

现在，当我们访问 http://localhost:3000 时，我们的样式文件 style.css 就可以被正确加载了。

结论

通过遵循这四个步骤，我们可以在 Node.js 中创建 web 应用程序并成功链接 CSS 文件。记住，在将 CSS 文件链接到我们的 HTML 页面中时，rel和href属性是必须包含的，而且要确保将样式文件放在公共文件夹中，以便将其作为静态资源文件使用。