如何修改网站模板颜色和字体_品牌定制_CSS变量_响应式
修改网站模板颜色和字体，打造品牌化界面。
找到CSS文件： - template/模板名/css/style.css（主样式表） - 或main.css、theme.css、custom.css - 用F12点选元素，看CSS类名和当前颜色，定位修改位置。
修改颜色：
全局主题色： - 搜索模板里的主色值（如#1890ff、#2c3e50）。 - 用编辑器全部替换（Ctrl+H）为新品牌色。 - 替换前确认该颜色只用于主题色，没用于文字或背景。 - 按钮、链接、导航高亮、图标、边框强调色都要改。
CSS变量方式（先进模板）： - 模板用`:root{--primary:#1890ff; --secondary:#xxx;}`定义变量。 - 其他地方用`var(--primary)`引用。 - 只改变量值，所有地方同步更新。 - 检查style.css开头有没有:root定义。
具体元素改色： - 导航栏背景：`.nav{background:#xxx}`或`.header{background:#xxx}` - 按钮：`.btn{background:#xxx; border-color:#xxx;}`，还要改:hover状态 - 链接：`a{color:#xxx}`，`a:hover{color:#深色}` - 标题强调：`.title{color:#xxx}` - 页脚背景：`.footer{background:#xxx}` - 输入框聚焦：`input:focus{border-color:#xxx; box-shadow:0 0 0 2px rgba(色值,0.2);}`
渐变色： - 部分模板用线性渐变：`background: linear-gradient(135deg, #色1, #色2);` - 改两个颜色值调整渐变效果。 - 渐变常用于按钮、Banner、区块背景。
修改字体：
全局字体： ``` body, h1, h2, h3, h4, h5, h6, p, a, span, li { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; } ``` - 微软雅黑（Windows）、苹方（Mac）、黑体，清晰易读。 - 不要用艺术字体，后台和正文都要清晰。
字体大小： ``` body { font-size: 14px; line-height: 1.8; } h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; } p { font-size: 14px; line-height: 1.8; } ``` - 正文14-16px，行高1.6-1.8，阅读舒适。 - 标题按层级递减。
字体粗细： ``` h1, h2, h3 { font-weight: bold; } body { font-weight: normal; } ``` - 标题加粗，正文常规，层次分明。
自定义CSS文件（推荐）： - 不修改原style.css，新建custom.css。 - 把覆盖样式写在custom.css。 - 在模板header.html里引入：`` - 升级模板时原CSS被覆盖，custom.css保留。
响应式适配： - 改颜色和字体不影响布局，但要检查手机端显示。 - 字体在手机端不要太小（最小14px）。 - 颜色对比度在手机上也要够。 - 用F12手机模拟模式测试。
颜色搭配建议： - 主色：品牌Logo的主色，用于按钮、链接、强调。 - 辅助色：主色的深色/浅色变体，用于hover、边框。 - 中性色：黑、白、灰，用于文字和背景。 - 一个页面主色不超过3种，保持统一。 - 文字和背景对比度≥4.5:1（WCAG AA标准），否则看不清。 - 用在线工具（Coolors、Adobe Color）生成和谐配色。
修改注意事项： - 改前备份CSS文件。 - 改完清浏览器缓存（Ctrl+F5）。 - 测试所有页面，不只是首页。 - hover、active、focus状态都要改。 - 表单元素（输入框、按钮、下拉框）颜色统一。 - 不要改得太花哨，简洁专业为主。 - 升级模板可能覆盖style.css，用custom.css方式更安全。
品牌化模板提升专业感和用户信任，简单的CSS修改就能实现。从主色和字体开始，逐步统一全站风格。
更新时间：2026-08-26 17:20:26
上一篇：PbootCMS视频播放失败排查实录：从编码转换到播放器配置的完整方案