下面我将为你详细解释几种常见的方法,并特别指出在织梦模板中需要注意的地方。
（图片来源网络，侵删）
在HTML的 <head> 标签内使用 <link> 标签 (最推荐、最标准)
这是最常用也是最规范的方法,适用于引入外部的CSS文件。
操作步骤：
- 找到你的模板文件：登录织梦后台，进入“模板” -> “默认模板管理”，找到你需要修改的模板文件，通常是
index.htm(首页)、article_list.htm(列表页) 或article_article.htm(文章页) 等。 - 编辑模板文件：点击对应模板文件后面的“修改”按钮。
- 定位到
<head>：在模板代码中找到<head>和</head>这一对标签。 - 添加
<link>：在<head>标签内部，</head>标签之前,添加一行代码来引入你的CSS文件。
代码示例：
假设你的CSS文件名为 style.css，并且它位于你网站根目录的 /css/ 文件夹下。
（图片来源网络，侵删）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $cfg_soft_lang; ?>"><?php echo $cfg_webname; ?>-<?php echo $cfg_pagetitle; ?></title>
<meta name="description" content="<?php echo $cfg_description; ?>">
<meta name="keywords" content="<?php echo $cfg_keywords; ?>">
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<!-- 这里可以引入多个CSS文件 -->
<link rel="stylesheet" type="text/css" href="/css/another-style.css" />
<!-- 织梦系统默认会在这里调用其自带的CSS和JS文件， -->
<link rel='stylesheet' href='{dede:global.cfg_cmsurl/}/style/dedecms.css' type='text/css' />
<script language="javascript" src="{dede:global.cfg_cmsurl/}/js/dedeajax.js"></script>
</head>
代码解释：
<link>：这是用于链接外部资源的HTML标签。rel="stylesheet"：表明这个链接是一个样式表（stylesheet）,这是必须的属性。type="text/css"：指定文件的MIME类型为CSS，虽然现在HTML5中可以省略,但写上更规范。href="/css/style.css"：这是最重要的部分，指定了CSS文件的路径。- 路径问题：这里的路径是相对于网站根目录的，如果你的网站访问地址是
http://www.yourdomain.com/，/css/style.css就指向http://www.yourdomain.com/css/style.css。 - 织梦全局变量：你也可以使用织梦的全局变量
{dede:global.cfg_cmsurl/}来表示网站根目录，这样更灵活。href="{dede:global.cfg_cmsurl/}/css/style.css"。
- 路径问题：这里的路径是相对于网站根目录的，如果你的网站访问地址是
在HTML的 <head> 标签内使用 @import (不推荐)
你也可以使用CSS的 @import 规则来引入CSS文件,但这通常不推荐用于主样式表。
代码示例：
<head>
...
<style type="text/css">
/* 使用 @import 引入CSS文件 */
@import url("/css/style.css");
/* 或者使用织梦全局变量 */
@import url("{dede:global.cfg_cmsurl/}/css/style.css");
</style>
...
</head>
为什么不推荐？
- 性能问题：
@import会导致CSS文件串行加载，即浏览器会先加载完HTML文档，再去加载@import的CSS，这会阻塞页面的渲染,影响用户体验。 - 加载顺序问题：如果多个CSS文件都使用
@import，它们的加载顺序可能会变得混乱,导致样式覆盖问题。 - 可读性差：
<link>标签清晰明了地列出了所有依赖的资源，而@import混在<style>标签里,不易管理。
直接内联CSS (不推荐用于独立文件)
如果你只是想引入一小段CSS代码，可以直接写在 <style> 标签里，但这不适用于调用另一个独立的CSS文件。
代码示例：
<head>
...
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.my-class {
color: red;
}
</style>
...
</head>
适用场景：只适用于少量、临时的样式,或者用于覆盖其他CSS的特定样式。
总结与最佳实践
| 方法 | 优点 | 缺点 | 推荐度 |
|---|---|---|---|
<link> |
加载速度快（并行加载），符合标准，易于维护，浏览器支持好 | 无明显缺点 | ⭐⭐⭐⭐⭐ （强烈推荐） |
@import 规则 |
可以放在CSS文件内部，方便模块化 | 加载慢（串行加载），可能阻塞渲染，有加载顺序问题 | ⭐☆☆☆☆ （不推荐） |
<style> 内联 |
请求次数少，适合小段代码 | 代码冗余，难以复用，不易维护 | ⭐☆☆☆☆ （仅用于小范围、临时样式） |
给织梦用户的最终建议：
- 始终使用
<link>来引入你的主CSS文件和任何其他独立的CSS文件。 - 将你的自定义CSS文件（如
style.css）放在/css/这样的专用目录下,保持网站结构清晰。 - 在织梦模板的
<head>标签内，将你的<link>标签放在织梦系统默认的<link>标签之后，这样可以确保你的自定义样式能够覆盖系统默认样式（如果需要的话）。 - 修改完模板文件后，记得点击模板文件修改页面底部的“保存”按钮，然后去“生成” -> “更新主页”或“更新栏目/文档”,让修改生效。
