CSS - písma, pseudotriedy a pozadia, 4.diel

Formátovanie písma, pseudotriedy a pozadia - všetko pomocou technológie CSS čo sa môžete naučiť alebo preopakovať v tomto článku.

Medzi základné selektory v CSS patrí hlavné definícia písma, pseudotriedy a pozadia. V minulých dieloch ste možno takéto definície videli ale, ak ste úplný začiatočník neverím, že ste vedeli o čo sa jedná. A teraz k veci. Začnem po poradí ako som selektory vymenoval:

Definícia písma

Definícia písma alebo definícia fontov. Pre túto definíciu budeme používať selektor font-family. Zápis je možní do tried aj do identifikátorov, tak ako je to u každého selektoru v CSS. Syntax selektoru je font-family, tak nebudem nič zložité vypisovať. Prejdime k jej deklarácií. Určite poznáte základné písma, ktoré obsahuje váš OS. Základné písma pod Windows môžu byť arial alebo verdana. Pod Linuxom to môže byť zasa inak. S font-family deklaráciami ste sa mali možnosť zoznámiť v 2.diele ale opakovanie nezaškodí. Zápis písma bude vyzerať nasledovne:

font-family: verdana, arial;

Po načítaní CSS prehliadač ihneď použije písmo verdana. Ak by ho však nenašiel musel by prejsť na písmo arial. A však existuje tu ešte jedna skupina písiem, ktoré sú zabudované v každom OS a dnes už aj v niektorých prehliadačoch. Ide o písma generické. Sú to písma:

serif - patkové písmo

sans-serif - bezpatkové písmo

cursive - kurzivé

fantasy - ozdobné

monospace - neproporcionálne písmo

Tieto písma by sa mali uvádzať vždy na koniec deklarácie. Čiže správny zápis bude napr. takto:

font-family: verdana, arial, sans-serif;

Nikdy nezabúdajte zadávať generické písma na koniec deklarácie!

Pseudotriedy

Hypertextové odkazy môžu obsahovať pseudotriedy. Tie sa nedefinujú v (X)HTML kóde. Iba v CSS. Môžu byť kombinované s triedami. Oddeľujeme ich dvojbodkou. V CSS1 sme mali možnosť sa zoznámiť s pseudotriedami:

active - označuje miesto kde sa nachádzate

hover - označuje miesto cez, ktoré prechádzate myšou

link - označuje miesto odkazu

visited - označuje miesto ktoré ste už navštívili

first-line - zmení štýl prvého riadku

first-letter - zmení štýl prvého písma

Prvé štyri sa používajú najmä pre odkazy. Zápis pseudotriedy sme teoreticky prešli a teraz náš čaká už len prax.

a:link { color: blue; }

a:visited { color: black; }

a:hover { color: red; }

a:active { color: green; }

Pseudotriedy sa definovali k selektorom pre odkaz a - tag <a>. Vyskúšajte si sami ako bude vyzerať tento zápis. Všetky odkazy sa budú chovať podľa vyššie uvedeného popisu pri pseudotriedach, avšak pozor - dodržujte uvedené poradie. First-line a first-letter máte dobre opísané tiež a ďalej nemusím rozvádzať ich funkcie.

Pozadia

K pozadiam v CSS asi toľko, že je tu pár možností ako ich umiestniť. Farby sme si už prebrali v 2.dieli a tak si môžeme teraz ukázať ako určíme pozadie. Použijeme selektor background-color.

background-color: #000000;

Dostaneme čierne pozadie. Nič zložité a nič viac k tomu. Je tu ešte aj možnosť nastavenie obrázku ako pozadia. K tomu budeme využívať selektor background-image.

background-image: url('images/obrazok.jpg');

URL nastavuje cestu k obrázku. Pre background-image môžeme obmedziť jeho opakovanie. Obmedzenie opakovania je nasledovné.

background-image: url('images/obrazok.jpg') no-repeat;

Obmedzenie bolo myslené tak, aby sa obrázok neopakoval ani raz. Takže obrázok sa načíta iba jeden krát bez akéhokoľvek opakovania. Máme tu ale aj iné možnosti a to obrázok opakovať len vertikálne alebo horizontálne. Na to nám slúži repeat-x a repeat-y.

background-image: url('images/obrazok.jpg') repeat-x;

Opakovanie obrázku bude horizontálne.

background-image: url('images/obrazok.jpg') repeat-y;

Takto bude vertikálne.

Je tu ďalej možnosť obrázok zarovnávať. Selektor background-position. Jeho možné deklarácie sú top, left, right a bottom. Je to umiestňovanie pozadia. Ako posledná možnosť je ešte pozadie nechať na mieste resp. ho umiestniť na stránku ako nehybné. Dajú sa s tým dosiahnuť celkom pekné efekty ale veľmi sa to nepoužíva - ale predsa. Selektor background-attachment nám umožní pozadie "zaraziť" na stránku. Budeme musieť použiť atribút deklarácie fixed alebo scroll. Scroll pozadie sa pohybuje pri scrollovaní stránky a fixed je nehybné. Proste je stojace.

background-attachment: url('images/obrazok.jpg') fixed;

Pre efekt je lepšie použiť fixed. Všetko čo sme teraz používali ako selektory background-color, background-image a background-attachment. Na všetko môžeme použiť aj prostý selektor background. Napríklad:

background: #efefef url('images/obrazok.jpg') fixed no-repeat;

A máte to všetko v jednom :-)). Je to prakticky skrátenie selektoru.

To by bolo na dnes všetko a v nasledujúcom článku pokračujeme znova - o základných selektoroch - ale už o tých, ktoré využijeme pre štruktúru stránky.

Alternatívne verzie: