V tejto casti zacneme tak ako minule. Preberieme si CSS a potom to vsetko dosadime do XHTML layoutu, ktory sa snazime vyrobit. Ako prve co zacneme preberat budu farby odkazov, ktore budu ladit s farbami stranky. Dosiahneme tym nielen lepsi efekt designu ale aj si usetrime mnoho kodu. Zacnem odkazmi: a:link {color: #0000FF} a:visited {color: #00FF00} a:hover {color: #FF0000} a:active {color: #FF00FF} Idem pekne od vrchu. A:link sluzi ako zakladna forma odkazu, ktoru ideme definovat. Je to bezna nenavstivena linka. A:visited je prakticky to iste ako a:link, len s tym rozdielom, ze tato linka uz bola navstivena. A:hover sluzi ako prechod mysi cez odkaz. Odporucam zvolit vzdy inu farbu pre tuto definiciu. A:active je linka, na ktorej sa prave nachadzate cize ju mate aktivnu. Vsetky tieto zapisy su urcene pre CSS verziu 1. Urcite sa stretnete aj s tym, ze budete mat farby odkazov definovane na cervenu farbu a niekde budete mat cervene pozadie. Potom musite uz len urobit novy zapis do CSS a to nasledovne. a.odkaz:link { color: #0000FF } a.odkaz:visited { color: #0000FF } a.odkaz:hover { color: #0000FF } a.odkaz:active { color: #0000FF } Definovali sme si farby odkazov do CSS pre triedu "odkaz". To znamena, ze do stranky to dostaneme nasledovne: <a href="odkaz.html" class="odkaz">Toto je odkaz</a> Vsetky farby odkazov takto mozete menit lubovolne, podla vasich predstav, pretoze a.odkaz:link nema absolutne nic s a:link. A:link je vzdy definovane pre celu stranku pricom a.odkaz:link, je definovany len pre jednu triedu a tou je trieda "odkaz". Teraz je cas sa dostat k odkazom do nasho layoutu. Pridame do neho nasledovny zapis (style.css): a:link { color: #0000FF; text-decoration: none; } a:visited { color: #0000FF; text-decoration: none; } a:hover { color: #0000FF; text-decoration: underline; } a:active { color: #0000FF; text-decoration: none; } a.copy:link { color: #FFF; text-decoration: none; } a.copy:visited { color: #FFF; text-decoration: none; } a.copy:hover { color: #FF8; text-decoration: underline; } a.copy:active { color: #FFF; text-decoration: none; } Vsetky zapisy uz poznate, pretoze boli vysvetlene ale pribudlo nam do kazdeho este maly zapis a tym je text-decoration. Uz z nazvu vyplyva, ze je to isty styl textu. V nasom pripade budu odkazy bez tychto stylov(none) ale je tu jeden zapis do ktoreho sme pridali definiciu text-decoration: underline. Je to podciarknutie textu. Existuju zapisy none(ziadny), underline(podciarknuty), overline(nadciarknuty), line-through(preciarknuty) a blink(blikajuci). Blink nepodporuje Internet Explorer ale toto nieje serial len o CSS a tak prejdime do nasho XHTML layoutu. Mali ste este moznost vidiet aj ako zapisujeme odkaz pre a.copy:link... atd. Nazval som ho copy lebo bude umiestneny dole kde je aj copyright stranky. Stranka tam ma modre pozadie a preto tam nemozeme mat modry odkaz. Ako uz bolo povedane a napisane, tak sme si skopirovali kod(nad nami) do suboru style.css. Nasa CSS kaskadova sablona bude teraz vyzerat nasledovne: body { font-family: verdana, sans-serif; font-size: 80%; font-weight: normal; color: #000; text-align: left; background: #fff; } a:link { color: #0000FF; text-decoration: none; } a:visited { color: #0000FF; text-decoration: none; } a:hover { color: #0000FF; text-decoration: underline; } a:active { color: #0000FF; text-decoration: none; } a.copy:link { color: #FFF; text-decoration: none; } a.copy:visited { color: #FFF; text-decoration: none; } a.copy:hover { color: #FF8; text-decoration: underline; } a.copy:active { color: #FFF; text-decoration: none; } #main { width: 770px; margin: 0 auto; text-align: left; border: 1px solid #000; } #logo { height: 100px; border-bottom: 1px solid #000; background: #526F91; } #obsah { width: 79%; border-left: 1px solid #000; padding: 3px; float: right; } #navigacia { width: 20%; float: left; } #spodok { height: 30px; border-top: 1px solid #000; text-align: center; color: #fff; background: #526F91; clear: both; } ul { margin-top: 2px; margin-left: 20px; padding: 0px; } Co sme pridali sami vidite a teraz si to mozeme pridat do layoutu. Zdrojovy kod, ktory ideme pridavat alebo skor upravovat(nahradime doterajsou navigaciou) bude vyzerat nasledovne: <li><a href="index.html">Domov</a></li> <li><a href="index.html">Sluzby</a></li> <li><a href="index.html">Referencie</a></li> <li><a href="index.html">Kontakt</a></li> Dalej pridame este tento zapis, ktory bude sluzit ako odkaz, ktory bude umiestneny na spodku stranky. Bude to odkaz na text "PaBi3".V tomto priklade samozrejme :-) Vyhladame spodok stranky a upravime ho pridanim odkazu. <div id="spodok"> © <a href="mailto:pabi3@pabi3.com" class="copy">PaBi3.com</a>. Vsetky prava vyhradene.<br /> XHTML a CSS validne stranky. </div> Nas zdrojovy kod stranky bude vyzerat nasledovne: <?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 http-equiv="imagetoolbar" content="no" /> <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." /> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> <title>Nadpis stranky v XHTML</title> </head> <body> <div id="main"> <div id="logo"> </div> <div id="obsah"> <h1>Nadpis stranky</h1> <br />Obsah stranky.<br /> Tato stranky je generovana pomocou kaskadovych sablon CSS a pomocou dokumentov XHTML.<br /> Toto je priklad XHTML stranky urobenej na servery www.pabi3.com </div> <div id="navigacia"> <ul> <li><a href="index.html">Domov</a></li> <li><a href="index.html">Sluzby</a></li> <li><a href="index.html">Referencie</a></li> <li><a href="index.html">Kontakt</a></li> </ul> </div> <div id="spodok"> © <a href="mailto:pabi3@pabi3.com" class="copy">PaBi3.com</a>. Vsetky prava vyhradene.<br /> XHTML a CSS validne stranky. </div> </div> </body> </html> Vsetko co ste sa dnes naucili je iba farba odkazov. Sice malickost ale velmi dolezita. Teraz si vyskusajte farby odkazov v menu a potom aj na spodku stranky a zistite, ze to funguje. Hotovy priklad tu V dalsej casti sa dozviete nieco viac o slubovanom XHTML, pretoze teraz sme boli zamerany skor na CSS.

XHTML a CSS, 4.diel Návrat

XHTML a CSS, 4.diel

Speak introduction
Speak full