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;
}

výsledek je zde

A jdeme na spany

span.vyrazny {
  font-weight: bold;
  color: #A52A2A;
  font-variant: small-caps;
}
span.vysvetlivka {
  cursor: help;
  border-bottom: 1px dashed #00008B;
}

výsledek je zde

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;
}

výsledek je zde


vše o MHD nejen v Pardubicích, především o trolejbusech
píše -dis- bb(zavináč)choltice.eu