CSS štýly – úvod

Mimochodom, čo je CSS?
CSS vzniklo niekedy okolo roku 1997. Je to kolekcia metód pre grafickú úpravu webových stránok. Tá skratka znamená Cascading Style Sheets, slovensky “kaskádové štýly”. Kaskádové, pretože sa na seba môžu vrstviť definície štýlu, ale platí len tá posledná. To teraz nie je dôležité.

Už je na svete návrh CSS 2, vylepšené a zložitejšie formy štýlov, ktoré ale v najrozšírenejším prehliadači Internet Exploreru moc nefungujú.

Zariadenie bez podpory CSS
CSS nepodporujú niektoré obskurní zariadení. Aj v nich ale ide text prečítať. CSS nepodporujú veľmi staré prehliadača (Explorer 2 a Navigator 3), ktoré sa však už nikde nevyskytujú, niektoré staré mobilné telefóny a textové prehliadače (lynx, links). V takých sa text nesformátuje, ale zostáva čitateľný.

Kedy používať CSS
V roku 2015 sa dá povedať, že už sa celý web formátuje pomocou CSS. Zo starého HTML formátovanie zostalo tak maximálne stukovatenie a kurzíva. Preto je dobré sa v CSS orientovať, ak chcete robiť webové stránky. V prvom rade je ale potrebné vedieť, ako funguje HTML. Pokiaľ HTML ani trochu nepoznáte, nie je dobré začínať s CSS. Kedy sa oplatí CSS študovať:

chcete mať stránky pekne a moderne sformátované. Farby, zarovnanie, rozvrzene stĺpce atď.
často píšete texty určené pre Internet a nechcete strácať čas zložitým formátovaním,
zaoberáte sa skriptovaním, najmä javascript
spravujete (či zatiaľ len plánujete) väčšej web s mnohými stránkami, ktoré by mali vyzerať podobne,
alebo jednoducho nechcete byť mimo misu, keď sa hovorí o formátovaní stránok.
Inak sa asi podrobné štúdium CSS nevyplatí.

Náčrt možností CSS
Naozaj len náčrt. (Kdyžtak viďte kompletný prehľad.) Tak čo treba CSS dovedú:

Nastaviť ľubovoľnú a presnú veľkosť písma, prekladanie, kapitálky
Urobiť odsadenie prvého riadku odseku, zväčšiť riadkovanie
Zrušiť alebo zväčšiť prázdny priestor po odseku
Automaticky formátovať nadpisy (napríklad ich všetky urobiť zelené)
Zvýrazňovať odkazy po prejdení myšou
Urobiť automaticky grafické odrážky
Určité časti textu zneviditeľniť, spriehľadniť alebo nezobraziť
Predefinovať grafický význam bežných tagov (napríklad všetko, čo je kurzívou, urobiť i tučne)
Nastaviť pozadie čohokoľvek, stránky, tabuľky ale napríklad aj odseku; pozadie sa nemusí opakovať a môže mať presnú pozíciu!
Umiestniť nejaký objekt (napríklad kus textu) kamkoľvek do stránky, môže sa to aj prekrývať
Pridať k čomukoľvek rolovacie lišty, orezať to, orámovať, nastaviť okraje
V kombinácii so skriptami je dnes CSS najmocnejšia zbraň pre “rozhýbanie” stránok.
Hlavný význam CSS spočíva v tom, že fungujú veľa automaticky, přečemž sa vzhľad celého webu deklaruje jedným súborom.
Ako prichádzajú nové prehliadača, dá sa robiť ešte veľa úžasnejšie vecí.

Trojitá použitia CSS
Štýl sa môže nadeklarovat tromi spôsobmi, nižšie uvádzam príklady. Stačí, keď sa pre začiatok naučíte naučíte jeden z troch spôsobov:

