「生命里的一切均一成不变，一旦青春消逝，一切都会朝着不好的方向发展。衰老将留下无法逆转的印记，疾病来了，朋友们远去了。终于，活着不会为生命增光添彩，而刚好相反，受苦的可能却大大增加。」

「疯子就是生活在自己的世界里的人，比如精神分裂、心理变态或躁狂症患者。或者说，与其他人不同的人。」

「在这里，人们承认自己是疯子，丝毫不觉得羞愧。在这里，没人会中断自己的乐子，只为了向其他人表示好感。」

「疯子就是不能表达自己观点的人。就像你置身于外国，你看到一切，你明白身边发生的一切，但是你无法张口，也无法得到旁人的帮助，因为你不懂哪里的语言。」

「或多或少，我们都是疯子。」

「我吃下安眠药的时候，想杀掉一个我憎恶的人。我那时不知道，在内心深处，还有其他我会去爱的维罗妮卡。」

「繁星点点，新月如钩，将光华温柔地洒向她的所在。她再一次感到，无限与永恒正携手并肩。凝视其中的一个——比如那无垠的宇宙，你会发现另一个的存在，那是时间，它永不终结，永不消逝，永远停留在现在，凝聚着生命的全部秘密。」

「人越是可以生活得幸福，便越发不幸福。」

「星辰不会说话，当然星相学家不这么认为。如果月亮确实和一个人说了话，那一定是跟那个精神分裂的人说的。」

「对不对并不重要，重要的是谁更有理性。」

「你们有两种选择：控制你们的思想，或被它控制。」

「不要混淆疯狂和失控。」

「你是人世间我唯一能爱的人，爱德华。只是因为，如果我死了，你不会感到我不在了。」

「也许一开始，晚上突然听不到音乐，你会觉得奇怪。可是，只要月亮一出现，总会有人弹奏一曲，尤其是在精神病院，因为我们都是『月亮上的人』。」

「要是每个人都能学会与自己内心的疯狂共存，那该有多好！难道世界会因此而堕落？不，人们只会更公正，更幸福。」

「我们每一个人都生活在自己的世界里。但是，你看看天空，那里繁星密布，那些不同的世界结合起来，便形成了星座，太阳系与银河系。」

「你没什么可失去的。很多人不敢爱，是因为太多的事情，太多的过去与未来会纠缠不清。而你不同，你只有现在。」

「我们是疯子，也只有疯子才会创造出爱。」

「希望与别人一样才是严重的病，会引发神经宫能症、精神病和妄想症。强迫自己与其他人一样才是严重的病，因为这既违反了人的天性，有对抗着神的法则。在世界的每座森林里，每棵树木上，神创造的每片叶子都不尽相同。」

「我们脆弱生命中的每一秒钟，都会有不可思议的事情发生，因此每一天都称得上是奇迹。」

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

• 这是一个包括了每个剧情节点的探索部分能收集到的东西的核对表，所以会不可避免地出现因地名和剧情任务内容而造成的剧透，虽然我个人认为真的很在意这种完全无剧透的初见体验的人也不需要读这篇文章就是了。
• 部分物品可以在多个时间点收集到，但本文只会列举其中一个时间点。
• 商店部分的「⚠」代表这是游戏内最后一个能购买该商品的地方，「☆」则代表这是新商品。
• 列表只给出了宝箱所在地的地图名称以及在地图上的位置，如果想知道具体获得方式请移步这篇「宝藏猎人」成就攻略。

通用

• 「鼓腹而游」：除了料理和商店的食物外，在迷宫内的自动贩卖机（通常出现在 boss 战之前）可以购买到「能量饮料」，这也是成就所需的食物之一。
• 为了省钱，可以在第三章获得了「强尼的好伙伴」后再去强尼商店升级武器。
• 「收藏大赢家」：收集全部造型的皮克球需要先通关「大地之子」一周目来解锁剩余皮克球及其异画，抽取全部皮克球通常需要大量 SL 或者在第七章消耗金钱来购买代币。如果不打算频繁 SL 可以在第三章大坝城外的湖心岛刷盐甲虫，提前刷一堆金钱，具体刷多少因人而异，我当时刷了 5000 金钱结果第七章还是靠 SL 多抽了一百多次才出皮克王的异画。

序章

剧情节点 1：「挖掘家」的一天

任务 1：快去「挖掘场」，迟到的话，又要被扣工钱了。

• 可以在「强尼商店」购物了： ☑ 宝藏雷达
• 5 个宝箱（目前进度 5/102）: ☑ 波特岛：金钱 ×50 ☑ 长老公馆：代币 ×3 ☑ 阳光农场：金钱 ×50 ☑ 波特岛：金钱 ×50 ☑ 「挖掘家」宿舍：金钱 ×50

任务 2：拯救正被「鼻涕虫」袭击的「挖掘场」。

• 1 个宝箱（目前进度 6/102）： ☑ 挖掘场：装备零件

第一章

剧情节点 2：波特岛小学

任务 1：快去学校，今天是我上学的第一天，可不能再迟到了。

• 可以在「“你好”杂货铺」购物了：
  • 食物： ☑ 啤酒☆ ☑ 甜甜圈☆⚠ ☑ 热狗☆⚠ ☑ 咖啡☆⚠ ☑ 枫糖煎饼☆⚠
  • 食材： ☑ 蛋☆ ☑ 蘑菇☆ ☑ 洋葱☆ ☑ 土豆☆⚠ ☑ 沙果☆ ☑ 蒸汽胡椒☆
  • 特殊物品： ☑ 《野性风情》 ☑ 升级背包：3 个格子 ☑ 升级背包：4 个格子

任务 5：珊好像在学校里遇到麻烦了。

• 1 个宝箱（目前进度 7/102）： ☑ 波特岛小学：代币 ×3

任务 6：丹尼尔跌进了学校下面的洞穴。

• 1 个宝箱（目前进度 8/102）： ☑ 地底洞穴：生命宝珠

剧情节点 3：「禁地」

任务 2：珊要去「禁地」了，要在出事之前找到她。

• 6 个宝箱（目前进度 14/102），2 个食材箱： ☑ 古代遗迹：金钱 ×50 ☑ 古代遗迹：金钱 ×50 ☑ 古代遗迹：代币 ×3 ☑ 古代遗迹：食材箱 ☑ 古代遗迹：生命宝珠 ☑ 古代遗迹：装备零件 ☑ 古代遗迹：装备零件 ☑ 古代遗迹：食材箱
• 特殊物品： ☑ 古代遗迹：「大地之子」漫画

任务 3：快！得找到出口才行！约翰，约翰！

• 1 个宝箱（目前进度 15/102） ☑ 地底洞穴：生命宝珠

任务 4：凝胶！凝胶！为约翰找到凝胶！

• 最后一次在「“你好”杂货铺」购物的机会
• 1 个宝箱（目前进度 16/102） ☑ 挖掘场：代币 ×3

剧情节点 4：地牢

任务 1：地洞，又是一个地洞，也许是个逃跑的机会。

• 8 个宝箱（目前进度 24/102），2 个食材箱： ☑ 地底洞穴：代币 ×3 ☑ 地底洞穴：金钱 ×50 ☑ 地底洞穴：代币 ×3 ☑ 地底洞穴：食材箱 ☑ 地底洞穴：生命宝珠 ☑ 地底洞穴：装备零件 ☑ 地底洞穴：金钱 ×50 ☑ 地底洞穴：装备零件 ☑ 地底洞穴：生命宝珠 ☑ 地底洞穴：食材箱

第二章

剧情节点 1：格林堡

任务 1：「白鲸港」也没杰斯本说得那么危险，四处探索下吧。

• 可以在「小狗开开」购物了：
  • 食物： ☑ 啤酒⚠ ☑ 蔬菜杂烩☆⚠ ☑ 吐司☆⚠ ☑ 豆子浓汤☆⚠ ☑ 猪肘子☆⚠
  • 食材： ☑ 牛奶☆ ☑ 蛋 ☑ 火腿☆ ☑ 五花肉☆ ☑ 生菜☆ ☑ 蘑菇⚠ ☑ 南瓜☆ ☑ 洋葱 ☑ 苹果☆ ☑ 柠檬☆ ☑ 蒸汽胡椒 ☑ 熔岩糖☆
  • 特殊物品： ☑ 升级背包：5 个格子
• 4 个宝箱（目前进度 28/102）： ☑ 山谷：金钱 ×50 ☑ 猎人小屋：代币 ×3 ☑ 格林堡：代币 ×3 ☑ 格林堡：金钱 ×50

任务 2：尤瓦说村外的山上有间小屋，可以去那里休息。

• 1 个宝箱（目前进度 29/102）： ☑ 木鲸鱼：金钱 ×50

剧情节点 2：不速之客

任务 1：追上破坏农场的犯人，给他点颜色看看。

• 5 个宝箱（目前进度 34/102），1 个食材箱： ☑ 森林入口：生命宝珠 ☑ 森林入口：装备零件 ☑ 怪异森林：代币 ×3 ☑ 怪异森林：生命宝珠 ☑ 怪异森林：金钱 ×50 ☑ 怪异森林：食材箱

任务 2：「怪异森林」深处的奇怪设施，让人感觉很不舒服，赶快离开这个地方。

• 1 个宝箱（目前进度 35/102）： ☑ ？？？：装备零件

剧情总结：我们是「格林堡」的守卫者，我们抓到了破坏农场的犯人。虽然误入了奇怪的设施，但是晚上的宴会真是精彩啊！

• 最后一次在「小狗开开」购物的机会

第三章

剧情节点 1：大坝城

任务 1：从来没见过这么大的城市，这里到处都是机会和挑战。

• 2 个宝箱（目前进度 37/102）： ☑ 十八铺：代币 ×3 ☑ 公主街：高级装备零件
• 支线任务： ☑ 公主街：鬼故事（目前进度 1/5）

任务 3：研究员的第一份任务，目标：旧大坝城的「黏菌培养炉」。

• 可以在「大力水产」购物了： ☑ 章鱼☆⚠ ☑ 龙虾☆⚠
• 可以在「友好商店」购物了：
  • 食物： ☑ 珍珠奶茶☆⚠
  • 食材： ☑ 蛋⚠ ☑ 豆腐☆⚠ ☑ 火腿⚠ ☑ 禽肉☆⚠ ☑ 白萝卜☆⚠ ☑ 茄子☆⚠ ☑ 洋葱⚠ ☑ 白菜☆⚠ ☑ 番茄⚠ ☑ 蒸汽胡椒 ☑ 熔岩糖
  • 特殊物品： ☑ 升级背包：7 个格子
