CSS: wysiwyg

11/26/2013 - 7:58 PM

.WYSWIG {
    p, div {
        font-size:0.6875em; /* 11px */
        line-height:19px;
        color:#525252;
        padding:0px 0px 10px 0px;
        text-align:justify;

        a, a:visited {
            color:#c4261c;

            :hover {
                text-decoration:underline;
            }
        }
    }

    ul {
        padding:5px 0px 3px 10px;

        li {
            font-size:0.6875em; /* 11px */
            line-height:19px;
            color:#525252;
            padding:0px 0px 4px 20px;
            text-align:justify;
            background: transparent url('/site_media/images/site/list_item.png') no-repeat 4px 7px;
        }
    }

    ol {
        padding:5px 0px 3px 36px;

        li {
            font-size:0.6875em; /* 11px */
            line-height:19px;
            color:#525252;
            padding:0px 0px 4px 5px;
            text-align:justify;
            list-style-type: decimal;
        }
    }

    ul, ol {
        li {
            a, a:visited {
                color:#c4261c;

                :hover {
                    text-decoration:underline;
                }
            }
        }
    }

    h1, h2, h3, h4, h5, h6 {
        text-transform:uppercase;
        color:#c4261c;

        a, a:visited {
            color:#525252;

            :hover {
                text-decoration:underline;
            }
        }
    }

    h1 {
        font-size:1.5em; /* 24px */
        padding:0px 0px 25px 0px;
    }

    h2 {
        font-size:1.3125em; /* 21px */
        padding:0px 0px 20px 0px;
    }

    h3 {
        font-size:1.1875em; /* 19px */
        padding:0px 0px 15px 0px;

        strong.no_upp {
            text-transform:none;
        }
    }

    h4 {
        font-size:1.0625em; /* 17px */
        padding:0px 0px 10px 0px;
    }

    h5 {
        font-size:0.9375em; /* 15px */
        padding:0px 0px 5px 0px;
    }

    h6 {
        font-size:0.875em; /* 14px */
        padding:0px 0px 4px 0px;
    }

    table {
        width:100%;

        caption {
            font-size:0.8125em; /* 13px */
            color:#C4261C;
            text-transform:uppercase;
            padding:0px 0px 10px 0px;
            text-transform:uppercase;
        }

        tbody {
            tr {
                td {
                    font-size:0.6875em; /* 11px */
                    padding:0px 4px;
                    color:#525252;

                    a, a:visited {
                        color:#c4261c;

                        :hover {
                            text-decoration:underline;
                        }
                    }
                }

                th {
                    font-size:0.6875em; /* 11px */
                    padding:0px 4px;
                    color:#525252;
                    font-weight:bold;
                }
            }
        }

        thead {
            tr {
                td, th {
                    font-size:0.6875em; /* 11px */
                    padding:0px 4px 5px 4px;
                    color:#525252;
                    font-weight:bold;
                    border-bottom:1px solid #525252;
                }
            }
        }

        tfoot {
            tr {
                td {
                    font-size:0.6875em; /* 11px */
                    padding:0px 4px;
                    color:#525252;
                    font-style:italic;
                    border-top:1px solid #949494;
                }
            }
        }
    }

    blockquote {
        padding:0px 0px 0px 30px;
    }

    pre {
        color:#525252;
    }

    address {
        padding:0px 0px 0px 30px;
        font-size:0.6875em; /* 11px */
        font-style:italic;
        color:#525252;
    }
}

index.html