Priamo v texte zdroja u formátovaného elementu pomocou atribútu style = “…”. Tomu hovorím priamy štýl. Je to nešikovné, ale občas sa to používa.
Pomocou “štýlopise” (angl. “Stylesheet”) v hlavičke stránky. Štýlopis je akýsi zoznam štýlov. Je v ňom všeobecne napísané, čo má byť ako naformátované, napríklad že nadpisy majú byť zelené. Do stránky sa štýlopis píše medzi tagy <style> a </ style>.
Použitím externého štýlopise – to je súbor * .css, na ktorý sa stránka odkazuje tagom <link>. V súbore je umiestnený štýlopis. Hlavná výhoda je v tom, že na jeden taký súbor sa dá nalinkovať mnoho stránok, takže potom všetky vyzerajú podobne.
Samozrejme stačí ovládnuť len jeden spôsob. Ja najčastejšie používam externý css súbor.

Príklady
Chcem urobiť odstavec červeným písmom pomocou CSS. Ako som už opísal, ide to tromi spôsobmi:

priamy zápis
Do zdroja sa napíše táto deklarácia odseky:

<P style = “color: red”> Tento odsek bude červený. </ P>

Vysvetlenie: <p> je značka vymedzujúca odstavec; z anglického paragraph. Atribút “style” je všeobecný atribút použiteľný pri každom prvku. Color znamená farba a red je červená.

štýlopise
Do hlavičky dokumentu sa napíše štýlopis uzavretý medzi tagy <style> </ style>:

<Style>
p {color: red}
</ Style>

a do tela stránky sa môžu písať odseky:

<P> Tento odsek bude červený. </ P>
<P> Tento mimochodom taktiež, pretože červené budú všetky. </ P>

To, ako zariadiť, aby neboli červené všetky, ale len niektoré odseky, sa dá pomocou “tried” a “identifikátorov”, o tom neskôr.

Externým CSS súborom
Vytvorí sa súbor, ktorý sa nazve napr styly.css. V ňom bude iba tento text:

p {color: red}

Do hlavičky html dokumentu, ktorý chcem štýlom ovplyvniť, musím napísať odkaz na tento súbor:

<Link rel = “stylesheet” type = “text / css” href = “styly.css”>

V tele dokumentu potom budú opäť všetky odseky červené. K dispozícii je aj podrobnejší príklad.

Syntax
CSS nie sú súčasťou HTML, a tak sa zapisujú celkom iným spôsobom, ako už ste si možno všimli. Ak vám tabuľka príde príliš teoretická, všimnite si iba príkladov v spodnej časti.

Priamy štýl: <tag style = “zápis vlastností”> Štýlovanie element </ tag>
Vo štýlopise: <style>
tag {zápis vla

miestnos}
2.tag {zápis vlastností}
</ Style>
Zápis vlastností zjednodušene: vlastnosť: hodnota; 2.vlastnost: 2.hodnota
Zápis vlastností všeobecne: vlastnosť: hodnota [, hodnota2] [; ďalší zápis vlastností]
Príklady:
Príklad priameho štýlu <p style = “color: red;”> text červeného odseku </ p>
Príklad štýlopise <style>
p {color: red}
body {background-color: yellow;}
</ Style>
Príklad jednoduchého zápisu vlastností color: red
a zložitejšieho zápisu vlastností font-family: Arial, Arial CE, sans-serif; color: red;
Je nutné všimnúť si, kde sa používajú úvodzovky, dvojbodky, zložené zátvorky, bodkočiarky a čiarky. Ak si niektoré znamienko popletiete, nebude to pravdepodobne fungovať. Príklad správneho zápisu:

h2 {color: green; background-color: yellow}

Medzery a konce riadkov príliš veľkú rolu nehrajú, môžu sa pridávať a vypúšťať. Veľkosť písmen nehrá rolu. K dispozícii je zoznam vlastností a ich hodnôt.

Hodnoty, ktoré prehliadač nepozná, ignoruje.

Komentáre vo štýlopise sa robia podobne ako v Jave medzi znaky / * a * /. Dve lomítka nefungujú.

zdroj:jakpsatweb.cz

preklad: Odin