因为换了宿舍开始蹭外星人壕舍友的路由，所以hostapd的坑大概是填不上了吧。
最近在看Material Design/Motion Graphics，看苹果的blog设计（排版很简洁，但是不适合字多的网站），dribbble，behance之类。
之前用Hueman的时候受到可能吧的排版影响很深，现在看感觉这种设计有点过时了，打算下一步逐渐切换到MD设计。但是不管怎么说，可能吧从设计排版到撰写文章的理念和准则都是我的领路人，还是非常感谢的。
CSS简单介绍
CSS，全称Cascading Style Sheet（层叠样式表），定义了HTML网页中元素的显示样式，可以理解成模板一样的东西吧。因为CSS可以在不对网页本体进行大幅改动（只需要添加<style type="text/css">就可以），因此很受强迫症患者的喜爱（不）。WordPress也允许用户自定义CSS。如果想要更专业的实现，snowball会是一个更好的插件。
一条完整的CSS规则应该分为以下几个部分：选择器，声明（声明可以有多条）。
一条完整的规则：由选择器、花括号和括号内的声明组成
每一条声明的格式又由属性:值构成。每两条声明之间用英文标点的”;”隔开，白空格（回车，tab，空格键）会被忽略。于是为了便于阅读，还可以写成下面的形式：
这样会比上面那张图片里的好看一点，对吧？
CSS选择器
选择器对应的是HTML语言中的元素，比如p对应HTML语言中的<p>...</p>，h1对应<h1>...</h1>，等等。这些是元素选择器，其他还包括类选择器（以英文句号”.”开头）、id选择器（以英文井号”#”开头）和属性选择器（英文方括号[]）。w3schools以及MDN都有详细到不能再详细的解释了，我就简单讲一下。
元素选择器
元素选择器对HTML网页中常见的元素（p, h1, h2, …）生效。
在CSS文件中选中相关元素的语句是使用元素名称。
下面的例子中，我对h1和p这两个元素分别应用不同的CSS规则，最终显示的结果也不一样。
类选择器
类选择器(Class Selector) 只对特定类别的元素生效。具体到对哪一个特定类别的元素…就要看你在元素中的class=""里面填了什么了。
选中类别的CSS语句是.类别。
在下面，我对我头像的边框添加了border-radius属性，让方形的头像变成圆形。这样明显比默认的方形好看，对吧？
id选择器
ID选择器对添加了id=""属性的元素生效。
选中id的CSS语句是#id。
我给图片添加了id="spoiler"，通过hover事件实现剧透警告。这个效果可以在我关于尼尔的文章里第一张图看到。
CSS基础调整：静态效果
图片显示美化
大部分主题的文章和图片在视觉上处于同一高度（扁平），因此我通常会选择在图片后面加上阴影，让图片在视觉上“向上浮动”一层。这和z-index属性不太一样，z-index更像是photoshop中的“图层顺序”，单单调节z-index不会影响视觉效果。
box-shadow这一选项。完整的box-shadow参数如下：box-shadow: h-shadow v-shadow blur spread color inset;参数解释如下：
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
在我的CSS中，我设置的是：
这样获得了图片“浮起”的效果其中表明“可选”的是不一定需要填写的，在这种情况下浏览器会载入默认值（比如默认的外部阴影outset）。（最近感觉udacity的阴影也挺不错的，改天实现一下）
同时，把图片设置为四角都具有8px圆角的矩形（(2dp xxxdpi=8px)是Material Design的建议值）：
评论头像美化
默认的Wordpress Avatar（Gravatar）是正方形的，连圆角都没有。这年头连QQ都懂得用圆形头像了，为什么还有不改成圆形的道理呢……（其实圆形头像现在的C7V5主题已经自带了，这是我在Hueman主题上的实现）
其中margin-left和transform是我的个人喜好，不一定要照抄。
CSS进阶调整：动态效果
这一块其实我没什么时间去做，主要就做了一个鼠标放在评论头像上的旋转效果。我给你们看一下：
将鼠标悬停在头像上或点击头像（移动设备）：
这一段涉及到了hover状态的使用。
一个元素的状态一共有五种：active（按下），hover（鼠标悬浮），focus（获得键盘输入焦点），visited（已被访问的链接），focus-within（是一个（相对）新增的伪类选择器，当子元素获得焦点时应用样式到父元素）。
Chrome Developer Tools中的强制元素状态选项
其中需要注意的是，active只能在元素被点击（移动设备点按）的时候被激活，状态是不能持续的，可以用来作为按钮的按下（瞬间）事件使用。如果要保持某个元素属性，需要用到checked（这里不讲）。使用类似:active这种伪类的时候，只要在前面加上元素名称，把它们看作一个元素就可以了。设置旋转时就可以使用：
函数transform指定了元素动作（变形），同理，rotate还可以改成scale、skew等等。但是如果只添加了这一行的话，鼠标悬停时会发现好像没有变化。
别别别别急着打我……实际上这条规则已经是生效的了，只是没有过渡动画所以看上去没动静，不信你把角度随便换一个试试看。
控制过渡的参数需要在.avatar {}中设置：
其中，all 是一种比较偷懒的写法，代表的是所有有过渡属性的方式。这里可以单独换成transform。.4s是0.4s的简写，代表过渡动画的持续时长是0.4s。ease-in-out表示淡入淡出，其他备选参数有：
| Value | Description |
|---|---|
| ease | Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) |
| linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)) |
| ease-in | Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)) |
| ease-out | Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)) |
| ease-in-out | Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)) |
| step-start | Equivalent to steps(1, start) |
| step-end | Equivalent to steps(1, end) |
| steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value “start” or “end”, and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value “end” |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
中文的w3school.com.cn版本的没有英文版的全，所以放了英文版
当然，也可以用@keyframes写一个自己的过渡函数。
完整的动画代码是：
（解释一下：-webkit-transition是Safari的过渡方式，-moz-transition是Firefox的过渡方式，-ms-transition是垃圾IE的过渡方式，-o-transition是Opera的过渡方式……）
总结
这篇文章主要讲了基础的美化方式：box-shadow，border-radius，transition，transform。其实一个网站远不止这四个代码就可以堆起来，有兴趣的自己学习咯。
参考来源：
- 可能吧公众号的文章是如何排版的？ | 可能吧
- Cascading Style Sheets – Wikipedia
- CSS Tutorial
- 很多参考都在CSS Tutorial里面，这里不一一列举了。
暂无评论