> For the complete documentation index, see [llms.txt](https://jack80342.gitbook.io/thymeleaf/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jack80342.gitbook.io/thymeleaf/i.-using-thymeleaf/12-nei-lian/12.4-css-inlining.md).

# 12.4 CSS内联

Thymeleaf也允许在CSS的`<style>`标签里使用内联，比如：

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

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

```markup
classname = 'main elems'
align = 'center'
```

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

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

结果会是：

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

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