Blueprint CSS 分析例子.docVIP

Blueprint?英文意思是蓝图、设计图。 BluePrintCSS?可以非常方便的实现复杂的网页布局，即能更简单实现自己的蓝图。 例子文件:Sample.html??????????????/tests/parts/sample.html link rel=stylesheet href=../../blueprint/screen.css type=text/css media=screen, projection 这个文件将所有的CSS文件合并到一起，减少了并发连接数。 一共包含了以下几个CSS /* reset.css */ /* typography.css */ /* forms.css */ /* grid.css */ 此外，如果是IE8以下版本则包含/* ie.css */ ? 作者的注释已经很清晰了，代码也很清晰。跟着我一起理解一遍即可。 CSS代码/* ??????????? reset.css????? * Resets default browser CSS.????????? */????/*原文作者注释已经很清晰了*/??????????html, body, div, span, object, iframe,????h1, h2, h3, h4, h5, h6, p, blockquote,? pre ,????a, abbr, acronym, address,? code ,????del, dfn, em, img, q, dl, dt, dd, ol, ul, li,????fieldset, form, label, legend,????table,? caption , tbody, tfoot, thead, tr, th, td {?????? margin : 0;?????? padding : 0;?????? border : 0;?????? font-weight : inherit;?????? font-style : inherit;?????? font-size : 100%;?????? font-family : inherit;?????? vertical-align :? baseline baseline ;????}????/*行高1.5，也就是150%,刚看了淘宝UED的碳酸饮料会杂志，上面有介绍*/????body {??????? line-height : 1.5;?????}???????/* Tables still need cellspacing=0 in the markup. */????table {? border-collapse :? separate ;? border-spacing : 0; }????caption , th, td {? text-align :? left ;? font-weight :? normal ; }????/*垂直居中*/????table, td, th {? vertical-align :? middle ; }???????/* Remove possible quote marks () from q, blockquote. */????blockquote:before, blockquote:after, q:before, q:after {? content : ; }???blockquote, q { quotes: ; }???????/* 链接内加图片，会有一个难看的border */????a img {? border :? none ; }????CSS代码/* ???????? typography.css????? * Sets up some sensible default typography.??????????? typography == 文字排版????????? */???????/* Default font settings.?????? The font-size percentage is of 16px. (0.75 * 16px = 12px) 默认12像素????? */????body {??????? font-size : 75%;?????? color :? #222 ;??????? background :? #fff ;?????? font-family :? Helvetica Neue ,? Arial ,? Helvetica ,? sans-serif