THE SHORT STORY
只要两步就可以拥有以下页面。（猫是会眨眼的哦）
第一步：到你的博客后台管理，将博客皮肤设置为darkgreentrip
第二步： 分别粘贴以下代码到“页面定制CSS代码”和“页首Html代码”中（注意，不要勾选“禁用模板默认CSS”）
页面定制css代码 页首Html代码搞定辣！
注意两点：
- 我把“管理”这个导航选项藏了起来不被普通用户看到，不过鼠标移过来就可以点击，在导航栏的最左边（“博客园”左边）。
- 博客的大小标题和导航栏都是静态配置的，要改变它们的显示内容和链接，可以在页首html代码中搜寻对应的关键字，比如搜"mskitten"并把它换成你的博客名就可以啦。
THE LONG STORY
鄙人是最近才得知自己的博客样式可以定制，简直打开了新世界的大门。
什么后端赛高，后端处于鄙视链的尖端，我只有两个字：naive。css实在太好玩了，指哪改哪，还可以集成各种小动画，简直玩不够……（拼命控制情绪）
原理
基本上，原理是这样的：博客首页的html页面是由后台生成的，不过博客园在“后台管理”这里开了几个后门，让你可以在特定的地方加入html和js代码，也可以用css定制整个页面的风格。
darkgreentrip这个风格只是一个起点，它会将博客页面上各种大的模块（比如导航栏、标题栏、侧边栏等）的基本位置摆好。你也可以选择其他的风格作为起点，然后用浏览器慢慢手动修改调试。
css入门
在开始修改之前，必须懂一些基本的css，否则事倍功半。MDN有一个很好的教程，讲得简洁易懂，而且有各种好玩的小例子给你练习，大概花个两三天，学成半吊子就已经足够你修改你的博客页面了（来自半吊子的不负责任的建议）。
如果已经会得差不多了，可以跳到下一节。
如果你实在时（没）间（耐）有（心）限（学），至少也要知道这些：
1.css语句的基本语法： 一个rule = 选择器 { 定义们 }
选择器会选择这一条定义对应哪些元素。比如，我希望把div的所有子孙p元素的背景颜色设为红色，那“div的所有子孙p元素”就可以用选择器div p来进行筛选。
2.选择器的基本语法：
选择元素： p {}
选择类： .someClass{}
选择ID： #someID
选择属性： 知道最简单的[attr=val]就够了。 如 li[lang="en-GB"]
选择pseudo-class： 表示选择某元素的某种状态。如 a:hover 选中鼠标悬停在anchor上的状态。
选择pseudo-elements： 表示某种特殊选择。如 ::after 会在制定的元素之后创建一个新元素，通常作装饰用。
复合选择器：（A, B均为以上讲到的选择器）
- A, B 同时选中A和B
- A B 选中是A的子孙的B元素
- A > B 选中是A的直接儿子的B
- A + B 选中是A的下一个兄弟的B
- A ~ B 选中是A之后的兄弟的B
3.优先级
如果有多个选择器同时对某一个元素进行样式定义，最后哪一个选择器会胜出呢？css有一套规则进行定义，也就是所谓的cascading。cascading按重要度从高到低有三个规则：
- Importance：带有!important的property永远胜出。
- 特别性：css有一套特别的打分机制，分高者则特别性高，此处只要大致记住，内联的style最特别，可以加1000分；其次是ID选择器，加100分；然后是类、属性、pseudo-class选择器，加10分；最后是pseudo-element选择器，加1分。
- 定义顺序： 在以上两条都相同的情况下，定义在后面的胜出。
注意，胜出的是一个property而不是整个rule。
以上只是总结了css的几个最重要的基本点，对于没有系统学习过html和css的人来说，很容易觉得难以理解。如果你觉得这些知识并不够你进行下一节，还是乖乖地去MDN看教程吧，教程不长，字里行间蕴含了很多css的基本思想，比如property的继承等，对实践还是非常重要的。
在调试过程中可以使用CSS reference查询各种property，写得非常清楚且有实时运行的例子，所以对property不需要强记。但是以上提到的选择器和优先级如果不太熟的话就会比较影响调试的速度。
用浏览器调试
到了最好玩的部分啦。
在这里，如果你对你的博客应该长什么样子没有概念，可以先找一个自己喜欢的网页做参考。我找的是陈皓大大的主页。
定制css
打开你现在的博客主页，在浏览器上点ctrl+shift+c，就可以查看html元素和对应的css规则。
鼠标移到html的某个元素定义上时，页面上对应的元素会变成浅蓝色提示。上图中我选中了header这个div，选中的是最上面的标题和导航栏。
看哪个元素不顺眼，可以用浏览器的调试工具找到这个元素，然后在显示出的css规则中直接修改，查看效果。比如我觉得这个侧边栏实在不好看，找了一下，是一个id为sideBar的div元素。先粗暴地在浏览器中编辑display: none，使它不再显示
然后在你“页面定制css代码”中将这一条对应的规则加上，直接用ID选择器就可以。
注意博客园的后台设置有时会有点问题，所以最好将你写好的css代码在本地备份，以防丢失。
再比如我想把导航栏放到最上面，并让它变成sticky的（即鼠标向下滚动时，导航栏始终处于页面的上方）。先找到导航栏，发现它是一个叫做navigator的div，它跟标题栏都是一个叫做header的元素的子元素。
