层叠样式表

在继续深入开发我们的 Thyme Wizards 应用之前，让我们先回顾一下 CSS 的基本概念。

CSS 概念

每个 Web 应用都需要 CSS，即 层叠样式表（Cascading Style Sheets），我们的 Spring Boot 应用也不例外。

向 Spring Boot 应用添加 CSS 最简单的方式，是将 CSS 文件放入 src/main/resources/static 目录中。嵌入式的 Tomcat 容器会自动提供该目录下的所有内容。

为了实际体验一下，我们在这个目录下创建一个 CSS 文件：

1h1 {
2    color: #5f5f5f;
3    border-bottom: 5px solid rgb(233, 10, 21);
4}
5
6ul {
7    font-variant: small-caps;
8}

接下来，我们将 HTML 与 CSS 进行关联：

1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml"
3      xmlns:th="http://www.thymeleaf.org"
4      lang="en">
5<head>
6    <meta charset="UTF-8">
7    <title>Taming Thymeleaf</title>
8    <link rel="stylesheet" th:href="@{/css/application.css}">
9</head>

我们必须按照相对于 src/main/resources/static 目录的路径来指定文件位置。这样一来，我们的 HTML 页面将会呈现如下效果：