AmazeUI基本样式

　　AmazeUI是一个轻量级、Mobile first的前端框架，基于开源社区流行的前端框架编写。

　　Normalize

　AmazeUI使用了normalize.css，但做了些调整：html添加了-webkit-font-smoothing:antialiased；<hgroup>从w3c标准中移出；<img>设置最大宽度为100%；<figure>外边距设置为0；<textarea>添加vertical-align:top;resize:vertical；移除<dfn>斜体字样式；移出<h1>样式

　　CSS盒模型

　AmazeUI将所有元素的盒模型设置为border-box。

　box-sizing:content-box; width：100px;padding:20px;border:20px;margin：20px;

　box-sizing:border-box;width:140px;padding:20px;border:20px;margin：20px;(The border and padding inside of the width)

　AmazeUI将浏览器的基准字号设置为62.5%，即10px。1rem=10px。在body上应用了font-size:1.6rem，即将页面字号设置为16px。yuem根据上下文变化不同，rem只跟基准设置关联，只要修改基准字号，所有使用rem作为单位的设置都会相应改变。

　　字体

　AmazeUI主要使用非衬线字体(sans-serif)，在<code>、<pre>等元素上设置了等宽字体(monospace)。　　

　字体定义 body{

font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;

}

　Segoe UI：Windows UI字体。

　Helvetica Neue：IOS7及OSX 10.10 UI字体。

　FreeSans：包括Ubuntu之类的Linux分发版包含的字体。

　在AmazeUI的实践中，font-family设置只在base样式中出现了一两次。在具体项目中，不建议到处设置font-family。但AmazeUI还是提供了设置字体的辅助class。

　.am-sans-serif:非衬线字体

　.am-serif:衬线字体，中文显示宋体

　.am-kai:数字英文显示衬线字体，中文显示楷体

　.am-monospace:等宽字体

　在Webkit浏览器下还设置了反锯齿平滑渲染，渲染出来要纤细一些。

　OSX平台的Firefox从v25增加了-moz-osx-font-smoothing，实行了类似Webkit的字体渲染效果。

　　body {
　　　　-webkit-font-smoothing: antialiased;
　　　　-moz-osx-font-smoothing: grayscale;
　　}
　也可以设置成浏览器的默认平滑字体。　

　　body {
　　　　-webkit-font-smoothing: subpixel-antialiased;
　　　　-moz-osx-font-smoothing: auto;
　　　　}

　　元素基本样式

　<h1>-<h6>保持粗体，设置了边距。<h1>为正常字体号的1.5倍；<h2>为正常字体号的1.25倍;其他保持正常字号、

　段落<p> 分割线<hr> 代码快<pre> 列表<ul><li></li></ul> 有序列表<ol><li></li></ol>

　引用<blockquote>(作者一般放在<small>元素里)

　　<p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>

  　　<small>马尔克斯 ——《百年孤独》</small>

　</blockquote>

　定义列表<dl><dt><dd></dt></dd></dl>

　表格<table><caption></caption><thead><tr><td></td></tr></thead></table>

　图片<img class="" src=" alt="" />

　超链接<a> 粗体<strong> 行内代码<code> 删除线<del> 背景变黄<ins>

　　显示URL链接

　利用css3content属性，将<a>和<abbr>的标题、链接显示在后面。

　辅助class：am-print-hide浏览器可见，打印机隐藏 am-print-block、am-print-inline-block、am-print-inline打印机可见，浏览器不可见。

秒客网

AmazeUI基本样式

相关文章