Využití CSS v XHTML

Tvorba vlastních stylů, umístění prvků

Nyní si ukážeme, jak vytvořit vlastní styly bez toho, abychom je už při jejich definování museli přiřazovali již existujícím XHTML prvkům. Tuto znalost dále využijeme při umisťování prvků na libovolnou pozici na stránce.

Tvorba vlastních stylů

Doteď jsme se naučili, jak různým prvkům na stránce přiřadit námi nadefinovaný vzhled. Co však dělat, když máme na stránce dva stejné prvky a každému z nich chceme nadefinovat jiný design? Naštěstí v CSS nejsme odkázáni jen na úpravu již definovaných XHTML prvků jako je např. odstavec, obrázek či tabulka. CSS nám totiž umožňuje vytvářet i styly vlastní. Stačí si vymyslet název stylu a před jeho jméno připsat tečku. Např.:

.muj_styl {background-color: yellow;

color: red;

font-style: italic

}

Na takto definovaný styl se pak odkážeme pomocí obecného XHTML atributu class, jehož hodnotou bude jméno stylu bez tečky. Např.:

Odstavec převezme předdefinovaný styl.

</p>

Stejného výsledku bychom mohli dosáhnout i použitím obecného atributu id místo class (jen místo tečky by musel být v definici stylu před jménem stylu křížek #), ale s atributem style si vystačíme.

Vytváření vlastních stylů nám dává mnohem větší volnost a více možností při práci se stránkou. Atribut class se v praxi hojně přiřazuje především XHTML prvkům span a div.

Ukázka vytvoření a použití vlastních stylů v XHTML dokumentu je uvedena v příkladu . Zkuste v příkladu měnit hodnoty různých atributů a sledujte, jak se změní náhled příkladu.

Umístění prvků

Než opustíme CSS, je dobré seznámit se ještě se třemi důležitými atributy: position, top a left. Tyto atributy dohromady určují umístění prvku na stránce. První atribut určuje, zda je pozice prvku absolutní (prvek je pevně umístěn na určité souřadnice), či relativní (prvek je posunut vzhledem ke své normální pozici).

Atribut position

Z anglického position neboli pozice.
V kombinaci s dalšími atributy definuje umístění prvku na stránce.
Existují tři možné hodnoty tohoto CSS atributu: absolute (prvek bude pomocí atributů top a left umístěn na dané souřadnice), relative (prvek bude pomocí atributů top a left posunut ze své normální pozice), static (prvek má svou normální pozici).

Atribut top

Z anglického top neboli horní místo, vrchol.
V případě relativní pozice tento atribut definuje, o kolik se prvek posune seshora dolů ze své normální pozice. Nahoru se posunuje zápornou hodnotou.
V případě absolutní pozice se s prvkem jedná, jako kdyby jeho normální pozice byla u samého stropu stránky. Tento atribut pak definuje, o kolik se prvek posune dolů z této pozice (např. 0px znamená, že prvek bude na úplném stropu stránky a s přibývajícími pixely se bude sunout níže).

Atribut left

Z anglického left neboli levá strana.
V případě relativní pozice definuje, o kolik se prvek posune doprava ze své normální pozice. Doleva se posunuje zápornou hodnotou.
V případě absolutní pozice se s prvkem jedná, jako kdyby jeho normální pozice byla na samém levém kraji stránky. Tento atribut pak definuje, o kolik se prvek posune doprava z této pozice (např. 0px znamená, že prvek bude na stránce umístěn zcela vlevo a s přibývajícími pixely se bude sunout doprava).

Nejčastěji se jako hodnoty atributů top a left uvádí číselné vyjádření pozice v pixelech. Např.:

position: absolute; top: 30px; left: 50px

Ukázka relativně umístěného textu je uvedena v příkladu . Ukázka absolutně umístěného textu je uvedena v příkladu . Zkuste v příkladech nadefinovat jednotlivým stylům jinou pozici a sledujte, jak se změní náhledy příkladů.

CSS se stejně jako ostatní technologie a jazyky neustále vyvíjí, zásoba jeho atributů se rozšiřuje a stejně tak jeho podpora ze stran prohlížečů neustále roste. Není třeba pamatovat si všechna jména atributů a jejich možných hodnot. Je však dobré umět dané informace v potřebný čas vyhledat a využít. Existuje mnoho stránek zabývajících se podrobnějším výkladem CSS. Patří mezi ně i tyto dvě:

http://www.jakpsatweb.cz/css
http://tvorba-webu.zdarek.com/css