解读Blueprint CSS framework

2024-05-01 17:08•css•阅读 3509

例子文件:Sample.html http://www.blueprintcss.org/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 <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) ") ";

} */

上一篇 »POX学习笔记：从POX启动开始——boot.py文件解读
下一篇 »Java关键词synchronized解读

解读Blueprint CSS framework

相关推荐

Solon Java Framework v1.12.0 发布

CSS 学习笔记

mass Framework css模块 v3

HTML中放置CSS的三种方式和CSS选择器

Integrating JavaScript into Native Applications

mass Framework css模块 v2

mass Framework css模块

CSS：CSS使用Tips