Blueprint CSS 分析例子.doc

如有侵权，请联系网站删除，仅供学习与交流Blueprint CSS 分析例子【精品文档】第 20 页 英文意思是蓝图、设计图。 BluePrint可以非常方便的实现复杂的网页布局，即能更简单实现自己的蓝图。例子文件:Sample.html              <link rel="stylesheet" href="././blueprint/screen.css" type="text/css" media="screen, projection">这个文件将所有的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不错*/    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-