• 可以在「电气螳螂酒庄」购物了： ☑ 电气螳螂酒☆⚠ ☑ 电气果汁☆⚠
• 可以在「田山商店」购物了： ☑ 冰淇淋☆⚠ ☑ 布丁☆⚠
• 2 个宝箱（目前进度 39/102）： ☑ 爵士二十一：金钱 ×50 ☑ 向阳坡：装备零件
• 支线任务： ☑ 十八铺：垃圾桶（目前进度 1/3） ☑ 向阳坡：鬼故事（目前进度 2/5）

任务 4：城外的车站被怪物占据了，去打败他们。

• 1 个宝箱（目前进度 40/102），1 个食材箱： ☑ 大坝城外：装备零件 ☑ 大坝城外：食材箱

任务 5：通往旧大坝城的道路打开了，现在去拿回「黏菌培养炉」。

• 6 个宝箱（目前进度 46/102），1 个食材箱： ☑ 大坝城外：代币 ×3 ☑ 旧大坝城：装备零件 ☑ 旧大坝城：「强尼的好伙伴」 ☑ 旧大坝城：高级装备零件 ☑ 旧大坝城：食材箱 ☑ 旧大坝城：生命宝珠 ☑ 旧大坝城：100 金币

任务 6：目标达成！回实验室，向艾娃报告吧。

• 1 个宝箱（目前进度 47/102）： ☑ 大坝城外：装备零件
• 可以在「爵士二十一」购物了： ☑ 大坝寿司☆⚠ ☑ 饭团☆⚠ ☑ 清酒☆⚠ ☑ 性感海滩☆⚠ ☑ 草莓牛奶☆⚠

剧情节点 2：「钱屋」

任务 2：晚饭的时候到了，珊还没有回来，让人有点担心。

• 1 个宝箱（目前进度 48/102）： ☑ 钱屋：金钱 ×50

剧情节点 3：琉璃浆果

任务 1：山佬的农场里有独一无二的「琉璃浆果」，这是今天的关键材料。

• 3 个宝箱（目前进度 51/102）： ☑ ？？？：生命宝珠 ☑ ？？？：高级装备零件 ☑ 废弃的民居：高级装备零件
• 支线任务： ☑ 十八铺：制作「汉堡」给阿健，得知需要去下水道获得菜谱 ☑ 大坝城外：在湖心岛获得珊的特殊能力护盾

任务 2：「琉璃浆果」到手了，回火箭公寓让力哥见识见识。

• 支线任务： ☑ 力汤温泉：鬼故事（目前进度 3/5） ☑ 地下铁：垃圾桶（目前进度 2/3）

剧情节点 4：火候

任务 1：「大坝蟹」就要上市了，要抢先预订才行。

• 1 个宝箱（目前进度 52/102）： ☑ 下水道：金钱 ×50
• 支线任务： ☑ 龙门市场：鬼故事（目前进度 4/5） ☑ 下水道：买「炒蔬菜」的菜谱 ☑ 下水道：鬼故事（目前进度 5/5）

任务 2：买到「大坝蟹」，就能开始料理了。

• 可以在「威廉贸易」购物了： ☑ 琉璃果酱☆⚠
• 可以在「龙门市场」购物了：
  • 食物： ☑ 馕☆⚠ ☑ 肉夹馍☆⚠ ☑ 米粉☆⚠
  • 食材： ☑ 苹果 ☑ 柠檬⚠ ☑ 菠萝☆⚠ ☑ 鱼☆ ☑ 蒸汽胡椒 ☑ 熔岩糖 ☑ 打火薄荷☆
• 「大力水产」增加了新商品： ☑ 蟹☆⚠
• 支线任务： ☑ 十八铺：制作「炒蔬菜」给阿健，得知需要最后一道料理 ☑ 爵士二十一：获得「健身套餐」菜谱 ☑ 十八铺：制作「健身套餐」给阿健，阿健的支线任务完成 ☑ 十八铺：前往墓地，鬼故事的支线任务完成

任务 4：剧团遇到了大危机，不能坐视不管。

• 1 个宝箱（目前进度 53/102）： ☑ 大坝公园：代币 ×3

剧情节点 5：真的「黄金」

任务 1：去「大站」，同威廉、丹尼尔集合。

• 「友好商店」增加了新商品： ☑ 升级背包：8 个格子
• 支线任务： ☑ 大坝公园：玩游戏，获得代币 ×6

任务 2：地震谷在东边，垃圾场的尽头。

• 3 个宝箱（目前进度 56/102），1 个食材箱： ☑ 大坝城外：装备零件 ☑ ？？？：高级装备零件 ☑ ？？？：生命宝珠 ☑ ？？？：食材箱
• 支线任务： ☑ 大坝城外：在隐藏道路获得珊的特殊能力回血，达成「天赋异禀」成就

任务 3：找到「地震鲶鱼」，就找到了「山谷黄金鱼」。

• 5 个宝箱（目前进度 61/102），1 个食材箱： ☑ 地震谷：金钱 ×50 ☑ 地震谷：装备零件 ☑ 地震谷：高级装备零件 ☑ 地震谷：食材箱 ☑ 地震谷：生命宝珠 ☑ 地震谷：山谷珍珠

任务 4：最后的机会了，回火箭公寓，给力哥点厉害看看。

• 支线任务： ☑ 公主街：把「山谷珍珠」给大坝城站门口的秘书 ☑ 龙门市场：完成垃圾桶的支线任务，达成「有心人」成就

第四章

剧情节点 1：「风神」

任务 1：「黑潮」袭击大坝城，艾娃需要帮助，去大坝控制室。

• 1 个宝箱（目前进度 62/102）： ☑ 风神庙：高级装备零件

剧情节点 2：台风眼

任务 1：约翰做了好吃的咖喱，去送给控制室的艾娃她们。

• 最后一次在「龙门市场」购物的机会

任务 2：「黑潮」又来了，艾娃需要我们的帮助，快去控制室。

• 8 个宝箱（目前进度 70/102），2 个食材箱： ☑ 大坝内部：装备零件 ☑ 大坝内部：100 金币 ☑ 大坝下层：装备零件 ☑ 大坝下层：高级装备零件 ☑ 大坝下层：生命宝珠 ☑ 大坝下层：食材箱 ☑ 大坝下层：100 金币 ☑ 大坝上层：生命宝珠 ☑ 大坝上层：食材箱 ☑ 大坝核心：高级装备零件

第五章

进入梦境

1 个宝箱（目前进度 71/102）： ☑ 梦境：代币 ×3

剧情节点 1：余波

任务 2：我居然睡了那么久！约翰出门了，他或许需要我的帮助。

• 最后一次在「大力水产」购买蟹的机会

任务 3：「笨蛋兄弟」又出事了，好像是被困在大坝深处了。

• 4 个宝箱（目前进度 75/102），1 个食材箱： ☑ 下水道：代币 ×3 ☑ 下水道：生命宝珠 ☑ 下水道：金钱 ×50 ☑ 下水道：食材箱 ☑ 下水道：高级装备零件

第六章

剧情节点 2：「猴莱坞」

任务 1：「铁梦丸」被困在奇怪的雾里了，也许这列火车上有离开的线索。「铁梦丸」修好之前，去火车上探索下吧。

• 1 个宝箱（目前进度 76/102）： ☑ 摄影棚：代币 ×3

任务 2：猴子们拜托约翰出演他们的电影，作为报酬，可以得到他们的火箭。

• 可以在「香蕉牛奶」购物了：
  • 食物： ☑ 香蕉牛奶☆⚠ ☑ 巧克力香蕉☆⚠ ☑ 小青蛙饼干☆⚠
  • 食材： ☑ 奶 ☑ 蒸汽胡椒 ☑ 熔岩糖 ☑ 打火薄荷

任务 4：原来，「火箭骑士」的火箭只是个布景。时候不早了，先去找「制片人」吧。休息一晚，明天再做打算。

• 1 个宝箱（目前进度 77/102）： ☑ 特摄车厢：金钱 ×100
• 支线任务： ☑ 摄影棚：玩游戏，获得代币 ×3

剧情节点 3：所罗门

任务 1：又来了一个所罗门，他把我们跟猴子都关起来了。要打败他，得先找回武器。

• 4 个宝箱（目前进度 81/102）： ☑ 道具车厢：金钱 ×100 ☑ 特摄车厢：装备零件 ☑ 特摄车厢：高级装备零件 ☑ 人类工厂：生命宝珠

任务 3：伊莎贝尔的火箭就在「猴莱坞」，找到它，我们就能冲出迷雾了。

• 最后一次在「香蕉牛奶」购物的机会

第七章

剧情节点 1：「未来」

任务 2：我们成了潘姆船长的邮递员。现在得把邮件都送到收信人手上。

• 可以在「妈妈面包」购物了： ☑ 大列巴☆⚠
• 可以在「蜂蜜狗超级市场」购物了：
  • 食物： ☑ 伏特加☆⚠ ☑ 腌黄瓜☆⚠ ☑ 巴甫洛娃蛋糕☆⚠ ☑ 炖肉☆⚠ ☑ 泡芙☆⚠
  • 食材： ☑ 奶酪☆⚠ ☑ 奶⚠ ☑ 五花肉⚠ ☑ 肉排☆⚠ ☑ 贝☆⚠ ☑ 鱼⚠ ☑ 胡萝卜☆⚠ ☑ 南瓜⚠ ☑ 生菜⚠ ☑ 沙果⚠ ☑ 苹果⚠ ☑ 樱桃☆⚠ ☑ 蒸汽胡椒⚠ ☑ 熔岩糖⚠ ☑ 打火薄荷⚠ ☑ 电气辣酱☆⚠
  • 特殊物品： ☑ 升级背包：9 个格子
• 3 个宝箱（目前进度 84/102）： ☑ 五号码头：高级装备零件 ☑ 智慧大街：装备零件 ☑ 快乐湾：金钱 ×100

剧情节点 4：过去的光景

任务 1：「时间岛」上有个叫托马斯的老人，要想知道伊莎贝尔的线索，我们需要找到他。

• 2 个宝箱（目前进度 86/102）： ☑ 时间岛：高级装备零件 ☑ 时间岛：装备零件

任务 2：托马斯在码头等我们，他要跟我们一起回到「未来」。

