CSS 样式自定义指南

什么是 CSS？

CSS（Cascading Style Sheets，层叠样式表）是用来控制网页外观的语言。简单来说：

  • HTML 负责网页的结构（有哪些内容）
  • CSS 负责网页的样式（长什么样）

Butterfly 主题的样式自定义方式

方式一：主题配置文件（简单）

在 _config.butterfly.yml 中直接修改颜色：

1
2
3
4
5
6
theme_color:
  enable: true
  main: "#49B1F5"           # 主色调（蓝色）
  paginator: "#00c4b6"       # 分页颜色
  button_hover: "#FF7242"    # 按钮悬停颜色
  link_color: "#99a9bf"      # 链接颜色

优点：简单，不需要写代码
缺点：只能修改颜色，不能修改布局

方式二：自定义 CSS 文件（灵活）

创建自己的 CSS 文件来覆盖主题样式。

步骤 1：在 _config.butterfly.yml 中添加注入配置

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">

步骤 2：创建 source/css/custom.css 文件

在这个文件中编写自定义样式。

优点：完全自由，可以修改任何样式
缺点：需要了解 CSS 语法

CSS 基础语法

选择器

选择器用来指定”哪个元素”要应用样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 类选择器：以 . 开头，匹配 class 属性 */
.my-class {
    color: red;
}

/* ID选择器：以 # 开头，匹配 id 属性 */
#my-id {
    font-size: 16px;
}

/* 标签选择器：直接写标签名 */
p {
    line-height: 1.8;
}

/* 后代选择器：空格分隔，匹配内部元素 */
.container p {
    color: blue;
}

常用属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 颜色 */
color: #fff;                    /* 文字颜色 */
background-color: #f0f0f0;      /* 背景颜色 */

/* 字体 */
font-size: 16px;                /* 字体大小 */
font-weight: 600;               /* 字体粗细（400=正常, 700=加粗）*/
font-family: "微软雅黑";        /* 字体 */

/* 间距 */
padding: 10px;                  /* 内边距（内容到边框的距离）*/
margin: 20px;                   /* 外边距（元素到其他元素的距离）*/
gap: 10px;                      /* 子元素之间的间距 */

/* 尺寸 */
width: 100%;                    /* 宽度 */
height: 200px;                  /* 高度 */
min-height: 120px;              /* 最小高度 */

/* 边框 */
border: 1px solid #ccc;         /* 边框：宽度 样式 颜色 */
border-radius: 12px;            /* 圆角 */

/* 阴影 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 阴影：x偏移 y偏移 模糊半径 颜色 */

!important

当样式不生效时，可以使用 !important 强制覆盖：

1
2
3
4
5
6
7
8
9
/* 普通样式可能被主题覆盖 */
.pagination-related {
    background: red;
}

/* 使用 !important 强制生效 */
.pagination-related {
    background: red !important;
}

注意：!important 应该尽量少用，只在必要时使用。

实战案例：上一篇/下一篇样式

目标效果

  • 背景图 + 磨砂玻璃效果
  • 白色文字 + 文字阴影
  • 圆角卡片

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* =========================================
   上一篇/下一篇 样式
   ========================================= */

/* 基础样式 */
.pagination-related {
    position: relative !important;    /* 相对定位，用于内部绝对定位的子元素 */
    overflow: hidden !important;      /* 隐藏超出部分 */
    border-radius: 12px;              /* 圆角 */
}

/* 隐藏主题默认的封面图 */
.pagination-related .cover {
    display: none !important;         /* display:none 完全隐藏元素 */
}

/* 文字样式 */
.pagination-related .info .info-item-1 {
    color: rgba(255, 255, 255, 0.9) !important;  /* 半透明白色 */
}

.pagination-related .info .info-item-2 {
    color: #fff !important;           /* 纯白色 */
    font-weight: 600 !important;      /* 加粗 */
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);  /* 文字阴影 */
}

代码解释

代码含义
position: relative相对定位，为内部绝对定位元素提供参考
overflow: hidden隐藏超出容器的内容
display: none完全隐藏元素，不占据空间
rgba(255, 255, 255, 0.9)颜色值，最后一位是透明度（0-1）
text-shadow文字阴影效果

实战案例：遮罩层效果

什么是遮罩层？

遮罩层是在背景图上覆盖一层半透明颜色，让文字更容易阅读。

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 伪元素 ::before 创建遮罩层 */
.pagination-related::before {
    content: '' !important;           /* 必须有，否则不显示 */
    position: absolute !important;    /* 绝对定位 */
    top: 0;                           /* 距顶部 0 */
    left: 0;                          /* 距左边 0 */
    right: 0;                         /* 距右边 0 */
    bottom: 0;                        /* 距底部 0 */
    background: rgba(0, 0, 0, 0.3);  /* 黑色半透明遮罩 */
    backdrop-filter: blur(3px);       /* 模糊效果（磨砂玻璃）*/
    -webkit-backdrop-filter: blur(3px); /* Safari 兼容 */
    z-index: 1 !important;            /* 层级，确保在文字下方 */
}

代码解释

代码含义
::before在元素内容之前插入一个虚拟元素
content: ''必须设置，否则伪元素不显示
position: absolute绝对定位，相对于最近的定位祖先
top: 0; left: 0; right: 0; bottom: 0撑满整个父元素
rgba(0, 0, 0, 0.3)黑色，30% 透明度
backdrop-filter: blur(3px)背景模糊 3 像素
z-index: 1层级为 1（数值越大越靠上）

调整效果

1
2
3
4
5
6
7
8
/* 更重的磨砂效果 */
backdrop-filter: blur(8px);

/* 更亮的遮罩（白色） */
background: rgba(255, 255, 255, 0.3);

/* 更暗的遮罩（黑色） */
background: rgba(0, 0, 0, 0.5);

日夜模式适配

Butterfly 主题支持日夜模式切换，可以通过 CSS 分别设置：

1
2
3
4
5
6
7
8
9
10
11
/* 白天模式 */
html:not([data-theme="dark"]) .my-element {
    background: white;
    color: black;
}

/* 晚上模式 */
html[data-theme="dark"] .my-element {
    background: #1e1e1e;
    color: white;
}

选择器解释

  • html:not([data-theme="dark"])：当 HTML 标签没有 data-theme="dark" 属性时（白天模式）
  • html[data-theme="dark"]：当 HTML 标签有 data-theme="dark" 属性时（晚上模式）

调试技巧

1. 浏览器开发者工具

按 F12 打开开发者工具：

  • Elements 面板：查看 HTML 结构
  • Styles 面板：查看和修改 CSS 样式
  • 实时预览：修改样式值，立即看到效果

2. 查找正确的选择器

右键点击要修改的元素 → 检查（Inspect），查看它的 class 和 id。

3. 清除缓存

修改 CSS 后需要清除浏览器缓存：

  • Windows/Linux：Ctrl + Shift + R
  • Mac：Cmd + Shift + R

本博客的自定义 CSS

本博客的自定义样式文件位于 source/css/custom.css，主要包含：

区域样式说明
页脚去除默认背景色，减小高度
上一篇/下一篇背景图 + 磨砂效果 + 文字样式
相关推荐与上一篇/下一篇类似的样式

参考资源