欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Mozilla的CSS编写风格_html/css_WEB-ITnose

程序员文章站 2022-06-01 14:58:59
...
/* 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;}