调用外部CSS文件（最常用、最推荐）
这是最标准、最推荐的做法，它能让你的代码结构清晰，便于维护和管理，我们会在模板的 <head> 标签内引入CSS文件。
将CSS文件放在正确的位置
你需要将你的CSS文件（style.css）上传到你的DedeCMS模板目录下,一个常见的结构是：
/templets
/default <-- 你的默认模板目录
/style <-- 创建一个专门存放样式文件的文件夹（推荐）
| style.css <-- 你的CSS文件
| index.htm <-- 首页模板文件
| ...在模板文件中通过 <link> 标签调用
打开你需要添加样式的模板文件（index.htm），在 <head> 和 </head> 标签之间，使用HTML的 <link> 标签来引入你的CSS文件。
基本语法：
<link rel="stylesheet" type="text/css" href="你的CSS文件路径">
示例：
假设你的 style.css 文件路径是 /templets/default/style/style.css，那么在你的 index.htm 模板中应该这样写：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">{dede:global.cfg_webname/}</title>
<!-- 调用外部CSS文件 -->
<link rel="stylesheet" type="text/css" href="/templets/default/style/style.css">
<!-- 也可以调用DedeCMS自带的CSS文件，比如arclist样式 -->
<link rel="stylesheet" type="text/css" href="/templets/default/style/dedecms.css">
{dede:include filename="head.htm"/} <!-- 如果有公共头部文件，也可以放在这里 -->
</head>
<body>
<!-- 你的网站内容 -->
</body>
</html>
关键点：
href属性中的路径是相对于网站根目录的，所以最好以 开头,这样可以确保从任何页面访问时路径都是正确的。- 将
<link>标签放在<head>标签内,这是最佳实践。
在模板文件中直接写CSS（内联样式）
这种方法适用于一些简单的、单个页面独有的样式，或者用于快速调试，不推荐用于大量样式，因为它会使HTML文件变得臃肿,难以维护。
使用 <style>
直接在模板文件的 <head> 部分添加一个 <style> 标签,并将CSS代码写入其中。
（图片来源网络，侵删）
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">{dede:global.cfg_webname/}</title>
<!-- 直接在模板中写CSS -->
<style type="text/css">
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.header {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
.content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="header">
<h1>欢迎来到我的网站</h1>
</div>
<div class="content">
<!-- 你的网站内容 -->
{dede:arclist titlelen='30' row='5'}
<li><a href="[field:arcurl/]">[field:title/]</a></li>
{/dede:arclist}
</div>
</body>
</html>
进阶技巧与常见问题
调用DedeCMS系统默认的CSS文件
DedeCMS自身带了一些默认的样式文件，比如用于文章列表、文章内容等的样式，如果你想使用这些预设样式,可以直接调用它们。
通常位于 /templets/你的模板目录/style/ 目录下，文件名通常是 dedecms.css 或 main.css。
<link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/style/dedecms.css">
这里用到了DedeCMS的全局变量 {dede:global.cfg_templets_skin/}，它会自动解析为你当前模板的路径，/templets/default,这样写更具灵活性。
条件性调用CSS（只在首页加载）
你可能希望某些CSS样式只在特定页面（如首页）加载，以减少不必要的HTTP请求,这时可以使用DedeCMS的模板判断语句。
示例：只在首页加载一个特殊的首页样式 home.css
<head>
<meta charset="UTF-8">{dede:global.cfg_webname/}</title>
<link rel="stylesheet" type="text/css" href="/templets/default/style/style.css">
<!-- {dede:global name='typename' function='IsTop(@me)'/} 是一个判断是否为首页的标签 -->
<!-- 或者更简单的方式，直接判断当前页面ID是否为1（首页ID通常是1） -->
<link rel="stylesheet" type="text/css" href="/templets/default/style/home.css" {dede:field.id runphp='yes'}if(@me=='1')@me='';else@me='rel="stylesheet" disabled="disabled"';{/dede:field.id}>
</head>
上面的代码解释：
{dede:field.id} 获取当前页面的ID。runphp='yes' 允许在标签内运行PHP代码。if(@me=='1')@me='';else@me='rel="stylesheet" disabled="disabled"'：如果当前页面ID是1（首页），则输出空字符串，<link> 标签正常生效，如果不是首页，则输出 rel="stylesheet" disabled="disabled"，disabled 属性会让浏览器不加载这个CSS文件。
调用CSS文件的路径问题（新手常见）
最常见的问题是路径找不到,导致CSS样式不生效。
- 绝对路径（推荐）： 以 开头，从网站根目录开始计算。
href="/templets/default/style/style.css"
- 相对路径： 相对于当前HTML文件的位置，这种方法容易出错，不推荐。
index.htm 和 style 文件夹在同一级，可以这样写 href="style/style.css"，但如果页面跳转了,路径可能就错了。
最佳实践：始终使用以 开头的绝对路径。
方法
优点
缺点
适用场景
外部CSS文件
代码分离，易于维护和缓存，加载效率高
需要额外HTTP请求
绝大多数情况，特别是全站样式。
内联CSS (<style>)
简单直接，无额外请求
使HTML臃肿，难以维护，无法缓存
单个页面特殊样式、快速调试、CSS代码极少时。
对于DedeCMS网站开发，强烈建议你优先使用方法一（调用外部CSS文件）,并养成良好的文件组织习惯。
直接在模板文件的 <head> 部分添加一个 <style> 标签,并将CSS代码写入其中。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">{dede:global.cfg_webname/}</title>
<!-- 直接在模板中写CSS -->
<style type="text/css">
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.header {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
.content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="header">
<h1>欢迎来到我的网站</h1>
</div>
<div class="content">
<!-- 你的网站内容 -->
{dede:arclist titlelen='30' row='5'}
<li><a href="[field:arcurl/]">[field:title/]</a></li>
{/dede:arclist}
</div>
</body>
</html>
进阶技巧与常见问题
调用DedeCMS系统默认的CSS文件
DedeCMS自身带了一些默认的样式文件，比如用于文章列表、文章内容等的样式，如果你想使用这些预设样式,可以直接调用它们。
通常位于 /templets/你的模板目录/style/ 目录下，文件名通常是 dedecms.css 或 main.css。
<link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/style/dedecms.css">
这里用到了DedeCMS的全局变量 {dede:global.cfg_templets_skin/}，它会自动解析为你当前模板的路径，/templets/default,这样写更具灵活性。
条件性调用CSS（只在首页加载）
你可能希望某些CSS样式只在特定页面（如首页）加载，以减少不必要的HTTP请求,这时可以使用DedeCMS的模板判断语句。
示例：只在首页加载一个特殊的首页样式 home.css
<head>
<meta charset="UTF-8">{dede:global.cfg_webname/}</title>
<link rel="stylesheet" type="text/css" href="/templets/default/style/style.css">
<!-- {dede:global name='typename' function='IsTop(@me)'/} 是一个判断是否为首页的标签 -->
<!-- 或者更简单的方式，直接判断当前页面ID是否为1（首页ID通常是1） -->
<link rel="stylesheet" type="text/css" href="/templets/default/style/home.css" {dede:field.id runphp='yes'}if(@me=='1')@me='';else@me='rel="stylesheet" disabled="disabled"';{/dede:field.id}>
</head>
上面的代码解释：
{dede:field.id}获取当前页面的ID。runphp='yes'允许在标签内运行PHP代码。if(@me=='1')@me='';else@me='rel="stylesheet" disabled="disabled"'：如果当前页面ID是1（首页），则输出空字符串，<link>标签正常生效，如果不是首页，则输出rel="stylesheet" disabled="disabled"，disabled属性会让浏览器不加载这个CSS文件。
调用CSS文件的路径问题（新手常见）
最常见的问题是路径找不到,导致CSS样式不生效。
- 绝对路径（推荐）： 以 开头，从网站根目录开始计算。
href="/templets/default/style/style.css"
- 相对路径： 相对于当前HTML文件的位置，这种方法容易出错，不推荐。
index.htm和style文件夹在同一级，可以这样写href="style/style.css"，但如果页面跳转了,路径可能就错了。
最佳实践：始终使用以 开头的绝对路径。
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 外部CSS文件 | 代码分离，易于维护和缓存，加载效率高 | 需要额外HTTP请求 | 绝大多数情况，特别是全站样式。 |
内联CSS (<style>) |
简单直接，无额外请求 | 使HTML臃肿，难以维护，无法缓存 | 单个页面特殊样式、快速调试、CSS代码极少时。 |
对于DedeCMS网站开发，强烈建议你优先使用方法一（调用外部CSS文件）,并养成良好的文件组织习惯。
