📅 最后修改于: 2023-12-03 14:51:30.686000 🧑 作者: Mango
CSS（层叠样式表）是一种用于网页设计的样式表语言，用于描述网页上的元素如何呈现在浏览器中。在百里香（Thymeleaf）中导入 CSS 样式表可以让我们为网页添加样式和布局，使其更加美观和易读。
在百里香中导入 CSS 样式表非常简单。下面是一些常用的方法：
可以直接在 HTML 标签上添加 inline 样式，给指定的元素设置 CSS 属性。示例如下：
<div style="color: blue;">这是一个蓝色的文字。</div>
这种方式适合于单个元素的样式设置。
可以在 HTML 文件的头部使用 <style> 标签来定义内联样式表。示例如下：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgray;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
这种方式适合于页面的整体样式设置。
可以将 CSS 样式定义在一个外部文件中，然后在 HTML 文件中使用 <link> 标签引入该文件。示例如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
在上述示例中，styles.css 文件包含了所需的 CSS 样式。
通过在百里香中导入 CSS 样式表，我们可以轻松地实现网页的样式定制和美化。无论是使用 inline 样式、内联样式表还是外部样式表，都能帮助我们有效管理和应用网页的样式。
注意： 若要在百里香模板中使用 CSS 样式，需要确保引入样式表的路径正确，并且路径是相对于 HTML 文件的。