例子文件:Sample.html http://www.blueprintcss.org/tests/parts/sample.html
<link rel="stylesheet" href="http://www.cnblogs.com/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 ;
}
/* 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不错*/
input[type=text], input[type=password],
input.text, input.title,
textarea, select {
background-color : #fff ;
border : 1px solid #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.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的位置*/
input[type=checkbox], input[type=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 the
next 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 { margin : 0 - 240px 1.5em 240px ; }
.push-7 { margin : 0 - 280px 1.5em 280px ; }
.push-8 { margin : 0 - 320px 1.5em 320px ; }
.push-9 { margin : 0 - 360px 1.5em 360px ; }
.push-10 { margin : 0 - 400px 1.5em 400px ; }
.push-11 { margin : 0 - 440px 1.5em 440px ; }
.push-12 { margin : 0 - 480px 1.5em 480px ; }
.push-13 { margin : 0 - 520px 1.5em 520px ; }
.push-14 { margin : 0 - 560px 1.5em 560px ; }
.push-15 { margin : 0 - 600px 1.5em 600px ; }
.push-16 { margin : 0 - 640px 1.5em 640px ; }
.push-17 { margin : 0 - 680px 1.5em 680px ; }
.push-18 { margin : 0 - 720px 1.5em 720px ; }
.push-19 { margin : 0 - 760px 1.5em 760px ; }
.push-20 { margin : 0 - 800px 1.5em 800px ; }
.push-21 { margin : 0 - 840px 1.5em 840px ; }
.push-22 { margin : 0 - 880px 1.5em 880px ; }
.push-23 { margin : 0 - 920px 1.5em 920px ; }
.push-24 { margin : 0 - 960px 1.5em 960px ; }
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 { float : right right ; position : relative ;}
/* Misc classes and elements
-------------------------------------------------------------- */
/* In case you need to add a gutter above/below an element */
.prepend- top {
margin-top :1.5em;
}
.append- bottom bottom {
margin-bottom :1.5em;
}
/* Use a .box to create a padded box inside a column. */
.box {
padding : 1.5em;
margin-bottom : 1.5em;
background : #E5ECF9 ;
}
/* Use this to create a horizontal ruler across a column. */
hr {
background : #ddd ;
color : #ddd ;
clear : both ;
float : none ;
width : 100%;
height : .1em;
margin : 0 0 1.45em;
border : none ;
}
hr.space {
background : #fff ;
color : #fff ;
}
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after {
content : "\0020" ;
display : block ;
height : 0;
clear : both ;
visibility : hidden ;
overflow : hidden ;
}
.clearfix, .container { display : block ;}
/* Regular clearing
apply to column that should drop below previous ones. */
. clear { clear : both ; }
CSS代码
/* --------------------------------------------------------------
ie.css
Contains every hack for Internet Explorer,
so that our core files stay sweet and nimble.
IE问题集 - -
可以解决好多莫名其妙的IE兼容性问题
-------------------------------------------------------------- */
/* Make sure the layout is centered in IE5
兼容IE5...*/
body { text-align : center ; }
.container { text-align : left ; }
/* Fixes IE margin bugs */
* html .column, * html div.span-1, * html div.span-2,
* html div.span-3, * html div.span-4, * html div.span-5,
* html div.span-6, * html div.span-7, * html div.span-8,
* html div.span-9, * html div.span-10, * html div.span-11,
* html div.span-12, * html div.span-13, * html div.span-14,
* html div.span-15, * html div.span-16, * html div.span-17,
* html div.span-18, * html div.span-19, * html div.span-20,
* html div.span-21, * html div.span-22, * html div.span-23,
* html div.span-24 { overflow -x: hidden ; }
/* Elements
-------------------------------------------------------------- */
/* Fixes incorrect styling of legend in IE6. */
* html legend { margin : 0px - 8px 16px 0; padding :0; }
/* Fixes incorrect placement of ol numbers in IE6/7. */
ol { margin-left :2em; }
/* Fixes wrong line-height on sup/sub in IE. */
sup { vertical-align : text-top ; }
sub { vertical-align : text-bottom ; }
/* Fixes IE7 missing wrapping of code elements. */
html>body p code { * white white-space : normal ; }
/* IE 6&7 has problems with setting proper <hr> margins. */
hr { margin : - 8px auto 11px ; }
/* Explicitly set interpolation, allowing dynamically resized images to not look horrible */
img { -ms-interpolation-mode: bicubic; }
/* Clearing
-------------------------------------------------------------- */
/* Makes clearfix actually work in IE */
.clearfix, .container { display : inline - block ;}
* html .clearfix,
* html .container { height : 1%;}
/* Forms
-------------------------------------------------------------- */
/* Fixes padding on fieldset */
fieldset { padding-top : 0;}
/* Fixes rule that IE 6 ignores */
input.text, input.title { background-color : #fff ; border : 1px solid #bbb ;}
input.text:focus, input.title:focus { border-color : #666 ;}
input.text, input.title, textarea, select { margin :0.5em 0;}
input.checkbox, input.radio { position : relative ; top :.25em;}
/* Fixes alignment of inline form elements */
form. inline div, form. inline p { vertical-align : middle ;}
form. inline label { position : relative ; top :-0.25em;}
form. inline input.checkbox, form. inline input.radio,
form. inline input.button, form. inline button {
margin :0.5em 0;
}
button, input.button { position : relative ; top :0.25em;}
为打印作优化
CSS代码
/* --------------------------------------------------------------
print.css
* Gives you some sensible styles for printing pages.
* See Readme file in this directory for further instructions.
Some additions you'll want to make, customized to your markup:
#header, #footer, #navigation { display:none; }
-------------------------------------------------------------- */
body {
line-height : 1.5;
font-family : "Helvetica Neue" , Arial , Helvetica , sans-serif ;
color : #000 ;
background : none ;
font-size : 10pt ;
}
/* Layout
-------------------------------------------------------------- */
/*除去背景*/
.container {
background : none ;
}
/*加深水平线*/
hr {
background : #ccc ;
color : #ccc ;
width :100%;
height : 2px ;
margin :2em 0;
padding :0;
border : none ;
}
hr.space {
background : #fff ;
color : #fff ;
}
/* Text
-------------------------------------------------------------- */
/*这样的字体在印刷物上更清晰*/
h1,h2,h3,h4,h5,h6 { font-family : "Helvetica Neue" , Arial , "Lucida Grande" , sans-serif ; }
code { font :.9em "Courier New" , Monaco, Courier, monospace ; }
img { float : left ; margin :1.5em 1.5em 1.5em 0; }
a img { border : none ; }
p img. top { margin-top : 0; }
blockquote {
margin :1.5em;
padding :1em;
font-style : italic ;
font-size :.9em;
}
. small { font-size : .9em; }
. large { font-size : 1.1em; }
.quiet { color : #999 ; }
. hide { display : none ; }
/* Links
-------------------------------------------------------------- */
/*为链接加下划线*/
a:link, a:visited {
background : transparent ;
font-weight :700;
text-decoration : underline ;
}
/*显示链接的链接地址*/
a:link:after, a:visited:after {
content : " (" attr (href) ")" ;
font-size : 90%;
}
/* If you're having trouble printing relative links, uncomment and customize this:
(note: This is valid CSS3, but it still won't go through the W3C CSS Validator)
显示绝对地址
但是不能通过W3C校验
*/
/* a[href^="/"]:after {
content: " (http://www.yourdomain.com" attr(href) ") ";
} */