Blueprint-CSS-分析例子

Blueprint英文意思是蓝图、设计图。BluePrintCSS可以非常方便的实现复杂的网页布局，即能更简单实现自己的蓝图。例子文件:Sample.html=stylesheethref=../../blueprint/screen.csstype=text/cssmedia=screen,projection这个文件将所有的CSS文件合并到一起，减少了并发连接数。一共包含了以下几个CSS/*reset.css*//*typography.css*//*forms.css*//*grid.css*/此外，如果是IE8以下版本则包含/*ie.css*/作者的注释已经很清晰了，代码也很清晰。跟着我一起理解一遍即可。CSS代码/*--------------------------------------------------------------reset.css*ResetsdefaultbrowserCSS.--------------------------------------------------------------*//*原文作者注释已经很清晰了*/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:baselinebaseline;}/*行高1.5，也就是150%,刚看了淘宝UED的碳酸饮料会杂志，上面有介绍*/body{line-height:1.5;}/*Tablesstillneed'cellspacing=0'inthemarkup.*/table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}/*垂直居中*/table,td,th{vertical-align:middle;}/*Removepossiblequotemarks()fromq,blockquote.*/blockquote:before,blockquote:after,q:before,q:after{content:;}blockquote,q{quotes:;}/*链接内加图片，会有一个难看的border*/aimg{border:none;}CSS代码/*--------------------------------------------------------------typography.css*Setsupsomesensibledefaulttypography.typography==文字排版--------------------------------------------------------------*//*Defaultfontsettings.Thefont-sizepercentageisof16px.(0.75*16px=12px)默认12像素*/body{font-size:75%;color:#222;background:#fff;font-family:HelveticaNeue,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;}/*H5H6的字体和正文已经一样了，所以要加粗*/h5{font-size:1em;font-weight:bold;margin-bottom:1.5em;}h6{font-size:1em;font-weight:bold;}h1img,h2img,h3img,h4img,h5img,h6img{margin:0;}/*Textelements--------------------------------------------------------------*/p{margin:001.5em;}pimg.left{float:left;margin:1.5em1.5em1.5em0;padding:0;}pimg.rightright{float:rightright;margin:1.5em01.5em1.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:1pxdotted#666;}address{margin:001.5em;font-style:italic;}del{color:#666;}pre{margin:1.5em0;whitewhite-space:pre;}/*代码用等宽字体*/pre,code,tt{font:1em'andalemono','lucidaconsole',monospace;line-height:1.5;}/*Lists--------------------------------------------------------------*//*和平时的做法不一样,常用的ulli是有margin的，并保留list-style*/liul,liol{margin:01.5em;}ul,ol{margin:01.5em1.5em1.5em;}ul{list-style-type:disc;}ol{list-style-type:decimal;}dl{margin:001.5em0;}dldt{font-weight:bold;}dd{margin-left:1.5em;}/*Tables--------------------------------------------------------------*//*表格头加粗加背景，效果应该不错*/table{margin-bottom:1.4em;width:100%;}th{font-weight:bold;}theadth{background:#c3d9ff;}th,td,caption{padding:4px10px4px5px;}tr.eventd{background:#e5ecf9;}tfoot{font-style:italic;}caption{background:#eee;}/*Miscclasses--------------------------------------------------------------*/.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;}.bottombottom{margin-bottom:0;padding-bottom:0;}表单CSS代码/*--------------------------------------------------------------forms.css*Setsupsomedefaultstylingforforms*GivesyouclassestoenhanceyourformsUsage:*Fortextfields,useclass.titleor.text*Forinlineforms,use.inline(evenwhenusingcolumns)--------------------------------------------------------------*/label{font-weight:bold;}fieldset{padding:1.4em;margin:001.5em0;border:1pxsolid#ccc;}legend{font-weight:bold;font-size:1.2em;}/*Formfields--------------------------------------------------------------*//*这种方式的selector不错*/input[type=text],input[type=password],input.text,input.title,textarea,select{background-color:#fff;border:1pxsolid#bbb;}/*获取到焦点时改变边框颜色，不用JS就能实现，很实用*/input[type=text]:focus,input[type=password]:focus,input.text:focus,input.title:focus,textarea:focus,select:focus{border-color:#666;}input[type=text],input[type=password],input.text,input.title,textarea,select{margin:0.5em0;}input.text,input.title{width:300px;padding:5px;}input.title{font-size:1.5em;}textarea{width:390px;height:250px;padding:5px;}/*修正checkbox和radio的位置*/input[typ