《Blueprint CSS 分析例子教程文件》由会员分享，可在线阅读，更多相关《Blueprint CSS 分析例子教程文件（19页珍藏版）》请在金锄头文库上搜索。
1、Blueprint CSS 分析例子精品文档Blueprint英文意思是蓝图、设计图。 BluePrintCSS可以非常方便的实现复杂的网页布局，即能更简单实现自己的蓝图。例子文件:Sample.htmlhttp:/www.blueprintcss.org/tests/parts/sample.html这个文件将所有的CSS文件合并到一起，减少了并发连接数。一共包含了以下几个CSS/* reset.css */* typography.css */* forms.css */* grid.css */此外，如果是IE8以下版本则包含/* ie.css */ 作者的注释已经很清晰了，代码也很清晰
2、。跟着我一起理解一遍即可。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
3、, 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
4、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 , . */blockquote:before, blockquote:after, q:before, q:after content : ; blockquote, q quotes: ; /* 链接内加
5、图片，会有一个难看的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 : Helvet
6、ica Neue , Arial , Helvetica , sans-serif ;/* Headings- */*不加粗,非纯黑(将更美观)*/h1,h2,h3,h4,h5,h6 font-weight : normal ; color : #111 ; h1 font-size : 3em; line-height : 1; margin-bottom : 0.5em; h2 font-size : 2em; margin-bottom : 0.75em; h3 font-size : 1.5em; line-height : 1; margin-bottom : 1em; h4 fon
7、t-size : 1.2em; line-height : 1.25; margin-bottom : 1.25em; /*H5 H6的字体和正文已经一样了，所以要加粗*/h5 font-size : 1em; font-weight : bold ; margin-bottom : 1.5em; h6 font-size : 1em; font-weight : bold ; h1 img, h2 img, h3 img,h4 img, h5 img, h6 img margin : 0;/* Text elements- */p margin : 0 0 1.5em; p img. lef
8、t float : left ; margin : 1.5em 1.5em 1.5em 0; padding : 0; p img. right right float : right right ; margin : 1.5em 0 1.5em 1.5em; a:focus,a:hover color : #000 ; a color : #009 ; text-decoration : underline ; blockquote margin : 1.5em; color : #666 ; font-style : italic ; strong font-weight : bold ;
9、 em,dfn font-style : italic ; dfn font-weight : bold ; sup, sub line-height : 0; abbr,acronym border-bottom : 1px dotted #666 ; address margin : 0 0 1.5em; font-style : italic ; del color : #666 ; pre margin : 1.5em 0; white white-space : pre ; /*代码用等宽字体*/pre , code ,tt font : 1em andale mono , luci
10、da console , monospace ; line-height : 1.5; /* Lists- */*和平时的做法不一样,常用的ul li是有margin的，并保留list-style*/li ul,li ol margin :0 1.5em; ul, ol margin : 0 1.5em 1.5em 1.5em; ul list-style-type : disc ; ol list-style-type : decimal ; dl margin : 0 0 1.5em 0; dl dt font-weight : bold ; dd margin-left : 1.5em;/* Tables- */*表格头加粗加背景，效果应该不错*/table margin-bottom : 1.4em; width :100%; th font-weight : bold ; thead th background : #c3d9ff ; th,td, caption padding : 4px 10px 4px 5px ; tr.even td background : #e5ecf9 ; tfoot fon