• 1 个食材箱： ☑ 时间岛：食材箱
• 支线任务： ☑ 时间岛：给珊的能力升级

任务 4：该回「船坞」找托马斯了。

• 1 个宝箱（目前进度 87/102）： ☑ 列车墓地：高级装备零件

任务 8：「时间火种」一定就藏在所罗门的墓地里。

• 5 个宝箱（目前进度 92/102），1 个食材箱： ☑ 墓室：生命宝珠 ☑ 时间岛：高级装备零件 ☑ 时间岛：金钱 ×150 ☑ 时间岛：高级装备零件 ☑ 时间岛：食材箱 ☑ 墓室：装备零件

剧情节点 5：无限大厦

任务 2：艾娃和伊莎贝尔一定就在塔顶，前进！

• 最后一次在「妈妈面包」购物的机会
• 最后一次在「蜂蜜狗超级市场」购物的机会
• 最后一次游玩「大地之子」的机会
• 最后一次抽「皮克球」的机会
• 6 个宝箱（目前进度 98/102），2 个食材箱： ☑ 无限大厦二号平台：高级装备零件 ☑ 无限大厦二号平台：金钱 ×100 ☑ 无限大厦二号平台：金钱 ×100 ☑ 无限大厦二号平台：高级装备零件 ☑ 无限大厦三号平台：生命宝珠 ☑ 无限大厦三号平台：金钱 ×150 ☑ 无限大厦三号平台：食材箱 ☑ 无限大厦四号平台：食材箱
• 支线任务： ☑ 列车墓地：在「铁梦丸」给音速小子升级

任务 3：「时间力场」解除了，这才是真正的「未来」…我们还是必须前进，登上「无限大厦」。

• 1 个宝箱（目前进度 99/102）： ☑ 真·无限大厦：生命宝珠

第八章

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

• 这篇食谱是根据 Bilibili 的一个香煎土豆片的视频按照个人习惯进行了改良后得到的，毕竟不辣的土豆没有灵魂。
• 我并不是烹饪达人，所以，如果您对任何步骤或者用量有自己的见解，那您说的都是对的。

材料

工具

• 炒菜锅/平底锅、锅铲、筷子
• 「一勺」：普通的喝汤的勺子，或者通常我们所说的「1 匙」的那种计量勺

食材

• 一勺料酒或者米酒，我也不知道为什么我家把米酒当料酒用
• 一勺生抽
• 半勺老抽
• 三勺醋，黑的那种
• 200 克土豆（2 个中等大小的土豆或者 1 个特别大的土豆）
• 1 根葱，切成葱花
• 3 粒大蒜，切成末
• 一勺生抽
• 一勺辣椒酱，也可以替换成豆瓣酱或老干妈，按照自己口味选即可
• 食用油

做法

1. 土豆切成 0.5 厘米左右的土豆片。
   • 原视频在这一步后还把土豆片放入水中煮了两分钟才拿去煎，但我觉得没必要，而且煮过的土豆片如果没把水分滤干的话煎的时候还会变成灾难般的溅油现场。
2. 锅底刷一层油，用小火将土豆煎至中央偏透明的程度后盛出。
   • 煎好的土豆周围一圈是实的黄色，但是中间稍微带有一些透明感，和边缘对比起来很明显，这样的土豆就可以夹出了。但是如果土豆片中间也有一些部分是实的黄色则说明土豆还未完全熟透。
   • 煎的过程里需要多翻面以免粘锅；火太大的话操作来不及也有可能粘锅，所以建议火小一些。
   • 因为土豆量较多，使用普通的炒锅可能需要分批煎 4-5 次（平底锅的话或许不需要那么多次），期间可能原先的油会不够用，需要再加一点。
   • 筷子给太薄的土豆片翻面或夹出时可能会有些困难，可以配合锅铲操作。
3. 不要洗锅，在保留了煎土豆所用的油的锅内加入一勺辣椒酱和切好的蒜，中火炒到周围的油被辣椒酱染成偏红色且蒜和辣椒酱充分混合后加入之前煎好的土豆和一勺生抽，翻炒入味。
4. 锅内食材翻炒混合得差不多后撒上葱花，翻炒均匀后出锅。
   • 可以在放葱的时候再放点芝麻/孜然，按照个人喜好即可。

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

• 只是一个随手的记录留着以后用，按照我妈口头给的做法做的，所以用量数值没有精确到克，取而代之的是一些家用的餐具作为量具，相当乱来。
• 我并不是烹饪达人，所以，如果您对任何步骤或者用量有自己的见解，那您说的都是对的。

材料

工具

• 炒菜锅、锅铲、筷子
• 「一碗」：普通的吃饭的碗，我感觉我家的直径 10 cm 左右
• 「一勺」：普通的喝汤的勺子，或者通常我们所说的「1 匙」的那种计量勺
• 「一盘」：普通的盘子，我感觉我家的直径 20 cm 左右

腌料

• 一勺料酒或者米酒，我也不知道为什么我家把米酒当料酒用
• 一勺生抽
• 半勺老抽
• 三勺醋，黑的那种

其他

• 一盘排骨，按照骨头切成小块，每块最多一截骨头，方便腌入味也方便煎
  • 对不起我真不知道具体有多少克，毕竟平时做菜没人会去称今晚用了多少克菜，我估摸着应该是 500 克，总之是平摊着可以摆一盘
• 食用油
• 盐
• 三勺白砂糖
• 一勺醋，黑的那种
• 一根葱，切成细细的葱花

做法

1. 装半锅水，大火，把水烧开。
2. 下排骨直到排骨熟了后水再次被烧开。
3. 把排骨捞出来滤水，然后放入调配好的腌料里，记得要让排骨各处都沾上腌料。建议用个盘子，这样可以腌一会翻个面，感觉比较方便腌还能均匀入味。
4. 将锅内煮肉的水倒出来，怎么利用都可以，但是要保留半碗，待会要用。
5. 洗洗锅，把锅内残留的水烧干，然后在锅内倒油，让锅底和锅边缘靠底部的地方都沾上油。
6. 接着下排骨开始煎，用大火。基本上煎一会就要翻面，全部排骨都翻一遍后第一块大概又该翻面了，所以基本上是永动机式煎排骨，直到排骨各个面都焦黄为止。
   • 下排骨时可以先把火关小，一块一块慢慢放置在锅内，然后再开到大火。
   • 所谓的焦黄就是除了通体红棕红棕的颜色以外有一点点更深的褐色，但绝对不是糊了。
   • 油会溅出来，筷子建议拿上一点，不然油会溅到手。什么您戴手套？那没事了。
7. 拿锅铲铲几下防止粘锅，然后把火关小一点。倒入之前的腌料，倒半碗之前留着的煮排骨的水（去掉漂浮的肉渣），加三勺白砂糖，再给每块排骨都均匀地撒一点盐。
   • 撒盐这种事在中华美食的博大精深中一直是个玄学，虽然大家都说「撒一点」，但是没人知道「一点」到底是多少，所以按照自己平时烹饪的习惯来即可。
   • 如果撒盐时怕手抖需要精确数值的话我估摸着大概半勺盐吧。
8. 火再开到大火，铲几下让白砂糖和盐融化，也顺带让排骨们都再沾上点腌料。
9. 盖上锅盖，等到国内液体被烧开后关到中小火。直到液体变得浓稠、变成酱汁时加一勺醋，再炒几下让排骨们都吃点醋。此时的排骨闪现着光泽。
10. 出锅！在摆盘后撒上切好后不知道在一旁摆了多久的葱花显得好看一点。

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

• 本系列教程是建立于「写意」平台基础上的个人博客主页建设指南，应该能应用于其他 Write Freely 的社区，内容基本上是我在建设主页过程里的笔记的归纳和一些资料的整理，目标是让没有编程基础的用户也能够看懂并使用，故大概不会涉及到较为复杂的部分。
• 如果您是专业人士或已经有了不少利用 HTML/CSS 以及 Markdown 写作及建设个人主页的经验，我想这份教程或许对您并没有什么用处，但是欢迎指出任何错误或是遗漏的地方。

这篇文章主要关于使用 Write Freely 和自定义 CSS 的一些小技巧，主要参考了 CSS 文档的内容。

修改 CSS 的基本流程

虽然在上几篇教程中已经提到了 CSS 的基本编写规则、HTML 的阅读方式以及一些 CSS 格式声明的属性，但如果您还是不太明白如何运用它们的话，可以遵循以下的流程：

1. 决定您想要修改的页面元素，并寻找所需的选择器。
   如果您想改的这个元素本身就包括在了提供的 CSS 模版里，那您可以直接在那个选择器中添加或修改格式声明。否则，您需要打开博客的 HTML 源代码阅读标签进行填写。 比如说，如果您想要给您的博客增加一个背景图片，那么覆盖对象是整个博客的选择器就是 body，而之前提供的模版里确实有 body {}。因此，您只需要在这个现有的 body {} 中进行修改即可。 如果您想要修改的界面元素并未出现在之前的模版里，那么您需要按照第五篇教程的内容（尤其是讲解 #blog-title a 这个选择器的部分）阅读网页源代码并找到需要的选择器内容。

2. 决定您想要修改的格式，并查找对应的 CSS 属性。
   假如您想修改背景图片，那么对应的 CSS 属性就是 background-image；假如您想给文字增加阴影，那么对应的属性就是 text-shadow……如果您想要修改的格式并没有在前几篇教程内被提及，您可以通过网络搜索「CSS 您想要修改的格式描述」这样的关键词来查找对应属性。

3. 根据您想要修改的格式的具体样式来填写该属性的数值，完成这条格式声明。
   假如您想修改背景图片，那么您需要在获取该图片的直链后编写 background-image: url(图片直链);；假如您想给文字增加阴影，那么您需要按照 text-shadow 所拥有的数值的几个组成部分来进行阴影样式的设计，再按照 text-shadow: 横向移动距离 竖向移动距离 模糊半径 颜色; 的格式进行编写…… 这个部分就是最为自由灵活的环节，您通常可能需要多次尝试和调整才能达到您最满意的效果。

4. 将格式声明放置在选择器后的括号内。
   假如您想修改博客的背景图片，那么选择器是 body，格式声明是 background-image: url(图片直链);，组合起来就是：
   

   body {
       background-image: url(图片直链);
   }

5. 如果您对该元素想进行的格式设计不止一种，请重复 2-4 的过程，直到所有格式声明都被编写完毕。

