文章	分类	评论
32	8	0

站点介绍

终于比较舒服了

style.css——主题的「总样式文件」

首页 / 正文

##一、style.css
决定了：

标题长什么样、字体多大、颜色是什么
	搜索框、菜单在哪个位置
	文章标题、内容、标签的样式
	评论区外观
	页脚样式
	手机端（小屏幕）时如何自适应
	图片、表格、blockquote 的样式
	间距、对齐方式、边框、布局……

PHP → 生成内容
HTML → 把结构显示出来
CSS（style.css）→ 给结构「化妆」

1) Global style（全站通用样式）
```css
    body { ... }
    a { ... }
    table { ... }
    pre, code { ... }
    h1, h2, h3 { ... }
    input, textarea { ... }
```
负责：
```
	字体
	背景色
	链接颜色
	代码块背景
	表单输入框样式
```
2) Header（头部区域）
```css
    #header { ... }
    #logo { ... }
    #nav-menu { ... }
    #search { ... }
```
负责：

网站标题（啥也不是blog）
    上面那句描述
    首页/关于 导航菜单
    搜索框位置与样式

3) Main（正文区域）
```css
.post { ... }
.post-title { ... }
.post-meta { ... }
.post-content { ... }
```
负责：
```
文章标题字体大小
文章内容行间距
文章发布时间、作者、分类等小字
分页按钮排版
```
4) Comments（评论区）
```
.comment-list li { ... }
.comment-author { ... }
```
控制：
```
评论的背景色
一层楼一层楼的气泡框
回复框样式
```
5) Secondary（侧栏 widgets）
```
#secondary { ... }
.widget { ... }
```
控制：
	右侧栏的各种小工具（分类、最新文章、归档）

6) Footer（页脚）
```
#footer { ... }
```
控制：
最下面「由 Typecho 强力驱动」那一条。

7) Responsive（响应式适配）
```
@media (max-width: 768px) { ... }
```
负责让手机端布局自动调整，使网站适配不同屏幕。

##二 grid.css
```
.container：限定内容宽度、居中 / 靠左

.row：一行

.col-mb-*：手机端每列占多少（总共 12 份）

.col-tb-*：平板端

.col-*：桌面端

.col-wd-*：大屏端

.col-*-offset-*：整列整体往右移一点（留空白）

.col-*-push-* / .col-*-pull-*：改变显示顺序用的（一般不用管）

kit-hidden-mb / kit-hidden-tb / kit-hidden：在手机 / 平板 / 小屏幕下隐藏某些元素。
```

版权所属: 别茬

本文链接: https://www.sybs18.cn/archives/13.html

协议授权: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》

日历

2025年12月

标签云

友情链接

冷文学习者陶小桃blog 友人C

日	一	二	三	四	五	六
	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	27
28	29	30	31

别茬

站点介绍

style.css——主题的「总样式文件」

评论(0)

热门文章

最新评论

日历

标签云

友情链接

文章目录

日	一	二	三	四	五	六
	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	27
28	29	30	31

日	一	二	三	四	五	六
	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	27
28	29	30	31

日	一	二	三	四	五	六
	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	27
28	29	30	31