CSS 解析

模版中默认的 CSS 文件并不依赖 conditional class names，conditional style sheets，或 Modernizr 的表现效果，尽可以放心按自己的偏好放手去干。

Normalize.css

为了确保所有浏览器的渲染效果更加一致且符合标准，我们引入了 Normalize.css——这是一个现代化、紧密结合 HTML 5 的可选方案，可以用来实现浏览器的 CSS 重置。

Normalize.css 本质上并不是重置 CSS：

• 只处理需要标准化修正的样式
• 保留浏览器已有的默认样式，而不是全盘替换它们
• 修正浏览器的缺陷和常见性差异
• 通过细微的改进提高可用性
• 不干扰调试工具
• 拥有良好的开发文档

更多详情请参考项目网站，或者博客文章。

默认样式

基于 Normalize.css，编写了一些基础的样式，具体如下：

• 提供了基础的排版样式，以改善文本可读性
• 文本高亮时，默认取消 text-shadow
• 修改了一些元素默认的对齐方式，比如: img，video，fieldset，textarea
• 修改了老版本浏览器的提示符样式

非常激励开发者根据实际需求和添加样式到默认样式中版。

通用样式

在基础样式之外，我们也提供了一些通用的辅助样式。

.hidden

如果你想在视觉上隐藏任何元素，或是对屏幕阅读器屏蔽某个元素的内容，那么都可以为其添加 hidden 样式。这些元素可以是后续填充或显示的，也可以是使用 JavaScript 隐藏的。

.visuallyhidden

如果你想在视觉上隐藏任何元素，那么可以为其添加 .visuallyhidden 样式，但此时屏幕阅读器仍然可以识别它。

更多信息可参考：

• CSS in Action: Invisible Content Just for Screen Reader Users
• Hiding content for accessibility
• HTML5 Boilerplate - Issue #194

.invisible

如果你想在视觉上隐藏任何元素，或是对屏幕阅读器屏蔽某个元素的内容，那么都可以为其添加 .invisible 样式，但这种方式并不会影响页面布局。

与 hidden 样式从布局中移除元素的方式不同，invisible 样式只会让元素不可见，不会影响其在文档流中的位置，也不会影响其附近元素的位置。

注意：绝不应该使用上述样式进行关键字堆彻，那必将有损网站在搜索引擎中的排名。

.clearfix

给任何元素添加 clearfix 样式，可以确保它始终包裹浮动的子元素。

过去几年，出现了 clearfix hack 的多种变体，但在这里，我们使用 micro clearfix。

媒体查询

使用 HTML5 Boilerplate 可以很轻松地进行 移动优先 和 响应式设计 的开发。但有必要提醒的是，这里面没有银弹（引申含义：具有极端有效性的解决方法）。

我们插入了媒体查询的语句，帮助你构建宽幅和高分辨率的移动样式。建议根据网站内容调节断点，而不是简单参考具体设备的固定尺寸。

如果并不需要注重移动优先原则，那么你也可以修改或移除媒体查询的语句。当视窗宽度确定下来后，你可以使用 max-width 来替代固定尺寸，比如这样来编写：@media only screen and (max-width: 480px)。

更多有关移动开发的信息，请看 Mobile Boilerplate。

印刷样式

最后，我们提供了一些有用的印刷样式，以优化印刷流程，同时还可以提高印刷品的可读性。

印刷时，这些样式会：

• 去除所有背景色，将字体颜色改为黑色，移除 text-shadow——以节省印刷颜料并加快印刷进程。
• 为链接添加下划线并附加 URL 地址——以方便用户了解具体的引用地址。不过有两种例外：片段标示符（比如 #href） 和 javascript: 伪协议)。
• 展开缩写，方便用户了解缩写的具体含义。
• 指定了浏览器的分页方式，以及分页时页面顶部和底部的最少行数。所有支持该属性的浏览器都会有如下解析：

1. 确保表格在每个分页都有表头（<thead>）
2. 防止块引用、预格式文本、图片和表格分页时被截断而进入不同页面。
3. 除相关页面外，确保标题不会出现在其他页面
4. 确保 orphans and widows 属性不会出现在印刷品上。

该印刷样式与其他 CSS 样式被包裹在了一起，以减少 HTTP 请求。同样，它们应该始终被置于样式表的尾部，方便覆盖其他样式。