6. 应用到主页里看看效果如何，并酌情进行调整。如果有什么问题，可以按照第五篇教程最后提到的几个排查问题的思路进行排查。

您只需要不停重复以上六点，直到您想要修改的界面元素都拥有了您新设计的格式后就大功告成了——您拥有了基本完全由您自定义的个性化主页！

同时给多个元素赋予相同的格式

假如您想给多个元素赋予相同的格式，首先，您可以看看它们所对应的标签是否共有相同的 class 属性。 比如主页里的所有文章标题的 <h2> 标签都拥有 class="post-title" 这一属性，那么您就可以直接用 .post-title {} 进行编写，给主页的所有文章标题赋予相同的格式。

如果您想要统一格式的这几个元素并没有共用 class="" 的数值，那么您需要分别找到每个元素所对应的选择器内容，然后将它们用 , 隔开。 比如您想让博客标题和博客简介拥有统一的格式，那么首先您需要知道博客标题对应的选择器是 #blog-title a，以及博客简介的选择器是 .description。随后，您可以用 #blog-title a, .description {} 进行编写。

设置置顶

前面的教程里曾提到关于自定义置顶的文字格式的内容。 如果您并不知道如何设置位于主页标题和简介下方的置顶栏内容的话，您只需在博客主页里将鼠标放置在想要设置成置顶的文章的标题上，并点击随之浮现出的文字中的「置顶/Pinned」即可。这篇文章将会从博客主页的文章列表消失，且文章标题会出现在置顶栏内。

自定义文章 URL 结尾

不知您是否发现，这系列的教程的 URL 的结尾都是统一的「writee-tutorial-数字」。这是因为我利用了文章 URL 的生成原理进行了结尾部分的自定义。

一般来说，您的博客主页的 URL 是您所在的 Write Freely 社区的 URL + 「/」 + 您的用户名。比如我所在的「写意」的 URL 是 「https://writee.org」，而我使用的用户名是「gellneko」，因此我的博客主页的 URL 就是「https://writee.org/gellneko/」。 而每篇文章的 URL 则是在博客主页的 URL 后面再加上发布时的文章标题或开头的文字内容，其中大写字母会转化为小写，中文会转化为拼音，空格会转化为「-」。也就是说，您只需要在发布时将文章标题设置成您想自定义的 URL 结尾内容，再在发布后编辑文章，将标题改为您真正的标题即可。

比如，虽然这篇教程的标题是「『我们可以很简单就拥有个人主页⑧』装修主页吧！·技巧篇」，但是实际上在我发布文章时的标题是「Writee Tutorial 8」。因此，文章发布所用的 URL 就是「https://writee.org/gellneko/writee-tutorial-8」。随后，我再将标题改为现在的版本，但保留了发布文章时的 URL。

这个技巧最大的用处除了造福强迫症和进一步增加页面的统一性及美观外，还可以在某些情况下发链接时直接手打而不是特地打开网页再复制地址栏内容。

这一技巧也有缺点：如果有人关注了您的博客，那么您发布文章时显示在对方 Fediverse 的社区主页的动态将会是您发布文章时的标题，即您用来作为 URL 结尾内容的文字。如果您设计的 URL 结尾与文章内容无关，可能您的关注者并看不出来这篇文章的内容是什么。

实用 CSS 代码

接下来是一些我觉得或许对您有用的 CSS 代码及选择器名称，您可以按需求直接复制并增加到您的代码里。

隐藏文章页面左上角的阅览数：

.views {
    display: none;
}

自定义超链接的文字格式：

/* 访问前 */
article a:link {
    /* 您想要的文字格式声明 */
}

/* 访问后 */
article a:visited {
    /* 您想要的文字格式声明 */
}

自定义标签（tag）的文字格式：

.hashtag {
    /* 您想要的文字格式声明，可能需要在格式声明结尾加上「!important」 */
}

使用预览（<!--more-->）时在主页增加类似「查看全文」的文字：

.read-more::before {
    /* 因为系统可能读取不了中文，「文字内容」需要是英文或者符号 */
    content: '文字内容';
}

感谢您的阅览。 那么这系列教程将在此告一段落，以后可能会有不定期的更新来分享一些我觉得可能会有用的修改主页的 CSS 代码。 祝您的博客生活愉快，也希望您能拥有自己喜欢的个性化主页。

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

• 本系列教程是建立于「写意」平台基础上的个人博客主页建设指南，应该能应用于其他 Write Freely 的社区，内容基本上是我在建设主页过程里的笔记的归纳和一些资料的整理，目标是让没有编程基础的用户也能够看懂并使用，故大概不会涉及到较为复杂的部分。
• 如果您是专业人士或已经有了不少利用 HTML/CSS 以及 Markdown 写作及建设个人主页的经验，我想这份教程或许对您并没有什么用处，但是欢迎指出任何错误或是遗漏的地方。

这篇文章主要关于 CSS 内设置图像用的格式声明及其属性，主要参考了 HTML 基础教程和 CSS 文档的内容。

在介绍图像相关的属性声明之前，我们需要简单了解一下 HTML 和 CSS 究竟是怎样呈现各个元素的。 您可以想象一个「盒子」，每个元素都是被放置在这样一个不可见的「盒子」中的，「盒子」之中可能装着另一个「盒子」，就像标签内可以包含其他标签一样。而您可以自由设置「盒子」的背景、「盒子」的边缘、「盒子」的边框、元素离「盒子」边缘的距离、元素在「盒子」之中的摆放位置等等。 修改每一个元素里的图像相关的内容，就相当于修改这个「盒子」相关的内容。

background-color

background-color 用来设置盒子的背景颜色。与字体颜色类似，直接填写颜色的名字或十六进制编码即可。

background-image

既然背景颜色可以被修改，那么背景也可以直接用图像表示。您可以使用 background-image 这个声明来设置某一元素的背景：

background-image: url(图片直链);

如果您选择的图片中有透明背景的 .png 文件，那么背景可以叠加。您只要使用 , 隔开两个 url() 即可。其中写在前面的图片会叠在最上层：

background-image: url(上面的图片直链), url(底下的图片直链);

background-repeat

一般来说，假如背景图片的尺寸不足以覆盖整个盒子，那么空白处会呈现出重复的图像来使背景图片平铺在整个盒子中。您可以利用 background-repeat 来设定是否让背景图片重复：

• background-repeat: repeat;：全方面无死角重复，边缘摆放不下完整图片的话会裁剪掉边缘的图片
• background-repeat: repeat-x;：只横向重复，会裁剪边缘
• background-repeat: repeat-y;：只竖向重复，会裁剪边缘
• background-repeat: no-repeat;：不重复，空白处保留空白
• background-repeat: space;：重复，如果边缘摆放不下完整图片会选择在重复图片之间留出空隙而不是裁剪
• background-repeat: round;：重复，如果边缘摆放不下完整图片会选择压缩全部图片的大小来保证所有重复图片都能够平铺出来

background-position

如果您的背景图片的尺寸较小，您可以用 background-position 来自定义其摆放位置。 您可以直接用表示位置的词来作为属性数值：

• background-position: left;：最左边
• background-position: right;：最右边
• background-position: top;：最上方
• background-position: bottom;：最底部
• background-position: center;：正中

当然，如果您想将背景图片摆放在特定的位置，您需要填写其横纵坐标。

background-position: 横坐标 纵坐标;

其中，横坐标表示图片离盒子左边框的距离，纵坐标则是图片离盒子上边框的距离。您可以使用的单位依旧与 font-size 所使用的相同，不过，此时的百分比表示的是图片摆放的位置是盒子的宽或高的百分之几。

如果您不想利用左边框和上边框作为基准，您可以在数值之前加上边框的名称：

background-position: 边框 距离 边框 距离;

比如 background-position: bottom 10px right 20px; 表示该元素的背景位于元素所在的盒子的离下边框 10 px、离右边框 20 px 的位置。

margin

margin 代表盒子的透明边缘，即这一元素会与周围的其他元素之间间隔多少距离。 您可以分别为上下左右四个边缘的宽度进行自定义的设置，使用的单位依旧与 font-size 的相同。

margin: 上 右 下 左;

您同样可以不填其中的某项数值，不过如果 margin 的属性数值不足四项，它会按照如下的规律进行边缘宽度的设置：

• 一个：全部边缘都按照此数值设置
• 两个：两个数字将按顺序分别设置上下和左右边缘
• 三个：三个数字将按顺序分别设置上、左右和下边缘

如果您只是单纯想要不设置其中某条边缘，那么您只需要在其对应的位置填写 0 即可。 比如，如果您想设置上边缘为 10 px、下边缘为 5 px 以及左边缘为 15 px，但不想设置右边缘的话，您需要编写 margin: 10px 0 5px 15px;。

border

border 用来设置盒子的边框，它的属性数值由多个部分组成：

border: 粗细 样式 颜色;

其中，样式主要有以下几种：

• solid：单实线
• dashed：虚线
• dotted：点线

border 含有的样式其实不止这几种，但经过测试后我发现有一部分在这里似乎无法正常生成，故不做介绍。

border-radius

如果您希望您的边框的四个角是曲线而非直角，您可以使用 border-radius 进行调整：

border-radius: 左上角 右上角 左下角 右下角

可以使用的数值单位和 font-size 所使用的相同。您同样可以省略其中几个部分的数值，按照您填写的数值数量，规律如下：

• 一个：全部角都按照此数值设置
• 两个：两个数字将按顺序分别设置左上右下和右上左下的角
• 三个：三个数字将按顺序分别设置左上角、右上角左下角和右下角

填写 0 代表该角为直角。

padding

padding 所控制的是元素距离盒子的边框的距离。与边缘的 margin 相似，您可以设置盒子内元素离盒子的上下左右四个边框的距离：

padding: 上 右 下 左;

其余的规律，如省略掉其中几个部分的数值后的结果，皆与 margin 相同：

• 一个：离全部边框的距离都按照此数值设置
• 两个：两个数字将按顺序分别设置离上下边框和左右边框的距离
• 三个：三个数字将按顺序分别设置离上边框、左右边框和下边框的距离

如果您只是单纯想要不设置离某条边框的距离，那么您只需要在其对应的位置填写 0 即可。

box-shadow

与文字阴影的 text-shadow 类似，box-shadow 可以设置元素所在的盒子的阴影。属性数值的组成也相同：

box-shadow: 横向移动距离 竖向移动距离 模糊半径 颜色;

