主题 CSS 语法

2020-03-11 · 382 words · edit

本主题的 CSS 设计是分层次的，设计顺序如下

1. 基本设置
2. 文章排版
3. 模块
4. 布局
5. 特性

基本设置

基本设置也就是整个主题需要遵循的规则，包括字体、字号、背景色等。

文章排版

写一篇文章，需要涉及很多元素的排版，包括：

1. 标题：1~6 级标题的字体、字号、是否加粗、颜色
2. 段落：行距、斜体、删除线、下划线
3. 图片：大小、是否圆角
4. 表格：是否水平滚动
5. 引用：左边框、背景色
6. 列表：列表的缩进
7. 代码段：高亮、水平滚动

除了 markdown 支持的渲染，可以自己加入一些语法糖，例如

模块

网站的网页不只有内容，至少还得包括：

1. 页脚：放置社交链接和版权信息
2. 导航栏：放置导航按钮
3. 搜索结果：显示搜索结果

布局

你要考虑移动端和 PC 端的屏幕大小，并设计相应的展示风格。

特性

1. box-sizing : 宽度包括边距、内边距、内容宽度。