您的位置:

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达到样式复用的作用。