CSS 如何在Node、Express和EJS中包含CSS文件

在本文中，我们将介绍如何在使用Node、Express和EJS开发网页时，通过引入CSS文件来为网页添加样式。

阅读更多：CSS 教程

1. 在HTML文件中引入CSS文件

在EJS模板中，我们可以使用link标签来引入外部的CSS文件。首先，在你的项目文件夹中创建一个名为public的文件夹，用于存放静态资源文件，例如CSS文件。然后，在public文件夹下创建一个名为styles的子文件夹，用于存放CSS文件。

接下来，在EJS模板的头部添加以下代码来引入CSS文件：

<link rel="stylesheet" type="text/css" href="/styles/style.css">

这行代码中，href属性用于指定外部CSS文件的路径。在这里，我们将/styles/style.css作为示例路径，实际路径根据你的项目目录结构进行相应调整。

2. 在Express应用中配置静态文件夹

为了让Express能够正确地提供CSS文件，我们需要在应用中配置一个静态文件夹。打开你的Express应用的主文件（通常是app.js或server.js），并添加如下代码：

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

这行代码将会告诉Express，我们的静态文件夹是public文件夹，所有存放在该文件夹下的文件在浏览器中都可以访问到。注意，这行代码需要在路由之前添加。

3. 创建CSS文件并应用样式

现在，我们已经设置好了静态文件夹和CSS文件的引入，接下来我们可以创建一个CSS文件，并在其中定义一些样式。

在public/styles文件夹下创建一个名为style.css的文件，并在其中添加以下示例样式：

body {
  background-color: #f1f1f1;
}

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

这是一个简单的例子，背景颜色设置为浅灰色，标题颜色设置为深灰色，字体大小设置为24像素。

4. 在EJS模板中应用样式

要在EJS模板中应用CSS样式，只需将定义的类或样式应用到对应的HTML元素上。

例如，在EJS模板中的标题（<h1>）中添加一个类名为title，然后在CSS文件中定义该类名的样式：

<h1 class="title">Hello World!</h1>

.title {
  color: blue;
  font-weight: bold;
}

这样，标题的文字颜色将会变成蓝色，并加粗显示。

总结

通过以上步骤，我们可以在使用Node、Express和EJS进行网页开发时，方便地引入外部的CSS文件，并应用定义好的样式。首先，在HTML文件中使用link标签引入CSS文件，然后在Express应用中配置静态文件夹，最后在CSS文件中定义样式并在EJS模板中应用。这样，我们可以轻松地为网页添加样式，提高用户体验和界面美观度。

希望本文能帮助到你，在使用Node、Express和EJS进行网页开发时，有效地引入CSS文件并应用样式。祝你开发顺利，谢谢阅读！