一、引入外部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/n/366231.html
微信扫一扫 
支付宝扫一扫 