12.4 CSS内联

Thymeleaf也允许在CSS的<style>标签里使用内联,比如:

<style th:inline="css">
  ...
</style>

例如,假设我们有两个变量设置成了两个不同的String值:

classname = 'main elems'
align = 'center'

我们可以像这样使用它们:

<style th:inline="css">
    .[[${classname}]] {
      text-align: [[${align}]];
    }
</style>

结果会是:

<style th:inline="css">
    .main\ elems {
      text-align: center;
    }
</style>

注意CSS内联也有些智能,就像JavaScript一样。特别地,通过类似[[${classname}]] 的转义表达式输出的表达式会被转义为CSS标识符。这也是为什么我们的classname = 'main elems'会变成上面的代码片段里的main\ elems

Last updated