External css stylesheet not working without thymeleaf-CodePudding

I'm trying to figure out a reason why i have to include thymeleaf in my html tag and in my link to my external css stylesheet in the head. If i remove any of it, the stylesheet will be disconnected from the html document. So why are the thymeleaf bits necessary to include? the html page:

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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" ></div>
<div  >
    <div >
        <div >
            <a href="filmInfo.html"><img  src="https://www.nfbio.dk/sites/nfbio.dk/files/styles/movie_poster/public/movie-posters/HO00002857_104360.jpg?itok=pRMFGS5R" alt="..."></a></div>
        <div >
            <a href="filmInfo2.html"><img  src="https://www.nfbio.dk/sites/nfbio.dk/files/styles/movie_poster/public/media-images/2022-09/Amsterdam_Payoff_Poster_68,5x101,5_DK_72dpi_0.jpg?itok=yX9_nT_-" alt="..."></a>
            Titel her</div>
        <div >
            <a href="filmInfo3.html"><img  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 >
        <div >
            <img  src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her </div>
        <div >
            <img  src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her</div>
        <div >
            <img  src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her</div>
    </div>
    <div >
        <div >
            <img  src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her </div>
        <div >
            <img  src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her</div>
        <div >
            <img  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>

CodePudding user response：

Well the namespace attribute defines the tags we can use or more specifically where to find the definition for tags for the framework that will compile this document for it to be readable by the browser.

You have provided the https://www.thymeleaf.org(name it thyme leaf, not sure what it is called) library as the source of where it can find definitions for and uses of tags in this document.

What this implies is that, now the thyme library provides definitions for tags. Meaning a simple img tag like this:

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

could be coded(subject to thymes provided interface/tags for developing a document) like this:

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

I believe they used or allowed to set the src attribute in a similar convention to the standard dialect of HTML by just pre-pending a thyme prefix to src attribute so that developers don't get lost by a total new convention. They could have named it anything e.g setSRC. You should read their docs to get acquainted with their dialect of developing documents.

why create a new dialect? Usually, it's for the purpose of efficiency. You can read their philosophy behind creating a new dialect for HTML here on their landing page.

CodePudding user response：

Use this then your external css works