横向与竖向的移动距离数值为正数时说明是向右方和下方移动；负数则表示向左方和上方移动。 您可以增加多个阴影，需使用 , 隔开每个阴影的属性数值。

插入边框

如果先用 border 设计一个边框，再把上面提到的其它格式声明组合在一起，将其赋予某段文字，会发生什么呢？ 是的，您可以把这篇文章所提到的格式声明结合起来，为一段文字加上喜欢的边框。

首先设计一个边框吧！ 您可以自由搭配各类格式声明，组合成您想要的边框——就像做炖菜一样，放入自己喜欢的食料，再将它们炖在一起。

✎ 例如

/* 2px 的虚线黑色边框*/
border: 2px dashed black;
/* 背景颜色为 WhiteSmoke */
background-color: whitesmoke;
/* 左上、右上和右下角设置了 50px 的弧度 */
border-radius: 50px 50px 50px 0;
/* 让文字离四周的边框保持 20px 的距离 */
padding: 20px;
/* 阴影向右移动 15px，向下移动 10px，以 5px 为半径模糊，颜色为灰色 */
box-shadow: 10px 5px 5px gray;

边框设计好了！要如何应用呢？ 您需要在写作时利用 HTML 的 <div> 标签把想要增加边框的段落框起来，比如 <div>文本</div>。

接下来您有两个选择：

1. 如果只是想给这一段文字加特殊的边框，该边框只使用一次：
   在 <div> 标签内增加 style=“” 的标签属性，并在引号内填写制作边框所用的格式声明。

   ✎ 例如

   输入：

   <div style = “border: 2px dashed black; background-color: whitesmoke; border-radius: 50px 50px 50px 0; padding: 20px; box-shadow: 15px 10px 5px gray”>文本</div>

   效果：

   文本
2. 如果您想要重复使用这个边框，即给多个文本赋予相同的边框格式：
   首先，您需要在 <div> 标签内增加 class=“boxed” 的标签属性，即 <div class=“boxed”>文本</div>。利用这个标签将各处的您想要增加边框的文本框起。

   随后，进入博客「自定义 CSS」的界面。

   如果您有阅读过第五篇教程里关于通过阅读 HTML 源代码来填写 CSS 选择器的部分，那么或许您已经猜到接下来要做什么了。 是的，我们可以利用新增的 class 属性配合 CSS 选择器可以用的 . 来快速给这几个生成边框所用的 <div> 标签赋予格式。

   您只需在 CSS 代码中增加一个新的 .boxed 选择器，即输入 .boxed {}，并在括号内填写制作边框所用的格式声明。

   发布文章后，您就可以看到这些位于 <div class=“boxed”> 和 </div> 之间的文本都拥有了您设计的边框。

   ✎ 例如

   输入：

   <div class=“boxed”>有边框的文本 1</div>
   没有边框的文本
   <div class=“boxed”>有边框的文本 2</div>

   在「自定义 CSS」中新增：

   .boxed {
       border: 2px dashed black;
       background-color: whitesmoke;
       border-radius: 50px 50px 50px 0;
       padding: 20px;
       box-shadow: 10px 5px 5px gray;
   }

   效果：

   有边框的文本 1

   没有边框的文本

   有边框的文本 2

更多属性

至今介绍过的格式声明的属性只是 CSS 所拥有的属性里的冰山一角，我只是从属性列表中选取了或许能够满足基本需求的一部分属性。而且列举的每一个属性可以填写的属性数值也不一定完整，有一些属性数值因为常用浏览器不支持或是过于复杂等缘故并没有被介绍。

如果您想要探索 CSS 的更多可能性，可以在网上查询 HTML/CSS 文档或相关教程，进行更为专业、系统的学习。因为我阅读的教程和文档都是英文的，并没有特地对比过相关的中文网站，恕无法做出推荐。 不过您要是好奇的话，我学习 Web 前端主要使用的英文网站是 MDN，它部分页面也支持中文，但是并没有翻译完整。

感谢您的阅览。 下一篇教程将会介绍一些小技巧以及或许对您有用的 CSS 代码。

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

• 本系列教程是建立于「写意」平台基础上的个人博客主页建设指南，应该能应用于其他 Write Freely 的社区，内容基本上是我在建设主页过程里的笔记的归纳和一些资料的整理，目标是让没有编程基础的用户也能够看懂并使用，故大概不会涉及到较为复杂的部分。
• 如果您是专业人士或已经有了不少利用 HTML/CSS 以及 Markdown 写作及建设个人主页的经验，我想这份教程或许对您并没有什么用处，但是欢迎指出任何错误或是遗漏的地方。

这篇文章主要关于 CSS 内装饰文字用的格式声明及其属性，主要参考了 HTML 基础教程及 CSS 文档的内容。

CSS 的格式声明非常多，在这里我会介绍可能会比较频繁被用到的一些关于设置文字格式的声明的属性。不过在此之前……

您还记得修改文字的颜色、字号、字体的 HTML 语法吗？假如我们想要修改文章中的某一段文字为红色的 12 号字，且字体为「Times New Roman」，我们会这么写：

<span style="color:red; font-size:12px; font-family:'Times New Roman'">文字</span>

其中，style="" 的引号内的内容是我们设置的字体格式的内容，它们的写法/格式是不是有些眼熟？ 没错，它们就是这段文字字体的格式声明。

在 HTML 中，如果您只是想给某一个特别具体的元素（比如某一段文字、某一个单独的物件等）赋予格式，您只需在写文章时在这个元素所用的标签内增加 style="" 这一标签属性，并在引号内填写 CSS 的格式声明即可。 比如上文中的这个修改某段文字的格式的写法，正是因为我们只是想给某一段文字设置格式，所以比起使用 CSS，我们选择直接用文章内的 HTML 指令来进行格式的设置。

我们在设置某段文字的格式时所使用的 <span> 标签就是在 HTML 中专门用来组合文档内的行内元素或为其设置格式的标签。

也就是说，这篇文章接下来所提到的所有格式声明基本都可以直接利用 <span> 标签的 style="" 这一属性来进行文章内特定文字的装饰。

color, font-size, font-family

那么想必您现在已经知道在 CSS 中设置文字的颜色、字号及字体的声明了：

• 颜色：color: 颜色;
  • 「颜色」可以为 HTML 支持的颜色名字或颜色的十六进制编码。
• 字号：font-size: 字号;
  • 「字号」可以有很多种单位，其中较为常见且容易掌握的是：
    1. 数字px：类似平时所说的几号字，是固定的字号。
    2. 数字em：比起固定字号，更像是给字体设置了一个相对的字号，所以更为灵活。每个元素都有一个基础的字号，也就是 1em，那么 1.1em 就相当于基础字号的 1.1 倍。
    3. 数字%：百分比，与 em 类似。110% 相当于基础字号的 1.1 倍。
• 字体：font-family: 字体名称;
  • 「字体名称」一般为英文，如果是由多个单词组成则需要用单引号括起。
  • 「字体名称」可以有很多个，每个之间用 , 隔开即可，如 font-family: 'Times New Roman', 'Helvetica';。一般来说网页会使用第一个字体，但如果页面或浏览器不支持该字体，则会按照编写顺序使用下一个字体。

⚠ 编写 CSS 中的格式声明时，请不要忘记一条声明结尾的分号。

是否在 : 后空格无伤大雅。因此，为了阅读方便，我选择在 CSS 代码中的冒号后空格，却并没有在 HTML 中空格。

font-style

font-style 用来设置字体的风格，和上面那三个属性数值范围非常广的属性不同，它只有几种固定的属性数值，其中较为常见的是：

• font-style: normal;：默认值
• font-style: italic;：斜体
• font-style: oblique;：倾斜
  • 与「斜体」不同，「倾斜」可以设置倾斜的角度，比如 font-style: oblique 10deg; 就是倾斜了 10°。

如果您设置的字体风格即使加上了 !important 也没有呈现出来，很有可能是因为您所使用的字体并没有这种风格。

font-weight

font-weight 用来设置字体的粗细，比如粗体或者细体都是由这个属性设置的：

• font-weight: normal;：默认值
• font-weight: bold;：粗体
• font-weight: lighter;：细体
• font-weight: bolder;：极粗
• font-weight: 数字;：字体粗细的数值
  • 数值范围为100 到 900，以百为单位。即使您输入了个位数和十位数的数值，读取代码时系统也会将其转化成百为单位的数字。

同样，如果您设置的字体粗细即使加上了 !important 也没有呈现出来，很有可能是因为您所使用的字体并没有这种粗细类型。

line-height

line-height 用来设置段落的行高，它的属性数值的单位和 font-size 所用的相同。 比如 line-height: 10px; 就代表该元素的行高是 10 px。

text-align

text-align 用来设置段落的对齐方式，主要有以下几种属性数值：

• text-align: left;：左对齐
• text-align: right;：右对齐
• text-align: center;：居中
• text-align: justify;：左右对齐

text-indent

您还在通过手动敲空格来设置首行缩进吗？您可以直接通过 text-indent: 字号; 来设置段落的缩进，属性数值的单位同样和 font-size 所用的相同。 如果您填写的数值是正数，那么就是首行缩进；负数则是悬挂缩进。

text-decoration

text-decoration 是用来装饰文字的，比如您想给某一元素的文字增加下划线，并想给这个下划线设置特殊的样式和颜色，那么您就需要用到这个属性了。它的属性数值稍微有些复杂，是由多个部分组成的：

text-decoration: 样式 线条类型 颜色 粗细;

其中，样式有以下几种可以选择的数值：

• solid：单实线
• dashed：虚线
• dotted：点线
• wavy：波浪线
• double：双实线

线条类型则有以下几种，您可以选择一种，也可以组合使用：

• underline：下划线
• overline：上横线
• line-through：删除线

颜色和粗细则和前面介绍文字颜色和文字粗细时可以用的数值相同。 若是有您不想特别设置的数值，您可以选择不填，这样系统会选择用默认值。

✎ 例如

text-shadow

text-shadow 用来设置文字的阴影，它的属性数值同样由多个部分组成：

text-shadow: 横向移动距离 竖向移动距离 模糊半径 颜色;

其中，横向与竖向的移动距离数值为正数时说明是向右方和下方移动；负数则表示向左方和上方移动。 您同样可以选择不填部分数值，系统会直接使用默认值。 您也可以增加多个阴影，只要使用 , 隔开每个阴影的属性数值即可。

✎ 例如

