Blueprint-CSS-分析例子

Blueprint英文意思是蓝图、设计图。 BluePrintCSS可以非常方便的实现复杂的网页布局，即能更简单实现自己的蓝图。例子文件:Sample.html/tests/parts/sample.html这个文件将所有的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 , . */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 ;/* 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 font-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. left 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 ; 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 , lucida 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 font-style : italic ; caption background : #eee ; /* Misc classes- */. small font-size : .8em; margin-bottom : 1.875em; line-height : 1.875em; . large font-size : 1.2em; line-height : 2.5em; margin-bottom : 1.25em; . hide display : none ; .quiet color : #666 ; . loud color : #000 ; .highlight background : #ff0 ; .added background : #060 ; color : #fff ; .removed background : #900 ; color : #fff ; .first margin-left :0; padding-left :0; .last margin-right :0; padding-right :0; . top margin-top :0; padding-top :0; . bottom bottom margin-bottom :0; padding-bottom :0; 表单CSS代码/* - forms.css * Sets up some default styling for forms * Gives you classes to enhance your forms Usage: * For text fields, use class .title or .text * For inline forms, use .inline (even when using columns)- */label font-weight : bold ; fieldset padding :1.4em; margin : 0 0 1.5em 0; border : 1px solid #ccc ; legend font-weight : bold ; font-size :1.2em; /* Form fields- */*这种方式的selector不错*/inputtype=text, inputtype=password,input.text, input.title,textarea, select background-color : #fff ; border : 1px solid #bbb ;/*获取到焦点时改变边框颜色，不用JS就能实现，很实用*/inputtype=text:focus, inputtype=password:focus,input.text:focus, input.title:focus,textarea:focus, select:focus border-color : #666 ;inputtype=text, inputtype=password,input.text, input.title,textarea, select margin :0.5em 0;input.text,input.title width : 300px ; padding : 5px ; input.title font-size :1.5em; textarea width : 390px ; height : 250px ; padding : 5px ; /*修正checkbox和radio的位置*/inputtype=checkbox, inputtype=radio,input.checkbox, input.radio position : relative ; top :.25em;form. inline line-height :3; form. inline p margin-bottom :0; /* Success, notice and error boxes- */.error,.notice,.success padding : .8em; margin-bottom : 1em; border : 2px solid #ddd ; .error background : #FBE3E4 ; color : #8a1f11 ; border-color : #FBC2C4 ; .notice background : #FFF6BF ; color : #514721 ; border-color : #FFD324 ; .success background : #E6EFC2 ; color : #264409 ; border-color : #C6D880 ; .error a color : #8a1f11 ; .notice a color : #514721 ; .success a color : #264409 ; CSS代码/* - grid.css * Sets up an easy-to-use grid of 24 columns. By default, the grid is 950px wide, with 24 columns spanning 30px, and a 10px margin between columns. If you need fewer or more columns, namespaces or semantic element names, use the compressor script (lib/compress.rb) Note: Changes made in this file will not be applied when using the compressor: make changes in lib/blueprint/grid.css.rb- */* A container should group all your columns.容器宽950,居中*/.container width : 950px ; margin : 0 auto ;/* Use this class on any div.span / container to see the grid.显示grid*/.showgrid background : url ( src /grid.png);/* Columns- */* Sets up basic grid floating and margin.DIV需要float才能排一行*/.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 float : left ; margin-right : 10px ;/* The last column in a row needs this class.右侧的column需要将右边距调为0*/.last, div.last margin-right : 0; /* Use these classes to set the width of a column.最重要的部分,.span-x,为容器占用的column数*/.span-1 width : 30px ;.span-2 width : 70px ;.span-3 width : 110px ;.span-4 width : 150px ;.span-5 width : 190px ;.span-6 width : 230px ;.span-7 width : 270px ;.span-8 width : 310px ;.span-9 width : 350px ;.span-10 width : 390px ;.span-11 width : 430px ;.span-12 width : 470px ;.span-13 width : 510px ;.span-14 width : 550px ;.span-15 width : 590px ;.span-16 width : 630px ;.span-17 width : 670px ;.span-18 width : 710px ;.span-19 width : 750px ;.span-20 width : 790px ;.span-21 width : 830px ;.span-22 width : 870px ;.span-23 width : 910px ;.span-24, div.span-24 width : 950px ; margin :0; /* Use these classes to set the width of an input. */input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 border-left - width : 1px ! important ; border-right - width : 1px ! important ; padding-left : 5px ! important ; padding-right : 5px ! important ;input.span-1, textarea.span-1 width : 18px ! important ; input.span-2, textarea.span-2 width : 58px ! important ; input.span-3, textarea.span-3 width : 98px ! important ; input.span-4, textarea.span-4 width : 138px ! important ; input.span-5, textarea.span-5 width : 178px ! important ; input.span-6, textarea.span-6 width : 218px ! important ; input.span-7, textarea.span-7 width : 258px ! important ; input.span-8, textarea.span-8 width : 298px ! important ; input.span-9, textarea.span-9 width : 338px ! important ; input.span-10, textarea.span-10 width : 378px ! important ; input.span-11, textarea.span-11 width : 418px ! important ; input.span-12, textarea.span-12 width : 458px ! important ; input.span-13, textarea.span-13 width : 498px ! important ; input.span-14, textarea.span-14 width : 538px ! important ; input.span-15, textarea.span-15 width : 578px ! important ; input.span-16, textarea.span-16 width : 618px ! important ; input.span-17, textarea.span-17 width : 658px ! important ; input.span-18, textarea.span-18 width : 698px ! important ; input.span-19, textarea.span-19 width : 738px ! important ; input.span-20, textarea.span-20 width : 778px ! important ; input.span-21, textarea.span-21 width : 818px ! important ; input.span-22, textarea.span-22 width : 858px ! important ; input.span-23, textarea.span-23 width : 898px ! important ; input.span-24, textarea.span-24 width : 938px ! important ; /* Add these to a column to append empty cols.这个想法很有意思，可以提高了重用度*/.append-1 padding-right : 40px ;.append-2 padding-right : 80px ;.append-3 padding-right : 120px ;.append-4 padding-right : 160px ;.append-5 padding-right : 200px ;.append-6 padding-right : 240px ;.append-7 padding-right : 280px ;.append-8 padding-right : 320px ;.append-9 padding-right : 360px ;.append-10 padding-right : 400px ;.append-11 padding-right : 440px ;.append-12 padding-right : 480px ;.append-13 padding-right : 520px ;.append-14 padding-right : 560px ;.append-15 padding-right : 600px ;.append-16 padding-right : 640px ;.append-17 padding-right : 680px ;.append-18 padding-right : 720px ;.append-19 padding-right : 760px ;.append-20 padding-right : 800px ;.append-21 padding-right : 840px ;.append-22 padding-right : 880px ;.append-23 padding-right : 920px ;/* Add these to a column to prepend empty cols. */.prepend-1 padding-left : 40px ;.prepend-2 padding-left : 80px ;.prepend-3 padding-left : 120px ;.prepend-4 padding-left : 160px ;.prepend-5 padding-left : 200px ;.prepend-6 padding-left : 240px ;.prepend-7 padding-left : 280px ;.prepend-8 padding-left : 320px ;.prepend-9 padding-left : 360px ;.prepend-10 padding-left : 400px ;.prepend-11 padding-left : 440px ;.prepend-12 padding-left : 480px ;.prepend-13 padding-left : 520px ;.prepend-14 padding-left : 560px ;.prepend-15 padding-left : 600px ;.prepend-16 padding-left : 640px ;.prepend-17 padding-left : 680px ;.prepend-18 padding-left : 720px ;.prepend-19 padding-left : 760px ;.prepend-20 padding-left : 800px ;.prepend-21 padding-left : 840px ;.prepend-22 padding-left : 880px ;.prepend-23 padding-left : 920px ;/* Border on right hand side of a column.右侧的border,此外还会加右边距和右补白*/div. border padding-right : 4px ; margin-right : 5px ; border-right : 1px solid #eee ;/* Border with more whitespace, spans one column.比border空的更多 */div.colborder padding-right : 24px ; margin-right : 25px ; border-right : 1px solid #eee ;/* Use these classes on an element to push it into thenext column, or to pull it into the previous column.可以把元素拉回上一行或者推入下一行*/.pull-1 margin-left : - 40px ; .pull-2 margin-left : - 80px ; .pull-3 margin-left : - 120px ; .pull-4 margin-left : - 160px ; .pull-5 margin-left : - 200px ; .pull-6 margin-left : - 240px ; .pull-7 margin-left : - 280px ; .pull-8 margin-left : - 320px ; .pull-9 margin-left : - 360px ; .pull-10 margin-left : - 400px ; .pull-11 margin-left : - 440px ; .pull-12 margin-left : - 480px ; .pull-13 margin-left : - 520px ; .pull-14 margin-left : - 560px ; .pull-15 margin-left : - 600px ; .pull-16 margin-left : - 640px ; .pull-17 margin-left : - 680px ; .pull-18 margin-left : - 720px ; .pull-19 margin-left : - 760px ; .pull-20 margin-left : - 800px ; .pull-21 margin-left : - 840px ; .pull-22 margin-left : - 880px ; .pull-23 margin-left : - 920px ; .pull-24 margin-left : - 960px ; .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 float : left ; position : relative ;/*左右用像素,上下用相对定位*/.push-1 margin : 0 - 40px 1.5em 40px ; .push-2 margin : 0 - 80px 1.5em 80px ; .push-3 margin : 0 - 120px 1.5em 120px ; .push-4 margin : 0 - 160px 1.5em 160px ; .push-5 margin : 0 - 200px 1.5em 200px ; .push-6 mar