Home > Web Front-end > HTML Tutorial > Mozilla's CSS writing style_html/css_WEB-ITnose

Mozilla's CSS writing style_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:49:04
Original
1041 people have browsed it

/* 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;}
Copy after login

 

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template