Thymeleaf中设置每个页面引入公共css样式

迷南。 2023-10-18 20:40 11阅读 0赞

## 场景 ##

Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/93969759][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_93969759]

参考上文，通过提取公共页面的方式达到所有基本的css文件不用在每个页面重复引用。

现在要修改项目中所有页面的table的标题为居中，并且添加几个公共的引用样式。

## 实现 ##

新建dataTablesBaado.css,起这个名字是因为要修改的是dataTables的样式。

然后参照上面的博客在引入基本css文件的位置即header.html中添加：

<link th:href="@{/public/css/dataTablesBadao.css}" rel="stylesheet">

### css文件内容 ###

.table th {
        text-align: center;
        vertical-align: middle!important;
    }
    .badao_Center{
        text-align: center;
        vertical-align: middle!important;
    }
    .badao_Right{
        text-align: right;
        vertical-align: middle!important;
    }
    .badao_Left{
        text-align: left;
        vertical-align: middle!important;}

然后就可以在需要引用的页面添加样式

{ data: 'id',className :'badao_Center'},

这里引用的方式是以dataTables为例，其他html页面正常在需要使用的样式上添加class= "badao\_Center"即可。

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_93969759]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/93969759

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 Thymeleaf中设置每个页面引入公共css样式

场景 Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）： [https://blog.csdn.net/BADAO\_LIUMANG\_QIZH

迷南。/ 2023年10月18日 20:40/ 0 赞/ 12 阅读

相关 thymeleaf引入公共css、js

有时候很多css文件是公共的，我们必须要在每个html文件中引入它们，其实我们可以利用Thymeleaf的模板布局，把这些css文件抽出来，同时如果有某个html文件专属的cs

向右看齐/ 2022年11月18日 10:54/ 0 赞/ 131 阅读

相关 CSS-样式重置+公共样式

最近更新时间：2017年7月6日11:01:29 [《我的博客地图》][Link 1] 作为前端工程师，需要不断的去总结和积累有共性的代码，这对于开发来说事半

谁践踏了优雅/ 2022年06月13日 11:40/ 0 赞/ 330 阅读

相关 CSS样式引入

我们已经学习了行内、内嵌和外链三种方式来引入我们的 CSS 样式，这里我们再深入探讨下。行内方式通过给元素添加 style 属性来添加样式，如下： <di

小灰灰/ 2022年05月27日 09:44/ 0 赞/ 290 阅读

相关 Thymeleaf引入公共片段方式

引入公共片段引入公共片段的th属性，包括三种方式 th:insert 将公共片段，整个插入到声明引入的元素中 th:replace 将声明引入的元素，替

￡神魔★判官ぃ/ 2022年05月15日 13:35/ 0 赞/ 330 阅读

相关 Thymeleaf抽取公共页面片段

抽取页面项目中，一般把所有的公共页面片段都抽取出来放在一个独立的页面中其他，所有的页面根据需要进行引用参考文档 ![这里写图片描述][70] t

墨蓝/ 2022年05月15日 13:35/ 0 赞/ 185 阅读

相关 thymeleaf引入模板页面

通常我们一个网站页面的头部和底部都是相同的，我们不可能在每个页面都写相同的内容，一般都会将这些相同的写成模板在需要的页面引入即可。 demo开始：写一个通用的底部：

怼烎@/ 2022年05月14日 13:41/ 0 赞/ 180 阅读

相关 thymeleaf标签——页面引入表头

本文旨为笔记，仅供参考在前端页面用thymeleaf标签做一个非常简易的页面包含表头的例子：效果如图：![在这里插入图片描述][watermark_type_ZmF

刺骨的言语ヽ痛彻心扉/ 2022年04月06日 04:52/ 0 赞/ 338 阅读

相关 SpringBoot中thymeleaf抽取公共页面元素

一.抽取公共片段 1）、方式一：使用th:fragment="片段名" <div th:fragment="copy"> © 2011 The Good

青旅半醒/ 2022年03月12日 16:28/ 0 赞/ 332 阅读

相关 CSS公共样式

创建base.css样式文件。 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol

ゝ一纸荒年。/ 2021年09月14日 12:02/ 0 赞/ 354 阅读