<p>TEST #1 formatowanie tekstu</p>
<p>Lorem ipsum dolor sit amet, <span style="text-decoration: line-through;">consectetuer adipiscing elit,</span> sed diam nonummy nibh euismod tincidunt <strong>ut laoreet dolore</strong> magna aliquam <em>erat volutpat</em>. Ut wisi enim ad minim veniam, <span style="text-decoration: underline;">quis nostrud exerci</span> tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <strong>Duis autem vel eum iriure dolor</strong> in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu <span style="color: #ff0000;">ta czcionka jest kolorem czerwonym pisana</span> feugiat nulla facilisis <em>at vero eros et accumsan et </em>iusto odio <span style="text-decoration: underline;">dignissim qui</span> blandit praesent luptatum <span style="background-color: #ffff00;">to powinno mieć ż&oacute;łte tło</span> zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>TEST #2 ukierunkowanie tekstu</p>
<p style="text-align: left;">Tekst do lewej. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels  et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e  pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non  provisio incongruous feline nolo contendre.</p>
<p style="text-align: right;">Tekst do prawej. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels  et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e  pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non  provisio incongruous feline nolo contendre.</p>
<p style="text-align: center;">Tekst wycentrowany. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels  et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e  pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non  provisio incongruous feline nolo contendre.</p>
<p style="text-align: justify;">Tekst wyjustowany. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels  et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e  pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non  provisio incongruous feline nolo contendre.</p>
<p style="text-align: justify; padding-left: 30px;">Tekst z pojedynczym wcięciem/wyjustowany. Epsum factorial non deposit quid pro quo hic escorol.  Olypian quarrels  et gorilla congolium sic ad nauseum. Souvlaki ignitus  carborundum e  pluribus unum. Defacto lingo est igpay atinlay. Marquee  selectus non  provisio incongruous feline nolo contendre.</p>
<p style="text-align: justify;">spacer spacer spacer spacer</p>
<blockquote>
<p style="text-align: justify;">Cytat.Epsum factorial non deposit quid pro quo hic escorol.  Olypian quarrels   et gorilla congolium sic ad nauseum. Souvlaki ignitus  carborundum e   pluribus unum. Defacto lingo est igpay atinlay. Marquee  selectus non   provisio incongruous feline nolo contendre.</p>
</blockquote>
<p style="text-align: justify;">spacer spacer spacer spacer</p>
<pre style="text-align: justify;">Czcionka o stałej szerokości. Epsum factorial non deposit quid pro quo hic escorol.  Olypian quarrels  et gorilla congolium sic ad nauseum. Souvlaki ignitus  carborundum e  pluribus unum. Defacto lingo est igpay atinlay. Marquee  selectus non  provisio incongruous feline nolo contendre.</pre>
<address style="text-align: justify;">Adres (?). Epsum factorial non deposit quid pro quo hic escorol.  Olypian quarrels  et gorilla congolium sic ad nauseum. Souvlaki ignitus  carborundum e  pluribus unum. Defacto lingo est igpay atinlay. Marquee  selectus non  provisio incongruous feline nolo contendre.</address>
<p style="text-align: left;">Inne zabawy z tekstem. Epsum factorial non<sup>lorem ipsum</sup> deposit quid pro quo hic escorol. Olypian quarrels<sub>dolor sit</sub> et gorilla congolium sic ad nauseum. Znaki specjalne: &AElig;, &zeta;, &not;, &OElig;.</p>
<p>TEST #3 listy</p>
<p>Lista wypunktowana:</p>
<ul>
<li>Epsum factorial non deposit quid pro quo hic escorol.</li>
<li>Olypian quarrels  et gorilla congolium sic ad nauseum.</li>
<li>Souvlaki ignitus carborundum e  pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non  provisio incongruous feline nolo contendre. </li>
</ul>
<p>Lista numerowana:</p>
<ol>
<li>Epsum factorial non deposit quid pro quo hic escorol.</li>
<li>Olypian quarrels  et gorilla congolium sic ad nauseum.</li>
<li>Souvlaki ignitus carborundum e  pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non  provisio incongruous feline nolo contendre. Gratuitous octopus niacin,  sodium glutimate.</li>
<li>Quote meon an estimate et non interruptus stadium.</li>
</ol>
<p>TEST #4 nagł&oacute;wki</p>
<h1>Jednolinijkowy H1</h1>
<h2>Jednolinijkowy H2</h2>
<h3>Jednolinijkowy H3</h3>
<h4>Jednolinijkowy H4</h4>
<h5>Jednolinijkowy H5</h5>
<h6>Jednolinijkowy H6</h6>
<h1>Wielolinijkowy H1Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels   et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e   pluribus unum. Defacto lingo est igpay atinlay.</h1>
<h2>Wielolinijkowy H2 Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels   et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e   pluribus unum. Defacto lingo est igpay atinlay.</h2>
<h3>Wielolinijkowy H3 Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels   et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e   pluribus unum. Defacto lingo est igpay atinlay.</h3>
<h4>Wielolinijkowy H4 Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels   et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e   pluribus unum. Defacto lingo est igpay atinlay.</h4>
<h5>Wielolinijkowy H5 Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels   et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e   pluribus unum. Defacto lingo est igpay atinlay.</h5>
<h6>Wielolinijkowy H6 Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels   et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e   pluribus unum. Defacto lingo est igpay atinlay.</h6>
<p>TEST #5 linki</p>
<p>Epsum factorial <a title="This link gets you whatever it is defined" href="http://whatever.pl/">link w paragrafie</a> non deposit quid pro quo hic escorol.</p>
<ul>
<li>Epsum factorial <a title="This link gets you whatever it is defined" href="http://whatever.pl/">link w liście wypunktowanej</a> non deposit quid pro quo hic escorol.</li>
</ul>
<ol>
<li>Epsum factorial <a title="This link gets you whatever it is defined" href="http://whatever.pl/">link w liście numerowanej</a> non deposit quid pro quo hic escorol.</li>
</ol>
<h1>Epsum factorial <a title="Quote meon an estimate et non interruptus stadium. Quote meon an" href="http://whatever.pl/">link w nagł&oacute;wku H1</a> non deposit quid pro quo hic escorol.</h1>
<h2>Epsum factorial <a title="Quote meon an estimate et non interruptus stadium. Quote meon an" href="http://whatever.pl/">link w nagł&oacute;wku H2</a> non deposit quid pro quo hic escorol.</h2>
<h3>Epsum factorial <a title="Quote meon an estimate et non interruptus stadium. Quote meon an" href="http://whatever.pl/">link w nagł&oacute;wku H3</a> non deposit quid pro quo hic escorol.</h3>
<p>TEST #6 horizontal line</p>
<hr />
<p>TEST #7 tables</p>
<table border="0">
<caption>To jest nagł&oacute;wek tabeli (tzw CAPTION)</caption>
<thead>
<tr>
<th>th: 1</th>
<tdh>th: 2</th>
<tdh>th: 3</th>
<tdh>th: 4</th>
<tdh>th: 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>345346456</td>
<td>Jaś</td>
<td>Małgosia</td>
<td>Tak</td>
</tr>
<tr>
<td>B</td>
<td>4557457</td>
<td>Zenek</td>
<td>Felek</td>
<td>Nie</td>
</tr>
<tr>
<td>C</td>
<td rowspan="2">347356856</td>
<td colspan="2">Zbysławomirscy</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>D</td>
<td>Helga</td>
<td>Alfred</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>E</td>
<td>568568</td>
<td>Lo</td>
<td>Mio</td>
<td>&nbsp;</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>S1</td>
<td>S2</td>
<td>S3</td>
<td>S4</td>
<td>S5</td>
</tr>
</tfoot>
</table>
<p>TEST #8 images</p>
<p><img title="tytuł obrazka" src="http://tarnow.geminipark.pl/site_media/images/site/geminipark-logo.png" alt="opis obrazka" width="196" height="55" /></p>
<p><a href="http://whatever.pl/"><img title="Quote meon an estimate et non interruptus stadium. Quote meon an 2" src="http://tarnow.geminipark.pl/site_media/images/site/geminipark-logo.png" alt="Description of the image" width="196" height="55" /></a></p>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

CSS: wysiwyg