感谢您的阅览。 下一篇文章将会介绍图像相关的格式声明的属性。

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

• 本系列教程是建立于「写意」平台基础上的个人博客主页建设指南，应该能应用于其他 Write Freely 的社区，内容基本上是我在建设主页过程里的笔记的归纳和一些资料的整理，目标是让没有编程基础的用户也能够看懂并使用，故大概不会涉及到较为复杂的部分。
• 如果您是专业人士或已经有了不少利用 HTML/CSS 以及 Markdown 写作及建设个人主页的经验，我想这份教程或许对您并没有什么用处，但是欢迎指出任何错误或是遗漏的地方。

这篇文章主要关于如何通过阅读博客主页的 HTML 源代码来决定 CSS 选择器名称，继而更为灵活地自定义页面，主要参考了 HTML 及 CSS 基础教程的内容。

虽然在上一篇教程里我提供了一份简单的包含了更改博客主页的几个主要组成部分（标题、简介、置顶等）的 CSS 代码，但是您或许会想要对其他网页元素进行自定义的格式设置，或是单纯好奇为什么这些选择器的内容对应了这些网页元素。 接下来，我会介绍如何在没有太多 HTML 的标签名称的知识的情况下，通过阅读博客主页的 HTML 源代码来找到自己想要更改的元素应当填写的选择器内容。

这篇文章涉及到的代码相关的内容比较多，可能稍微有些复杂。如果您对此不感兴趣或是对之前代码里提供的几个元素的选择器已经满意了的话可以跳过这一篇。

标签中的内容

我们已经知道，HTML 里的每个 <> 的开头就是一个 HTML 标签的名字。假设一个 HTML 标签名字为 a，那么 <a> 代表标签的开始，</a> 代表标签的结束（标签名字前面加上 / 代表标签结束），而放置在 <a> 和 </a> 之间的内容就是会以这个标签所代表的元素来呈现的内容。

万物皆可套娃。

标签中除了输入文本内容外，也可以增加别的标签。假设一段文本被放置在了 <a></a> 中，而标签 <a> 被放置在了 <body></body> 之中，变成了 <body><a>文本</a></body> 的形式，那么这段文本不但拥有 <a> 的特征，也会有 <body> 的特征。

用我们使用过的折叠功能的语法为例：

<details><summary>折叠处标题</summary>被折叠的内容</details>

<details> 这个标签代表文档中的某个会被折叠的细节，而 <summary> 则代表细节的标题。 「折叠处标题」同时被放置在了 <details></details> 和 <summary></summary> 之中，因此这串文字会以文档里的某个折叠的细节的标题的样式呈现在页面中。 而「被折叠的内容」仅被放置在 <details></details> 之中（注意这串文字在代码里是出现在了 </summary> 之后，因此并没有被 <summary> 标签所包括），所以这串文字仅仅是细节的文本，而非标题。

✎ 练习

<a>
<b><c>文本 1</c>文本 2
<d>文本 3<e>文本 4</e>
</d></b>文本 5</a>

在您掌握了标签的读法，明白如何从代码中看出有哪些内容被某个标签所包括，或某个内容被包括在了哪些标签里之后，就可以从 HTML 源代码中找到某段文本对应的标签了。

标签的属性

然而，现实中的 HTML 代码（包括您的博客的源代码）往往更加复杂，因为每个标签除了它的名字和代表的含义以外还有其属性。

还记得第一篇教程里提到的设置文字格式所用的代码吗？

<span style="文字格式声明">文字内容</span>

现在我们知道，<span> 是个 HTML 标签。但在这个标签的开始、标签名称之后，有一串 style=""，这就是当前这个 <span> 标签的属性。

一个标签可以有很多个属性，所以您往往会发现，一份 HTML 的源代码中，不少标签的名字后面都有很长的一大串标签属性。 但这系列文章只是一个简易的装修主页教程，而非 HTML 编程教学，因此，您需要特别注意的只是其中的两个标签属性：class 和 id。它们往往会以 class="名称" 和 id="名称" 的形式出现。 在这里提到这两个 HTML 的标签属性是因为它们在接下来会提到的寻找选择器的内容里非常重要。

选择器类型

CSS 选择器也有多种类型，根据选择的对象不同，选择器的填写格式也有所区别。您需要注意的是以下三种：

• 您想要选择某个标签本身：直接输入标签名称即可，即 标签名 {}；
• 您想要选择的是某个 class：需要在这个 class 的名称前加上一个 . ，即 .名称 {}；
• 您想要选择的是某个 id：需要在这个 id 的名称前加上一个 #，即 #名称 {}。

⚠ 请务必注意选择 class 和 id 所使用的符号的区别。

通过阅读 HTML 源代码填写 CSS 选择器

掌握了基础的 HTML 标签的阅读方法和 CSS 的选择器类型后，就可以来实践了！

首先，您需要打开您的博客主页的 HTML 源代码：

1. 复制您的博客主页的地址，包括开头的「https://」；
2. 在空白的浏览器地址栏输入「view-source:」，请使用半角符号；
3. 在「view-source:」后粘贴之前复制的主页地址；
4. 按下回车键！

然后您就会看到类似这样的界面：

假如您的主页已经自定义了 CSS，那么您还会在我的这张截图的空白处所对应的位置那里看到您使用的 CSS 代码。 但前面的信息对我们来说并不太重要，我们需要往下滑。您会在几个空白行后看到一个 <script> 标签，标签下的内容是一片全是英文的代码，我们需要滑过这个部分直到 <\script> 出现。 紧接着，您会在 <\script> 之后看到 <\head>。再接着，您会看到 <body> 标签的开始，从这开始就是我们需要阅读的部分。

您会在这些 HTML 代码中看到一些对您而言或许非常眼熟的文字，譬如您所起的博客名称、简介、您的一些文章标题和内容等等。HTML 就是通过给这些文本加上标签，让它们按照标签所代表的含义来呈现在网页中的。

我们继续拿上一篇教程最后的 CSS 代码修改过的这个博客界面为例子，配合 HTML 代码和 CSS 代码来分析这些选择器是如何选择博客页面中的各个元素的。

body {
    background-color: aliceblue;
}

代码中的第一个选择器选择了 body。我们可以看到博客的内容都是出现在 <body> 标签之下的，这个标签的结尾 </body> 刚好出现在页面的最后一个元素，也就是页面最下方的那段「写意 Writee · powered by writefreely」之后，而 </body> 之后的内容则是一些 JavaScript 代码。

也就是说，<body> 标签下的内容基本上就是整个博客页面的内容，那么我们想要对整个博客进行某个修改的时候，就可以使用 body 作为选择器名称。 这也是为什么我们想要修改整个博客的背景颜色的时候是将 background-color: aliceblue 这句格式声明放置在了 body {} 之中。

#blog-title a {
    font-family: 'Hiragino Sans GB';
    font-weight: bold;
    color: midnightblue;
}

这个选择器选择了 #blog-title a，通过之前的注释，我们知道这个选择器作用的对象是博客的标题文字，为什么呢？

这个作为例子的博客的标题是「博客名称」，那么我们先在 HTML 代码里寻找「博客名称」这串文字出现在了哪里：

它在这儿！但是它究竟被 <body> 以外的哪些标签包括呢？我们从 <body> 开始逐个标签阅读： <body> 标签开始之后出现的第二个标签是 <nav>，但是这个标签已经在「博客名称」出现之前就结束了（</nav> 出现在了「博客名称」之前），也就是说，包括在 <nav> 和 </nav> 之中的所有标签我们都不需要考虑。

</nav> 之后的下一个标签是 <header>，然后是 <h1>，再接着是 <a>。这三个标签都是在「博客名称」四个字之后才结束的，也就是说我们的博客标题的文字被包含在了这三个标签中。

那么把所有无关的内容和标签属性都暂时移除，总结一下的话，博客标题的文字是处于这样的标签层次里的：

<body>
<header>
<h1><a>博客名称</a></h1>
</header>
</body>

这里有标签之中包含了别的标签的套娃递进的关系，而在 CSS 中，这样的关系主要通过在标签名字之间空格来表现：

body header h1 a {
}

您或许会想知道，为什么我们不直接使用最后的 <a> 标签作为选择器选择的内容。这是因为在网页中可能会出现复数个相同标签，您可以在代码的其他地方找到别的 <a> 标签，因此，简单的一个 a {} 所覆盖的内容不仅仅是我们想要自定义的博客标题文字。

所以，为了精确定位到具体的元素，还是写完整的选择器更为保险。当然，如果您能确定您所写的选择器只会覆盖到您想要修改的元素，那么您大可以放心省略掉一些标签名称。

但是，body header h1 a {} 和我们使用的 #blog-title a {} 显然不同。 如果您还记得前文提到的选择器类型，那么您可以看出 #blog-title 所代表的是某个标签的属性 id="blog-title"。我们再回过头去看源代码，发现 id="blog-title" 确实出现了：

比起很容易重复出现的标签名称，class 和 id 这两个标签属性在被赋予具体数值（即引号之中的它们的名称）后会更具有指向性。也就是说，我们可以通过选择器选择 class 和 id 的名称来达到更加精确的定位效果，同时也可以在多个标签递进的时候减少需要写的选择器内容。 id="blog-title" 出现在了 <h1> 标签里，所以我们可以直接用 #blog-title 替换掉 body header h1，最后得到了我们所使用的 #blog-title a {}。

虽然选择器填写的内容不同，但这两种写法在当前博客主页里起到的作用是相同的，您可以亲自尝试一下。换言之，只要您知道某个选择器中的内容究竟是如何得出的，并确保某种写法的选择器所选择的内容一定是您想要修改的内容，那么您可以使用任何写法。

但也有例外：假如其他地方也出现了拥有相同名称的 class，那么选择器单纯选择 class 的名称会对复数个对象起作用，其中可能也包括了您不想修改的部分。

但同时，只要利用好这个机制，直接选择 class 的名称可以帮助您快速地给多个相似的元素赋予格式。

.description {
    font-family: 'Hiragino Sans GB';
    font-style: italic;
}

明白了 class 和 id 在填写选择器时起到的作用后，我们可以省下不少心力了。第三个选择器选择了 .description，而 . 代表的是 class=""，所以这个选择器选择的是一个标签里有 class="description" 的元素。

让我们在源代码里寻找一下：

它出现在了一个 <p> 标签的属性里，而这个标签内的文本是「博客描述」。通过观察博客界面，我们发现这正好是博客的简介所在的位置。也就是说，这个选择器对应的元素就是博客简介的文本。

