Mozilla的CSS编写风格

/* mozilla.org Base Styles

 * maintained by fantasai

 * (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup )

 */

/* Suggested order:

 * display

 * list-style

 * position

 * float

 * clear

 * width

 * height

 * margin

 * padding

 * border

 * background

 * color

 * font

 * text-decoration

 * text-align

 * vertical-align

 * white-space

 * other text

 * content

 *

 */



/* TOC:

   Random HTML Styles

     Forms

   General Structure

   Navigation

   Quotations

   Comments and Other Asides

   Emphasis

   Computers - General

   Code

   Examples and Figures

   Q and A (FAQ)

   Tables

   Headers

   Meta

   Specific to Products Pages

*/

/* Random HTML Styles */



    dt {

        font-weight: bold;

    }

    

    dd {

        margin: 0 0 1em 1em;

    }

    

    li {

        margin-top: 0.2em;

        margin-bottom: 0.2em;

    }

    

    sup {

        font-size: 70%;

    }



    form {

        margin: 0;

        display: inline;

    }



    label {

        font-weight: bold;

    }



/* General Structure */

    

    .subtitle {

        font-style: italic;

    }



    div.para {

        margin: 1em 0;

    }



    div.para > ul,

    div.para > ol,

    div.para > blockquote {

        margin-top: 0.2em;

        margin-bottom: 0.2em;

    }



    div.section {

        display: block;

        padding-left: 3%;

    }



    div.section > h2,

    div.section > h3,

    div.section > h4,

    div.section > h5,

    div.section > h6 {

        margin-left: -1.3%;

    }

    

    .block {

      display: block;

      margin: 0.1em 1em;

    }

    

    .imgright {

        float: right;

        margin: 0 0 2em 2em;

    }

    

    .first {

        margin-top: 0; /* For IE not understanding :first-child */

    }



/* Navigation */



    :link img,

    :visited img {

        border: 0;

    }

    .deepLevel #mainContent :link img,

    .deepLevel #mainContent :visited img {

        border: medium solid;

    }

    .deepLevel #mainContent #buttons :link img,

    .deepLevel #mainContent #buttons :visited img {

        border: 0;

    }



    .ex-ref {

        font-style: italic;

    }



    dl.toc dt {

        margin-top: 1em;

        font-size: 110%;

    }

    dl.toc p {

        margin: 0;

        text-indent: 1em;

    }

    dl.toc p:first-child {

        text-indent: 0;

    }

    dl.toc > dd {

        margin-left: 1em;

    }



    ol.toc ol {

        list-style-type: circle;

    }

    ol.toc > li > ol {

        font-size: 90%;

    }



    ul.snav {/* section navigation or short navigation, whichever you prefer */

        margin: 0.7em 10%;

        padding: .2em;

        text-align: center;

        list-style-type: none;

    }

    ul.snav > li {

        margin: 0;

        padding: 0;

    }

    ul.snav > li {

        display: inline;

    }

    ul.snav > li:before {

        content: " | ";

    }

    ul.snav > li:first-child:before {

        content: "";

    }



    @media screen, print, handheld, projection {

        p.crumbs em {

            display: none;

        }

    }



    #mainContent > p.crumbs:first-child,

    #side > p.crumbs:first-child {

        margin-top: 0;

    }



    a.cont {

        display: block;

        margin-right: 0;

        text-align: right;

    }



/* Quotations */



    blockquote > address {

        padding-left: 1em;

        text-indent: -1em;

    }

    blockquote > address:before {

        content: "\2015";

    }



    div.quote,

    div.epigraph {

        margin: 1em;

    }

    div.quote q,

    div.epigraph q {

        display: block;

        margin: 0 .5em;

        text-indent: -0.5em;

    }

    div.quote cite,

    div.epigraph cite {

        display: block;

        padding: 0 1em;

        text-align: right;

        text-indent: -1em;

    }

    div.quote cite:before,

    div.epigraph cite:before {

        content: "\2015";

    }



    blockquote.epigraph,

    div.epigraph q {

        font-style: italic;

        text-align: right;

    }

    blockquote.epigraph em,

    div.epigraph q em {

        font-style: normal;

    }

    blockquote.epigraph address,

    div.epigraph cite {

        font-style: normal;

    }



/* Comments and other Asides */



    .note {

        font-style: italic;

    }

    .note:before {

        content: "Note: ";

    }



    .remark {

        font-size: smaller;

    }

    .remark:before {

        content: "[";

    }

    .remark:after {

        content: "]";

    }



    .sidenote {

        clear: both;

        margin: 0.75em 0.5em;

        padding: 0.2em;

        border: 1px solid;



        /* Block NS4 from floating */ /*/*/

        float: right;

        width: 30%;

        min-width: 15em;

        /* */

    }

    /* Reduce main header sizes */

    .sidenote h1 {font-size: 1.40em;}

    .sidenote h2 {font-size: 1.25em;}

    .sidenote h3 {font-size: 1.10em;}



    .key-point > h1:first-child,

    .key-point > h2:first-child,

    .key-point > h3:first-child,

    .key-point > h4:first-child,

    .key-point > h5:first-child,

    .key-point > h6:first-child {

        margin-top: 0;

    }



