Thymeleaf引入CSS

一、引入外部CSS文件

在使用Thymeleaf框架時，與使用原始HTML標記一樣可以使用<link>元素，來引用一個外部CSS樣式表文件。

<head>
    <link rel="stylesheet" href="style.css" th:href="@{/css/style.css}">
</head>

其中，rel屬性用於定義所連接文檔與當前文檔之間的關係，此處為引用一份樣式表；href屬性指向了一個外部樣式表文件；th:href為Spring boot中的Thymeleaf模板規則，用於解析資源地址。

二、內部樣式

內部樣式是指直接在HTML或者Thymeleaf模板文件中，使用<style>標籤定義樣式的一種方式。

<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

上面的代碼演示了一個簡單的內部樣式表，其中對<h1>標籤進行了顏色設置。另外，在Thymeleaf模板文件中，也可以使用同樣的語法方式。

<head>
    <style th:inline="text">
        h1 {
            color: [[${color}]];
        }
    </style>
</head>

在上述代碼中，th:inline="text"屬性指定了內聯模式，並使用了變量color，可以根據需要替換為具體值。

三、使用Thymeleaf屬性設置樣式

除了使用外部CSS和內部樣式表，Thymeleaf還提供了一種類似於內聯樣式的方式，可以通過屬性值的形式為標籤設置樣式。

<h1 th:style="'color:' + ${color}">Hello Thymeleaf</h1>

在上述代碼中，th:style屬性用於指定要應用的樣式，樣式指定使用表達式語言，可以隨意組合不同顏色，大小等屬性。

四、使用Thymeleaf片段封裝CSS

經常會遇到一些重複的樣式定義，比如表單中的常規樣式，可以使用片段封裝起來，方便復用。

1、新建css片段

在resources/static/fragments目錄下新建一個css片段文件，如下：

.form-group label {
    display: block;
    margin-bottom: 8px;
}

.form-group input {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 16px;
}

.form-group select {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 16px;
}

2、引入css片段

在需要使用該片段的Thymeleaf模板中，通過th:fragment屬性引入該片段。

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{'/fragments/form.css'}">
</head>
<body>
    <form>
        <div class="form-group">
            <label>用戶名</label>
            <input type="text" th:fragment="user-input">
        </div>

        <div class="form-group">
            <label>密碼</label>
            <input type="password" th:fragment="password-input">
        </div>
    </form>
</body>
</html>

在上述代碼中，th:fragment屬性用於指定要引入的片段，而在HTML代碼中使用了片段名稱，如下所示：

<input type="text" th:fragment="user-input">
<input type="password" th:fragment="password-input">

總結

通過本文我們了解到了使用Thymeleaf引入CSS的各種方式，除了使用外部CSS和內部樣式表，Thymeleaf還提供了一種類似於內聯樣式的形式，還可以通過片段封裝CSS達到樣式復用的作用。

原創文章，作者：CGKIM，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/366231.html