一、引入外部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达到样式复用的作用。