在spring boot应用程序中未加载CSS

基础概念

在Spring Boot应用程序中，CSS文件通常用于定义网页的样式。为了使CSS文件能够被正确加载，需要确保以下几点：

静态资源路径配置：Spring Boot默认将静态资源（如CSS、JS、图片等）放在src/main/resources/static目录下。
HTML文件引用：在HTML文件中正确引用CSS文件。

类型

内联样式：直接在HTML标签中使用style属性定义样式。
内部样式：在HTML文件的<head>部分使用<style>标签定义样式。
外部样式：通过<link>标签引用外部CSS文件。

应用场景

网页美化：通过CSS定义网页的布局和样式。
响应式设计：使用CSS媒体查询实现不同设备上的适配。

常见问题及解决方法

问题1：CSS文件未加载

原因：

CSS文件路径错误。
HTML文件中引用CSS文件的路径错误。
静态资源目录配置错误。

解决方法：

检查CSS文件路径：确保CSS文件放在src/main/resources/static目录下。例如，如果CSS文件名为styles.css，则路径应为src/main/resources/static/styles.css。
检查HTML文件引用：确保在HTML文件中正确引用CSS文件。例如：
检查HTML文件引用：确保在HTML文件中正确引用CSS文件。例如：
检查静态资源目录配置：如果需要自定义静态资源目录，可以在application.properties或application.yml中进行配置。例如：
检查静态资源目录配置：如果需要自定义静态资源目录，可以在application.properties或application.yml中进行配置。例如：

示例代码

假设你有一个简单的Spring Boot项目，结构如下：

src
└── main
    ├── java
    │   └── com
    │       └── example
    │           └── demo
    │               └── DemoApplication.java
    └── resources
        ├── static
        │   └── styles.css
        └── templates
            └── index.html

styles.css：

body {
    background-color: lightblue;
}

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot CSS Example</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <h1>Hello, Spring Boot!</h1>
</body>
</html>

DemoApplication.java：

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}