Wiki CSS入门指南

HTML、CSS和JS的关系（网图）

HTML、CSS和JS的关系（网图）2

CSS用来控制网页外观，是一种样式表语言。

Wiki建设中，CSS不是必须掌握的技术。但多数Wiki都需要调整样式，甚至定制Wiki主题，这就需要系统地学习CSS了。

为此，我们为Wiki维护者提供了一个CSS上手路线，包括了一些值得推荐的教程和本站文章。

推荐教程

推荐配合下文的「学习路线」按需食用。此外，你甚至能在BWiki找到CSS Wiki

视频：

• Bro Code的CSS快速入门（64min）
• 20分钟入门CSS(21min)
• 很容易理解的前端基础CSS(11min)

教程：

• MDN CSS教程
• HTML Dog CSS教程
• Codecademy CSS课程
• Web Dev CSS教程

全能教师：

• ChatGPT
• New Bing

你将经常需要搜索文档：

• 建议安装浏览器广告屏蔽插件。
• 优先使用Google、Bing国际版。Google可以配合ublocklist屏蔽低质网站群。不建议使用百度搜索技术问题。
• 如果中文关键词找不到文档/解决方案，请尝试用英文关键词。
• 推荐搜索"关键词 + MDN"。如"div mdn" "下划线 mdn"，大概率有MDN Web文档——它相对更专业、权威、正确。
• 需要刨根问底时，去 w3.org 翻语言标准。

适合Wiki建设的CSS学习路线

施工中,目标：囊括重要的CSS概念和细节，Mediawiki机制和BWiki特性。

基础

• 了解什么是CSS
• 打开至少一个教程、一个视频
• 动手，跟着教程写一段CSS
• Wiki中的CSS：了解如何查看和修改Wiki中的CSS，如何绕开BWiki缓存。
• 了解选择器：知道如何指定一个元素，以便为其设置样式。
• 了解常见属性：比如背景、颜色、文字、尺寸、间距、边框...
• 浏览器开发工具：如何在浏览器中实时修改预览CSS效果。临时推荐：https://www.bilibili.com/video/BV1AE411G7az
• 开发者原则：不应该修改哪些部分的CSS。
• 翻阅文档：访问一次MDN文档(background-color)
• 如何提问：提问的智慧（如果打不开，知乎转载版本）

入门

• 盒模型：HTML元素在一个个“盒子”中。理解盒模型，才能理解元素排列和布局
• 层叠：如何继承多个规则并解决冲突。
• 布局：如何控制元素位置，排版复杂组件。
• Bootstrap：BWiki使用了3.3.7版本。即，可以直接引用大量现成的样式。文档：https://getbootstrap.com/docs/3.3/css/
• Wiki中的CSS：网页结构、样式细节、常见修改
• Wiki UI设计漫谈：基本UI设计原则，如何设计好看、友好、统一的页面
• 更多样式：比如堆叠、计算、伪类、伪元素、圆角、阴影、高级选择器...
• 去BWiki主页，任选3个Wiki，查看他们的首页设计和CSS代码

进阶

• 响应式设计：优化手机、平板上的显示效果。
• 动画和过渡
• 更多样式：CSS有大量属性，推荐浏览一遍，有印象才方便查文档使用。
• 翻阅一个huijiwiki.com上较大wiki的主页和样式。
• 翻阅一个fandom.com上较大wiki的主页和样式。
• 翻阅一个wiki.gg上较大wiki的主页和样式。
• Wiki UI设计漫谈：更多UI设计知识
• 如何加快wiki加载速度
• 如何提升页面渲染性能

专家

• 请指导优化本文

暴论

知识体系的重要性

一颗小树能开枝散叶，但一地树叶嘛……

知识体系不是思维导图，不是图书目录，不是知识点铺地，是骨架和枝干，是理解和掌握，是能不断深化的“专业素养”。

这直接导致了本文没有推荐某些流行的教程网站。它们多是知识点的堆砌，不成体系，也缺乏对学科/技术的理解，视角不够高、落地不够低。乍一看容易学，其实只方便查阅细节，却增加了理解知识体系的难度，需要警惕。

虽然这一批判有点“何不食肉糜”，但更好的教程确实不少。

有人说CSS难学

推荐 Håkon Wium Lie 的学位论文《层叠样式表》，非常适合了解早期CSS设计思路，促进理解现代CSS的困境和出路。

CSS的设计目标是让所有人都能轻松地编写网页，因此入门CSS是非常容易的。

当然，这也带来了一些问题：知乎 为什么 CSS 这么难学？ 这些争论其实和Wiki建设没啥关系。一个前端管理员大可以模仿其他Wiki的样式，甚至让ChatGPT帮忙改样式。这只需要稍微了解一部分CSS就行。

只要没有毒副作用（比如滥用important），任何CSS实现都是“可接受的”，毕竟无害还能改。