Heim > Web-Frontend > HTML-Tutorial > Mozilla的CSS编写风格_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:49:04
Original
1042 Leute haben es durchsucht

/* 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;}
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage