CSS基础样式库

本文列举了一些我们常常需要用到的css基础样式库。这样既保证代码的精简，又保证开发的效率。我个人是极喜欢的…

前言

国内一位大神通读Normalize.css源码，并且将Normalize.css进行了更细粒度的划分放入Koala这个项目中。非常符合我的心意。感谢@Alsiso。原文地址

样式重置方案normal.css

Normalize.css不仅统一了样式，还保留元素的可辨识性，这是我们应该继承和发扬的优点，normal.css也会参考借鉴Normalize.css所有优势，不过Normalize.css更简洁，让开发者更容易上手，并且对它进行瘦身，比如移除一些不会用到的元素标签hgroup，将一些元素进行分模块管理，比如html5.css，form.css等，方便按需求灵活引用。

调整内容

• 字体约定62.5%，方便单位转换
• 统一元素的内外边距
• 设置全局字体，修复表单元素不继承父级font的问题
• 添加链接基本样式
• 移除列表元素的默认标识
• 移除元素默认边框
• 移除链接默认的下划线
• 移除单元格间距让其边重合
• 修复th不继承text-align，默认左对齐
• 重置标题，采用自定义
• 把所有斜体标签默认扶正
• 统一引用标记
• 统一上标和下标

HTML5元素html5.css

html5.css主要是用于解决html5新元素在旧浏览器中的不识别，并且修复一些元素存在的隐性问题。

调整内容

• 修复HTML5新元素不能正确显示的问题
• 修复progress元素的对其问题
• 修复没有controls属性的audio显示出来
• 修复hidden属性不起作用的问题
• 修复svg元素overflow不正常的问题
• 统一mark标签的样式
• 修复拖动元素添加拖动的光标

表单元素form.css

form.css修复表单元素在不同浏览器下的默认样式，尤其是IE低浏览器版本下的一些怪异问题；并且还修复了一些表单显示状态，致力于提升用户体验。
button按钮在网页中是最常用的基础元件，但是不同浏览器下按钮的默认样式千奇百怪，而且表现形式过于单一，所以考虑在form.css里内置了一套按钮组件，提供几种表现场景，并且可以和下面要介绍的iconfont.css搭配使用。

调整内容（form.css）

• 统一fieldset元素的显示样式
• 修复’legend’元素的若干问题
• 修复表单元素字体与字号不继承的问题
• 统一表单元素的垂直对其方式
• 统一表单元素的overflow属性为visible
• 重置按钮禁用时光标样式
• 修复checkbox,radio的属性box-sizing: border-box;
• 统一button,input内边距和内边框
• 统一select的样式
• 修复textarea只能为纵向拉伸

调整内容（ui-btn按钮组件包含的内容）

• 初始化默认按钮样式，增加不同状态下的效果
• 提供多种场景按钮，如主要，警告与错误
• 提供可定制的大小按钮，如较小，更小，一般，较大，更大
• 提供组合式按钮
• 支持iconfont.css，搭配图标按钮使用

使用示例

<button type="button" class="ui-btn">默认</button>

栅格系统grid.css

借鉴了Bootstrap的一套响应式流式栅格布局系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
对栅格系统的样式命名进行重新组织，简化和移除工具代码，只保留核心布局样式。

调整内容

• .ui-grid-container(固定宽度)和.ui-grid-fluid(100%宽度)用于包裹.ui-row
• .ui-grid-container(固定宽度)通过媒体查询来实现响应式宽度
• .ui-row用于包裹一组.ui-col-1-.ui-col-12列
• xs,sm,lg通过媒体查询来实现响应式
• .ui-col-xs-* 超小屏幕 手机 (<768px)
• .ui-col-sm-* 小屏幕 平板 (≥768px)
• .ui-col-* (默认)中等屏幕 桌面显示器 (≥992px)
• .ui-col-lg-* 大屏幕 大桌面显示器 (≥1200px)
• 支持列嵌套，必须包裹在.ui-row行中
• 简化代码，不支持列偏移，列排序

使用示例

<div class="ui-grid-fluid">
  <div class="ui-row">
    <div class="ui-col-8">.ui-col-8</div>
    <div class="ui-col-4">.ui-col-8</div>
  </div>
</div>

辅助工具utils.css

提供最常用的功能类class，命名使用fn-前缀来进行区别表示，如果在项目中能够灵活复用这些类，那将大大提升开发效率。

调整内容

• 浮动元素与清楚浮动元素
• 垂直与水平滚动
• 元素显示类型
• 元素与文本隐藏
• 文本不换行
• 文本强制换行
• 文本溢出显示省略号
• 文本左右对齐
• 文本垂直对齐
• 常用符号(关闭，箭头，下三角等)
• 自适应两端对齐
• 未知高度垂直居中
• 列表平铺

使用示例

<!-- 文字溢出显示省略号 -->
<div class="fn-text-ellipsis">文字那是相当的长</div>

字体图标iconfont.css

iconfont都已经很熟悉了，是一种把图标放入自定义字体中，然后使用字体图标来替代普通图标的技术，使用起来方便灵活。

包含内容

• 提供网页中66个最常用的字体图标
• 可搭配form.css按钮组件使用

使用示例

<button class="ui-btn"><b class="iconfont">&#126;</b>提交</button>

动画库animate.css

这个在动画与过度一文中有详细讲到，此处暂且不提。

打印print.css

可以优化打印出的网页更适合浏览，并且加快打印速度，节省打印机耗材。

调整的内容

• 修复打印时的背景和文字颜色
• 删除所有的阴影效果
• 标注超链接，并显示URL链接