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>元素裏)

　<blockquote>　　　　

　　<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>的標題、連接顯示在後面。

　<a herf="www.baidu.com">百度</a>

　<abbr title="www.baidu.com">百度</abbr>

　輔助class：am-print-hide瀏覽器可見，打印機隱藏    am-print-block、am-print-inline-block、am-print-inline打印機可見，瀏覽器不可見。