/* Emphasis */



    /* em, strong */



    strong.stronger {

        font-style: italic;

        font-weight: bold;

    }



    strong.very-strong {

        font-weight: bold;

        text-transform: uppercase;

    }



    *.important,

    div.important,

    p.important {

        margin: 1em;

        padding: 0.1em;

        border: solid #F00;

        font-size: larger;

    }

    

    span.important {

        margin: 0;

        padding: 0;

        border: 0;

        font-size: smaller;

        color: #c00;

    }



/* Computers - General */



    pre.screen {

        overflow: auto;

        margin: 1em 0.5em;

        padding: 0.2em;

        border: solid 1px;

        font-family: monospace;

        white-space: pre;

    }



    div.screen {

        margin: 1em .5em;

        padding: 0.2em;

        border: solid 1px;

    }



    span.application {

        font-style: italic;

    }



    kbd.long {

        display: block;

        margin: 0.1em 1em;

    }



    kbd.command,

    code.command {

        white-space: pre;

    }



    code.filename {

        font-style: italic;

        white-space: nowrap;

    }



/* Code */



    code, pre {

        /* override IE6 default */

        font-size: 1em;

    }



    code {

        white-space: nowrap;

    }

    code.long {

        display: block;

        margin: 0.1em 1em;

        white-space: normal;

    }



    pre.code {

        overflow: auto;

        margin: 1em .5em;

        padding: .2em;

        border: solid 1px;

    }



    pre.code .remark {

        font-size: 1em;

        font-style: italic;

    }



    /* turn off content generation */

    pre.code .remark:before,

    pre.code .remark:after,

    pre.code .note:before {

        content: "";

    }





/* Examples and Figures */



    .example {

        margin: 1em 3%;

        padding: .25em;

        border: solid;

    }

    .example:before {

        display: block;

        font-weight: bold;

        content: "Example";

    }

    .example[title]:before {

        content: "Example: " attr(title);

    }



    pre.bad,

    div.bad {

        border: dashed red 3px;

    }

    .bad.example:before {

        content: "Incorrect Example";

    }

    .bad.example[title]:before {

        content: "Incorrect Example: " attr(title);

    }



    pre.good,

    div.good {

        border: double lime 3px;

    }

    .good.example:before {

        content: "Correct Example";

    }

    .good.example[title]:before {

        content: "Correct Example: " attr(title);

    }



    .figure,

    .screenshot {

        display: block;

        margin: .75em auto;

    }

    object.figure object,

    object.screenshot object,

    object.figure img,

    object.screenshot object {

        display: block;

        margin: 0 auto;

    }

    .screenshot[title]:after,

    .figure[title]:after {

        display: block;

        margin: 0 8% .05em;

        font-style: italic;

        font-size: small;

        text-align: right;

        content: attr(title);

    }



    .co,

    .callout {

        text-decoration: underline;

    }



/* Q and A (FAQ) */



    .qandaset .question {

        font-size: large;

        font-weight: bold;

    }



    .qandaset .answer {

        margin-top: 1em;

    }



/* Tables */



    table.data {

        border-collapse: collapse;

        margin: 0.5em auto;

        border: 1px solid;

    }



    table.data caption {

        margin: 1em auto 0.2em;

        font-size: small;

        font-style: italic;

        text-align: center;

    }



    table.data th,

    table.data td {

        padding: 0.2em;

        border: 1px solid;

        vertical-align: baseline;

    }



    table.data tbody th:first-child {

        text-align: right;

    }



    table.data thead th {

        vertical-align: middle;

    }



/* Meta */



    address {

        text-align: right;

    }

    .author {

        margin-bottom: 1em;

        text-align: left;

    }





/* Headers */



    #mainContent > h1:first-child,

    #mainContent > h2:first-child,

    #mainContent > h3:first-child,

    #mainContent > h4:first-child,

    #mainContent > h5:first-child,

    #mainContent > h6:first-child,

    #side > h1:first-child,

    #side > h2:first-child,

    #side > h3:first-child,

    #side > h4:first-child,

    #side > h5:first-child,

    #side > h6:first-child {

        margin-top: 0;

    }

    



/* Specific to Products Pages */



.productlist {

    margin: 0;

    padding: 0 0 0 5px;

}



.productlist li {

    clear: left;

    list-style: none;

    padding: 0 0 1em 0;

    margin-left: 0;

}



.productlist h3 {

    margin: 0 0 0.2em 0;

}



.productlist img {

    float: left;

    margin: 0 0.5em 1em 0;

}



/* Random Stuff That Needs To Be Cleaned Up / Deprecated */



.flLeft {

    float: left;

    margin: 5px 10px 5px 0;

}

.flRight {

    float: right;

    margin: 5px 0 5px 10px;

}