.pinned {
    font-family: 'Hiragino Sans GB';
    font-size: 18px;
    color: white;
    background-color: #191970;
}

.post-title {
    font-family: 'Microsoft Yahei';
    font-size: 18px;
    font-weight: bold;
}

接下来的两个选择器与上一个类似，都是选择了某个 class，我们来寻找一下 class="pinned" 和 class="post-title"：

它们所在的标签包含的文本分别是「置顶」和「文章标题」，我们可以从博客界面中看出这是置顶标题和博客主页的文章标题所对应的内容，因此这两个选择器就是用来分别修改这两个元素的。

如果您的主页已经有了复数个置顶或者文章，那么您可以发现每个置顶所在的 <a> 标签都有 class="pinned" 这一属性，或每一篇文章的标题所在的 <h2> 标签都有 class="post-title" 这个属性。这也是为什么选择 class 的名称可以快速给多个同类型的元素赋予格式的原因。

#title {
    color: midnightblue;
}

这个选择器的符号变成了 id 的 #，但是您会发现您无法在当前的源代码里找到 id="title"（您可以在源代码界面用 Ctrl+F 搜索看看）。 我们查看一下这几行代码的注释，可以发现它所修改的是文章页面的文章标题。没错，同样是文章标题，它在单独的文章页面和整个博客的主页里需要不一样的选择器。我们可以打开某篇文章界面的 HTML 源代码进行查证。

我们最后在文章页面的 HTML 代码中成功找到了 id="title"：它同样也是某个 <h2> 标签的属性，而这个标签内的文字正是「文章标题」。 同样的文字，根据其出现的页面不同，需要用到的选择器也可能有所区别。当然，也有使用的选择器不会根据页面变化而变化的元素，比如我们之前修改的博客标题文本和置顶标题在主页和文章页面使用的选择器就是一样的。

time {
    font-family: 'AXIS Std';
    font-size: 13px !important;
    margin-bottom: 1em;
}

接下来的选择器又变成了最普通的标签选择器，选择的对象是 <time> 标签。想必根据标签名字也可以猜到，这个标签下的对象是时间。而事实确实与猜测相吻合：

这个选择器修改的对象是文章标题下方的发布日期。

article p {
    font-family: 'SimSun';
    font-size: 15px;
    color: black;
}

同样是标签选择器，但是从中间的空格可以看出这个选择器里的标签名字存在递进的关系。我们可以在代码中找到它们：

这个选择器修改的是文章正文的普通文本的格式。

您可以发现，在这串代码中，<article> 之后、<p> 之前还有一个尚未结束的 <div> 标签，但是我们使用的选择器略过了它。这是因为 <p> 标签并没有出现在 <div> 标签之外的其他地方，也就是说就算我们只选择了 article p，事实上选择器所作用于的元素也仅限于 <div> 标签内的 <p> 标签，因此多选择一个 div 就显得可有可无。

这个原因也同样能解释为什么我们不在最开头选择 <body> 标签。上一个选择器只选择 time 也正因如此。

但是如果您对于阅读 HTML 代码和编写 CSS 还不够熟练，为了保险起见，还是建议您按照标签的出现和递进顺序一个一个将标签或属性名称填写在选择器中。

hr {
    border-top: 2px solid midnightblue;
} 

最后一个选择器选择了 <hr> 标签，这个标签代表的意思正是分割线这一元素。所以选择 hr 也代表对页面的所有分割线赋予格式。

同理，您可以直接用 h1 {} 到 h6 {} 来给文章内使用的标题赋予格式。

排查问题

希望您通过以上这些例子能够掌握到如何通过阅读源代码来决定想要设置格式的元素所需的选择器内容。 写代码除了理论以外最重要的是亲自实践，即使是 HTML/CSS 这样的非编程语言也是如此。有时您可能会发现您写好的 CSS 代码似乎并没有起作用，这可能是以下几个原因中的一个或多个所导致的：

1. 您的选择器缺少了某些必要的标签或属性，请再仔细阅读一下 HTML 源代码来看看是否有遗漏；
2. 有其它格式声明优先于您写的格式声明，您可以通过在声明结尾的分号前空格并加上 !important 来看看是否能解决问题；
3. 您的格式声明填写有误，需要搜索该声明的属性的相关内容来看看是否是属性数值或是属性本身的编写有问题。

感谢您的阅览。 下一篇教程将会介绍文字相关的格式声明的属性。

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

• 本系列教程是建立于「写意」平台基础上的个人博客主页建设指南，应该能应用于其他 Write Freely 的社区，内容基本上是我在建设主页过程里的笔记的归纳和一些资料的整理，目标是让没有编程基础的用户也能够看懂并使用，故大概不会涉及到较为复杂的部分。
• 如果您是专业人士或已经有了不少利用 HTML/CSS 以及 Markdown 写作及建设个人主页的经验，我想这份教程或许对您并没有什么用处，但是欢迎指出任何错误或是遗漏的地方。

这篇文章主要关于如何利用 CSS 来自定义博客主页的基础部分，参考了 WriteFreely 的官方文档中的 「Customizing CSS」以及 CSS 基础教程的内容。还有一些使用的例子或是引用已在文章内进行了标注。

如果您是使用电脑阅览的这个博客，您会发现这个博客和您的博客的样式有所不同。这是因为我使用了 Write Freely 所提供的自定义 CSS 的功能。 从这篇教程起，我将介绍如何用 CSS 来装修您的主页。

HTML 与 CSS

我们在前几篇文章中使用过的 Markdown 是一种轻量型标记语言，它通过简单的语法和符号标记来描述文本的格式（Wikipedia），而比 Markdown 使用起来稍微复杂一些的 HTML 是专门用于创建网页的标记语言。 虽然我们在写作时使用 Markdown 只是输入了几个符号，但是博客的服务器实际上将其转化成了 HTML，这也是 HTML 语法同样可以用于写作时的插入元素或是设置格式的原因。也就是说，如果您对 HTML 更为熟悉，您在写作时也可以只使用 HTML 的标签及代码来设置格式。

CSS，中文为「层叠样式表」，是专门用来为类似 HTML 文档这样的结构化文档设定样式的语言（Wikipedia）。 我们在之前使用 Markdown 和 HTML 时大多都是在文本中增加了这些标记语法来设置格式，本质上是在写作。而 CSS 一眼看上去则更偏向于人们平时所理解的代码（虽然它并不是编程语言），全英文让人乍一看根本搞不懂在写什么的那种，本质上……就是在写代码。

但是请您不要害怕，我们可以较为轻松地使用它来满足我们的一些简单的需求。

「自定义 CSS」

Write Freely 博客的「自定义 CSS」的功能在「自定义」界面里。

HTML 也支持 JavaScript 脚本，有的 Write Freely 的社区除了自定义 CSS 以外也提供自定义 JavaScript 的功能，不过「写意」暂时没有，所以在这里只介绍如何使用 CSS。

CSS 代码

您可以复制现成的 CSS 代码，也可以自己写。

博客主题

事实上，Write Freely 有一些用户们所提供的博客主题，您可以在「Writes.as」的「Themes」博客选择您喜欢的主题。

编写 CSS

在编写 CSS 之前，首先需要理解 CSS 的结构和原理。 HTML 有许多的标签，比如在介绍标题时曾提到过的 <h1> 到 <h6>，又比如制作列表所用的 <ul>、<ol> 和 <li>，再比如折叠文本所用的 <details> 和 <summary>……这些位于 <> 开头的名字就是不同标签的名称。而放置在标签之中的内容则是会在网页生成时放入这些标签所代表的元素之中的内容。 比如，<h6> 代表的是最小的标题，那么 <h6>小标题</h6> 就表示「小标题」这三个字会以最小的六号标题的样式呈现在网页中。

而 CSS，就是通过选择 HTML 代码中的标签或是某一元素，并赋予其某种格式，让这一标签或是元素下的所有内容都以这个格式的样子呈现。 继续 <h6> 的例子，假如您想给这个六号小标题更改一下格式，那么您需要在 CSS 文件里这么写：

h6 {
    /* 您想设置的格式的声明 */
}

这段 CSS 代码里的 h6 是一个「选择器」，在这里表示「选择了 <h6> 这一标签」。而 h6 后面跟着的 {} 内是需要填写的格式声明，只要保证声明的内容在大括号内，想要空多少行或者写多少行都无所谓。

您可能会好奇 /* */ 是什么的意思，这是 CSS 里的注释所用的符号，写在 /* 与 */ 之间的内容就是注释的内容。在计算机语言里，注释并不会被运行，是用来写笔记或是解释代码的作用，进而增加代码可读性的。

一条格式声明由两部分组成：「属性」和「属性数值」。它们会以 属性: 属性数值; 的形式编写出来，以 ; 作为结尾表示这条声明已经编写完毕。 {} 内可以填写任意条声明。

跟在属性之后的 : 后面可以选择不空格，这不影响代码的运行，空格与否是个人习惯。同理，{} 是和其他代码放在同一行还是单独放在新的一行都是个人习惯，可以自行选择自己喜欢的格式，虽然这也是不少程序员合作时会打架的原因。

✎ 例如

h6 {
    字号: 12 号;
    颜色: 红色;
}

h6 {
    font-size: 12px;
    color: red;
}

在学会如何写声明后，就可以来实践了！ 您可能还不知道一些 HTML 元素的名称是什么，即选择器的部分要如何填写，这部分的内容也会在之后的教程中提到。不过在现在，如果您的英文还不错，您可以通过读那些现成的主题的 CSS 代码来看出一些 CSS 选择器所对应的页面元素。通过一些尝试，或许您还可以学会一些格式声明的写法。 不过我也准备了一份 CSS 代码来帮助您自主修改一些 Write Freely 博客中的主要元素。

依旧是之前所用的博客的例子，它的默认界面是这样的：

• 主页
• 文章页面

您可以根据需求复制、运用或修改以下被折叠的 CSS 代码的其中一版：

/*

    The author has dedicated all copyright and related rights
    to this work to the public domain worldwide.
    This work is under the CC0 1.0 Universal Public Domain Dedication.
    CC0 1.0: https://creativecommons.org/publicdomain/zero/1.0/

*/

body {
    background-color: aliceblue;
}

#blog-title a {
    font-family: 'Hiragino Sans GB';
    font-weight: bold;
    color: midnightblue;
}

