Formátování spanů a divů - praktická ukázka
Nejprve si připravíme HTML kód:
<h1>Něco o kočkách</h1>
<p>Kočky jsou <span class="vyrazny">domácí zvířata</span>, která předou.</p>
<p>Dělí se podle různých kritérií na kočky a kocoury, na dlouhosrsté a krátkosrsté, na chytré a chytřejší.</p>
<div class="priklad">
<p>Například v naší domácnosti se vyskytuje osm koček. Jsou to tři kocouři a pět koček, jedna <span class="vysvetlivka">dlouhosrstá</span> a sedm krátkosrstých, sedm chytrých a jedna chytřejší.</p>
<h2>Jsou to:</h2>
<ul>
<li>Bětuš</li>
<li>Čert</li>
<li>Deli</li>
<li>John</li>
<li>Maruš</li>
<li>Max</li>
<li>Toníček</li>
<li>Vendul</li>
</ul>
</div>
Podívejme se, jak tento příklad vypadá, dokud nemá nic ve stylu, tj. bez formátování. Mimochodem, nečekejte žádný krásný výsledek - používám takové vlastnosti, aby jejich použití bylo nepřehlédnutelné, a nesnažím se vytvořit moderní vzhled a design webu ;-)
Už nebudu každý krok podrobně rozepisovat. Uvidíte vždycky kousek stylu, který jsem přidala, a pak se můžete podívat na postupný výsledek. Atributy mají link na JPW, kde najdete jejich podrobný popis.
Základní zformátování
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background-color: #E6E6FA;
padding: 20px;
}
h1 {
background-color: #8B4513;
color: white;
padding: 2px 5px;
border: 2px solid #F0E68C;
text-align: right;
font-style: italic;
}
p, ul, h2 {
color: #00008B;
}
A jdeme na spany
span.vyrazny {
font-weight: bold;
color: #A52A2A;
font-variant: small-caps;
}
span.vysvetlivka {
cursor: help;
border-bottom: 1px dashed #00008B;
}
Zastavíme se u spanu s třídou "vysvetlivka" - to je taková užitečná vychytávka. Do HTML jsem musela oproti příkladu nahoře ještě k tomuto spanu také atribut title. Když teď v příkladu najedete na slovo označené tímto spanem myší, kurzor se změní na otazník (to je vlastností cursor s hodnotou help) a v "bublině" se objeví ten text, který jsem zadala do title v HTML: <span class="vysvetlivka" title="text popisku">.
Zformátujeme DIV
div.priklad {
padding: 10px 100px 10px 10px;
background: url(back3.jpg) top right repeat-y;
background-color: #FDF5E6;
}
