Kaskadove styly, sablony stylov alebo Cascading Style Sheets. Siroke moznosti a vysoky vykon mozeme dosiahnut v dnesnej dobe aj s XHTML a CSS. CSS vyslo uz v 3 verziach - CSS1, CSS2 a CSS3, ktore ale nieje podporavene prehliadacmi na 100% a je este stale vo faze vyvoja. V tejto poradi druhej casti sa zameriame hlavne na CSS a jeho vyuzitie. CSS vzniklo v roku 1996. V minulosti prehliadace podporovali scasti len svoje vlastne tagy a to videlo k tomu, ze stranky boli pre mnoho uzivatelov nepouzitelne v inych prehliadacoch resp. stranka vyzerala inak v inom prehliadaci. Mohli mat aj vela chyb a nedostatkov. Organizacia World Wide Web Consortium(W3C) sa rozhodla tento globalny problem riesit a tak navrhla a nasledne vydala CSS styly. Odvtedy sa CSS uchytilo a stalo sa znamejsim ako kedykolvek predtym a tak sa rozvija. Kazda dobra firma, ktora robi webdesign by tieto technologie uz mala vyuzivat i ked si niekto povie, ze zakaznik vacsinou o webe nevie nic ked si da robit design. To by bola aj pravda ale v dnesnej dobe som sa stretnete s vela ludmi, ktori odsudzuju tabulky a su zavisli na CSS :-). Opakujem vetu s minulej casti tohto serialu: "Preco sa vracat do minulosti?". Este snad trochu teorie ale konecne uz pouziteznej v praxi: CSS dokaze mnoho a nieje to mozne zapisat ani do 10 clankov ale par prikladov pouzitia by som uviest mohol. Blizsie informacie o CSS hladajte v rubrike CSS. body { background: #000000; font-family: verdana, sans-serif; font-size: 80%; color: #fff; text-align: center; } Ako vidite mame tu hned zaklad samotneho CSS stylu. Styly CSS maju priponu ".css" a mozete ich nazvat akokolvek len si k nim nezabudnite zadat cestu. Zadanie cesty CSS stylov ste mali moznost sa naucit s minuleho dielu. Teraz k popisu. Background nam urcuje farebne pozadie stranky. V tomto pripade je to cierne pozadie. Font-family je na urcenie typu pisma. Font-size sluzi na velkost pisma a color na farbu pisma. Text-align nam pochopitelne text zarovnava - v tomto pripade do lava, Zaklad CSS ani nieje ho ovladat ako vediet vyuzit. Zapis zostal podobny HTML ale i ked CSS2 a CSS3(vo vystabe) sa snazia podporovat vsetky prehliadace, tak tento standard sa tiez nedodrziava kompletne. Teraz si vytvorime taky mensi blok do ktoreho bude zaradena navigacia a nasledovne vedla neho bude umiesteny aj obsah. /* toto je komentar k "style.css" */#obsah { width: 570px; margin: 0 auto; text-align: left; border: 1px solid #fff; float: left; } #navigacia { width: 200px; margin: 0 auto; text-align: left; border: 1px solid #fff; float: right; } Este by som doplnil predtym nez zacnem vysvetlovat, ze farby sa mozu zapisovat aj v skratenom tvare ako je napr. cierna #000000 - cely tvar, a #000 - skrateny tvar. Farby je mozne zapisat este v tvare rgb(0,0,0). Ak ovladate HTML co je hlavna priorita pre vyuku XHTML a CSS a samozrejme aj pre tento clanok, tak urcite suhlasite, ze "zaklad" CSS je lahsie ako samotne HTML. Sami vidite, ze zapisy do CSS ako napr. width, border... su velmi jednoduche a obsahuje ich aj klasicke HTML. Zapis margin bude asi trochu menej znami. Sluzi na odpocitanie vzdialenosti od okraja. Margin sa da zapisovat aj v tvare margin-top, margin-left a pod. Float nam zatahuje nas <div> na okraj tam kam ho nasmerujeme. Je to obdoba align. V tomto priklade je obsah bloku vlavo a v nom je vlozeny(v obsahu) dalsi <div> a to #navigacia. Prehlad kodu, ktory sme zapisali bude nasledovny: <?xml version="1.0" encoding="ISO-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" /> <meta name="robots" content="follow, all" /> <meta name="author" content="www.PaBi3.com" /> <meta name="Keywords" content="XHTML, CSS, PaBi3" /> <meta name="description" content="Toto je stranka v XHTML, ktora vyuziva kaskadove sablony CSS." /> <meta http-equiv="imagetoolbar" content="no" /> <link rel="stylesheet" href="style.css" media="all" /> <title>Nadpis stranky v XHTML.</title> </head> <body> <div id="obsah"> <div id="navigacia"> <ul> <li>Domov</li> <li>Sluzby</li> <li>Referencie</li> <li>Kontakt</li> </ul> </div> </div> </body> </html> Obsah sme zasadili ako hlavny <div>, ktory bude tvorit jadro stranky. Jadro, ktore bude drzat celu stranku pokope. Do tohto jadra(<div id="obsah">) sme vlozili dalsi <div>, ktory sluzi ako navigacny blok stranky. Stranku sme ukoncili tagmy </body> a </html>. Tymto je stranka hotova a zakladny uvod do CSS splneny. Ostatne CSS moznosti opisem v dalsich castiach a ak sa chcete o CSS viac naucit odporucam znova rubriku CSS. V dalsom diele si povieme nieco o CSS a skusime si XHTML a CSS v praxi.

XHTML a CSS, 2.diel Návrat

XHTML a CSS, 2.diel

Speak introduction
Speak full