没有 thymeleaf，外部 css 样式表无法工作答案

【问题标题】：External css stylesheet not working without thymeleaf没有 thymeleaf，外部 css 样式表无法工作
【发布时间】：2022-10-14 05:25:52
【问题描述】：

我试图找出一个原因，为什么我必须在我的 html 标记和指向外部 css 样式表的链接中包含百里香。如果我删除其中任何一个，样式表将与 html 文档断开连接。那么为什么必须包含百里香叶呢？ html页面：

<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{style.css}" href="..\css\style.css">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<!-- Nice -->
<div id="header" class="header"></div>
<div class="container" >
    <div class="row">
        <div class="col">
            <a href="filmInfo.html"><img class="img-fluid" src="https://www.nfbio.dk/sites/nfbio.dk/files/styles/movie_poster/public/movie-posters/HO00002857_104360.jpg?itok=pRMFGS5R" alt="..."></a></div>
        <div class="col">
            <a href="filmInfo2.html"><img class="img-fluid" src="https://www.nfbio.dk/sites/nfbio.dk/files/styles/movie_poster/public/media-images/2022-09/Amsterdam_Payoff_Poster_68%2C5x101%2C5_DK_72dpi_0.jpg?itok=yX9_nT_-" alt="..."></a>
            Titel her</div>
        <div class="col">
            <a href="filmInfo3.html"><img class="img-fluid" src="https://www.nfbio.dk/sites/nfbio.dk/files/styles/movie_poster/public/movie-posters/HO00002845_104348.jpg?itok=jNJskf23" alt="..."></a>
            Titel her</div>
    </div>
    <div class="row">
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her </div>
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her</div>
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her</div>
    </div>
    <div class="row">
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her </div>
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her</div>
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her</div>
    </div>
</div>

<script>

    $(function(){
        $('#header').load('reuse-header.html');
    });

</script>
</body>
</html>

【问题讨论】：

我在您的 href 中看到了反斜杠：href="..\css\style.css"。您是说正斜杠 (/) 吗？与 HTML 模板相关的样式表在哪里？浏览器网络监控器如何定位 CSS 文件失败？（F12打开）
您提到需要在 CSS 链接中添加 thymeleaf，但上面的示例代码没有共享这一点。你能分享一下你是如何在 CSS 链接中添加它的吗？它是在路径中还是通过链接标签的属性？
你能分享一下你是如何以及在哪里使用这个 HTML 文档的吗？它是加载/配置它作为渲染页面模板的 spring 项目的一部分吗？
@HaroonAzharKhan——“上面的示例代码不共享“ th:href="@{style.css}" 怎么样？我想这就是问题所在。

标签： html css thymeleaf

【解决方案1】：

好吧，命名空间属性定义了我们可以使用的标签，或者更具体地说，在哪里可以找到框架的标签定义，该框架将编译此文档以使其可供浏览器读取。

您提供了https://www.thymeleaf.org（将其命名为百里香叶，不确定它叫什么）库作为它可以在本文档中找到标签的定义和使用的来源。

这意味着，现在百里香库提供了标签的定义。意思是一个简单的img 标签，如下所示：

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

可以像这样编码（取决于百里香提供的用于开发文档的界面/标签）：

<ThymeImg Thyme:customWayForSrc="img_girl.jpg" FormatwithColonIsThymeChoiceAlt="Girl in a jacket" thyme:width="500" th:height="600">

我相信他们使用或允许设置 src 属性的约定与 HTML 的标准方言类似，只需在 src 属性前添加一个百里香前缀，这样开发人员就不会迷失在全新的约定中。他们可以将其命名为任何名称，例如 setSRC。您应该阅读他们的docs 以熟悉他们开发文档的方言。

为什么要创造一种新的方言？通常，这是为了提高效率。您可以在他们的登录页面上阅读他们为 HTML here 创建新方言背后的理念。

【讨论】：

包含命名空间 xmlns:th="https://www.thymeleaf.org" 是咒语对于百里香叶。也就是说，除了防止IDE抱怨th:的未知使用之外，没有其他原因。它 ”对模板处理完全没有影响“。（Reference）。我不确定其余的答案是否与问题相关 - 但如果我错过了这一点，请纠正我。
我不确定这个特殊情况。标签<html lang="en" xmlns:th="https://www.thymeleaf.org"> 对模板的处理方式没有任何影响
但是百里香引擎确实需要能够编译文档的约定，最终将是 HTML5，具体取决于所需的输出文件是什么。示例中的引擎 [配置](thymeleaf.org/doc/tutorials/3.0/…) 讨论了配置引擎以创建网页，但文档共享可以编译到的文档范围。
其余的答案解释了为什么使用th，因为它是 Thyme 方言的一部分，并且被 Thyme Engine 用来处理它并根据项目中的配置方式开发文档，不一定必须是一个网页

【解决方案2】：

使用它然后你的外部 CSS 工作

【讨论】：

建议：看看 Stack Overflow markdown formatting guidelines。您的 HTML 目前是隐藏的。
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。