.description {
    font-family: 'Hiragino Sans GB';
    font-style: italic;
}

.pinned {
    font-family: 'Hiragino Sans GB';
    font-size: 18px;
    color: white;
    background-color: #191970;
}

.post-title {
    font-family: 'Microsoft Yahei';
    font-size: 18px;
    font-weight: bold;
}

#title {
    color: midnightblue;
}

time {
    font-family: 'AXIS Std';
    font-size: 13px !important;
    margin-bottom: 1em;
}

article p {
    font-family: 'SimSun';
    font-size: 15px;
    color: black;
}

hr {
    border-top: 2px solid midnightblue;
}

/*

    The author has dedicated all copyright and related rights
    to this work to the public domain worldwide.
    This work is under the CC0 1.0 Universal Public Domain Dedication.
    CC0 1.0: https://creativecommons.org/publicdomain/zero/1.0/

*/

/* The entire page */
body {
    /* Change the background color to AliceBlue (#F0F8FF) */
    background-color: aliceblue;
}

/* Blog title */
#blog-title a {
    /* Change the font to Hiragino Sans GB */
    font-family: 'Hiragino Sans GB';
    /* Bold text */
    font-weight: bold;
    /* Change the font color to MidnightBlue (#191970) */
    color: midnightblue;
}

/* Blog description (underneath title) on home page */
.description {
    /* Change the font to Hiragino Sans GB */
    font-family: 'Hiragino Sans GB';
    /* Italic text */
    font-style: italic;
}

/* Pinned posts */
.pinned {
    /* Change the font to Hiragino Sans GB */
    font-family: 'Hiragino Sans GB';
    /* Change the font size to 18px */
    font-size: 18px;
    /* Change the font color to white (#FFFFFF) */
    color: white;
    /* Change the background color to MidnightBlue (#191970) */
    background-color: #191970;
}

/* Post titles on home page */
.post-title {
    /* Change the font to Microsoft Yahei */
    font-family: 'Microsoft Yahei';
    /* Change the font size to 18px */
    font-size: 18px;
    /* Bold text */
    font-weight: bold;
}

/* Post title on post page */
#title {
    /* Change the font color to MidnightBlue (#191970) */
    color: midnightblue;
}

/* Date */
time {
    /* Change the font to AXIS Std */
    font-family: 'AXIS Std';
    /* Change the font size to 13px */
    /* !important means this declaration overrides other declarations */
    font-size: 13px !important;
    /* Add space below the date */
    margin-bottom: 1em;
}

/* Article text on home and post page */
article p {
    /* Change the font to SimSun */
    font-family: 'SimSun';
    /* Change the font size to 15px */
    font-size: 15px;
    /* Change the font color to black (#000000) */
    color: black;
}

/* Horizontal line */
hr {
    /* Add a 2px solid MidnightBlue top border */
    border-top: 2px solid midnightblue;
}

• 主页
• 文章页面

您可以通过替换掉声明的内容来进行您的主页的自定义设计。

如果您看不出来每个选择器所对应的主页元素，可以查看下面这个带中文注释的版本，但建议不要复制使用，因为至少「写意」的自定义 CSS 的部分似乎运行不了带中文内容的代码（即使中文是在注释里也不行）。就算要使用中文注释版，也记得在修改后、保存更改前移除掉所有中文注释，并在其他地方备份，以免出现辛苦编写的代码丢失的情况。

/*

    The author has dedicated all copyright and related rights
    to this work to the public domain worldwide.
    This work is under the CC0 1.0 Universal Public Domain Dedication.
    CC0 1.0: https://creativecommons.org/publicdomain/zero/1.0/

*/

/* 整个页面 */
body {
    /* 将「背景颜色」改为「AliceBlue（#F0F8FF）」*/
    /* Ps. 这里直接使用了该颜色的名字 */
    background-color: aliceblue;
}

/* 博客标题 */
#blog-title a {
    /* 将「字体」改为「冬青黑体（Hiragino Sans GB）」 */
    font-family: 'Hiragino Sans GB';
    /* 将字体「加粗」 */
    /* Ps. 这一步其实无关紧要，因为似乎预设的标题字体就是加粗过的 */
    font-weight: bold;
    /* 将「字体颜色」改为「MidnightBlue（#191970）」 */
    /* Ps. 这里直接使用了该颜色的名字 */
    color: midnightblue;
}

/* 博客描述（简介） */
.description {
    /* 将「字体」改为「冬青黑体（Hiragino Sans GB）」 */
    font-family: 'Hiragino Sans GB';
    /* 将字体设置为「斜体」 */
    font-style: italic;
}

/* 置顶文章的标题 */
.pinned {
    /* 将「字体」改为「冬青黑体（Hiragino Sans GB）」 */
    font-family: 'Hiragino Sans GB';
    /* 将「字号」改为「18 号」 */
    font-size: 18px;
    /* 将「字体颜色」改为「白色（#FFFFFF）」 */
    /* Ps. 这里直接使用了该颜色的名字 */
    color: white;
    /* 将「字体颜色」改为「MidnightBlue（#191970）」 */
    /* Ps. 这里使用了该颜色的十六进制编码 */
    background-color: #191970;
}

/* 博客主页的文章标题 */
.post-title {
    /* 将「字体」改为「微软雅黑（Microsoft Yahei）」 */
    font-family: 'Microsoft Yahei';
    /* 将「字号」改为「18 号」 */
    font-size: 18px;
    /* 将字体「加粗」 */
    font-weight: bold;
}

/* 文章页面的文章标题 */
/* Ps. 它和上面的主页中的文章标题对应的选择内容并不相同 */
#title {
    /* 将「字体颜色」改为「MidnightBlue（#191970）」 */
    /* Ps. 这里直接使用了该颜色的名字 */
    color: midnightblue;
}

/* 日期 */
time {
    /* 将「字体」改为「AXIS Std」 */
    font-family: 'AXIS Std';
    /* 将「字号」改为「13 号」 */
    /* Ps. 这里的「!important」的意思是这条声明的优先度在其他声明之上，属于特殊情况 */
    font-size: 13px !important;
    /* 在日期的文字下方与文章正文之间空出一些距离 */
    margin-bottom: 1em;
}

/* 文章正文的文字 */
article p {
    /* 将「字体」改为「宋体（SimSun）」 */
    font-family: 'SimSun';
    /* 将「字号」改为「15 号」 */
    font-size: 15px;
   /* 将「字体颜色」改为「黑色（#000000）」 */
    /* Ps. 这里直接使用了该颜色的名字 */
    color: black;
}

/* 分割线 */
hr {
    /* 变成了 2 px 大小的实心线，颜色为 MidnightBlue */
    border-top: 2px solid midnightblue;
}

感谢您的阅览。 下一篇教程将会介绍如何寻找到想要赋予格式的网页元素的标签或选择器名称。

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

• 本系列教程是建立于「写意」平台基础上的个人博客主页建设指南，应该能应用于其他 Write Freely 的社区，内容基本上是我在建设主页过程里的笔记的归纳和一些资料的整理，目标是让没有编程基础的用户也能够看懂并使用，故大概不会涉及到较为复杂的部分。
• 如果您是专业人士或已经有了不少利用 HTML/CSS 以及 Markdown 写作及建设个人主页的经验，我想这份教程或许对您并没有什么用处，但是欢迎指出任何错误或是遗漏的地方。

这篇文章主要关于如何利用 HTML 语法给文章插入影音文件和播放窗口，参考了 WriteFreely 的官方文档中的 「Adding HTML」以及 HTML 基础教程的内容。

视频

视频可以用两种方式来添加。一种是通过视频所在的视频网站生成的链接和 HTML 的 <iframe> 标签来嵌入该网站的播放窗口，另一种则是通过插入视频文件的直链（以「.mp4」、「.ogg」等格式结尾）和 HTML 的 <video> 标签来生成视频。

<iframe> 标签

如今，很多视频网站都在视频的分享功能里添加了自动生成可供我们直接嵌入的 <iframe> 代码的服务，我们可以直接复制粘贴这串嵌入码到文章中。

<video> 标签

如果您有某个视频的直链的话，可以使用 <video src="视频链接" controls></video> 来添加视频。因为我手上没有现成的可供展示的视频直链，所以使用了 Write Freely 写作指南中提供的例子。

✎ 例如

<video src=“https://cdn.glitch.com/db7ab5d8-dd97-466b-8180-676147e8fc40%2FUsing%20Write.as%20Themes.mp4” controls></video>

音频

与视频类似，音频可以通过其所在的音乐网站生成的链接和 <iframe> 标签以及音频的直链（以「.mp3」等格式结尾）和 <audio> 标签来添加。

<iframe> 标签

很多音乐网站同样拥有生成嵌入用 <iframe> 代码的功能，您可以直接复制使用。

<audio> 标签

如果您有想要添加的音频的直链，则可以使用 <audio src="音频链接" controls></audio> 来添加该音频。同样，因为我手上没有现成例子，所以使用了 Write Freely 写作指南中提供的例子。

✎ 例如

<audio src=“https://cdn.glitch.com/db7ab5d8-dd97-466b-8180-676147e8fc40%2F%2333%20-%20Reflection%2014%20about.mp3” controls></audio>

更多元素

或许到此为止的内容还是无法满足您的所有需求：比如您也想要这系列文章里的例子部分会有的边框来把特定内容框起，又或者您想要对添加的图片的大小、摆放位置或者特殊效果之类的有所要求…… 这部分内容无法通过 Markdown 标记达成，需要使用相对应的 HTML 语法，有的还需要配合 CSS 代码对页面的修改。 因为 HTML/CSS 比 Markdown 更为复杂，之后的文章或许会在简单介绍了部分 HTML/CSS 功能后提及这些内容中的一部分。但由于篇幅或是我个人没有考虑到某些较为有针对性的需求的缘故，可能无法覆盖到您需要的所有内容。您可以在本博客置顶的「关于」里找到我的联络方式进行提问，我会在能力范围内进行回答。同时，如果您感兴趣且愿意学习的话，不妨使用搜索引擎搜索相关功能的 HTML 语法。 比如，您想要知道利用 HTML 给文字加入边框的方法，可以搜索「HTML 边框」，网络上的不少更为专业的教程和资料会给您提供相应的代码写法。只要多尝试和实践，相信您可以收获许多。

感谢您的阅览。 下一篇教程会简单介绍 CSS 语法以及如何对您的主页进行自定义的装饰。

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.