Práca s farbami odkazov a stále trochu viac zameraná časť na CSS vám prináša kompletný návod na úpravu layoutu a jeho kompletný rozvoj. V tomto diele si pozrieme aj náš vytvorený layout aby ste si nemuseli stále kopírovať zdrojový kód ale aby ste hneď videli ako to vyzerá.
V tejto časti začneme tak ako minule. Preberieme si CSS a potom to všetko dosadíme do XHTML layoutu, ktorý sa snažíme vyrobiť. Ako prvé čo začneme
preberať budú farby odkazov, ktoré budú ladiť s farbami stránky. Dosiahneme tým nielen lepší efekt designu ale aj si ušetríme mnoho kódu.
Začnem odkazmi:
a:link {color: #0000FF}
a:visited {color: #00FF00}
a:hover {color: #FF0000}
a:active {color: #FF00FF}
a.odkaz:link { color: #0000FF }
a.odkaz:visited { color: #0000FF }
a.odkaz:hover { color: #0000FF }
a.odkaz:active { color: #0000FF }
<a href="odkaz.html" class="odkaz">Toto je odkaz</a>
Všetky farby odkazov takto môžete meniť ľubovolne, podľa vašich predstáv, pretože a.odkaz:link nemá absolútne nič s a:link. A:link je vždy definované pre celú stránku pričom a.odkaz:link, je definovaný len pre jednu triedu a tou je trieda "odkaz".
Teraz je čas sa dostať k odkazom do nášho layoutu. Pridáme do neho nasledovný zápis (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; }
Všetky zápisy už poznáte, pretože boli vysvetlené ale pribudlo nám do každého ešte malý zápis a tým je text-decoration. Už z názvu vyplýva, že je to istý štýl textu. V našom prípade budú odkazy bez týchto štýlov(none) ale je tu jeden zápis do ktorého sme pridali definíciu text-decoration: underline. Je to podčiarknutie textu. Existujú zápisy none(žiadny), underline(podčiarknutý), overline(nadčiarknutý), line-through(prečiarknutý) a blink(blikajúci). Blink nepodporuje Internet Explorer ale toto nieje seriál len o CSS a tak prejdime do nášho XHTML layoutu. Mali ste ešte možnosť vidieť aj ako zapisujeme odkaz pre a.copy:link... atď. Nazval som ho copy lebo bude umiestnený dole kde je aj copyright stránky. Stránka tam má modré pozadie a preto tam nemôžeme mať modrý odkaz.
Ako už bolo povedané a napísané, tak sme si skopírovali kód(nad nami) do súboru style.css. Naša CSS kaskádová šablóna bude teraz vyzerať 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;
}
Čo sme pridali sami vidíte a teraz si to môžeme pridať do layoutu. Zdrojový kód, ktorý ideme pridávať alebo skôr upravovať(nahradíme doterajšou navigáciou) bude vyzerať nasledovne:
<li><a href="index.html">Domov</a></li> <li><a href="index.html">Služby</a></li> <li><a href="index.html">Referencie</a></li> <li><a href="index.html">Kontakt</a></li>
Ďalej pridáme ešte tento zápis, ktorý bude slúžiť ako odkaz, ktorý bude umiestnený na spodku stránky. Bude to odkaz na text "PaBi3".V tomto príklade samozrejme :-) Vyhľadáme spodok stránky a upravíme ho pridaním odkazu.
<div id="spodok"> © <a href="mailto:pabi3@pabi3.com" class="copy">PaBi3.com</a>. Všetky práva vyhradené.<br /> XHTML a CSS validné stránky. </div>
Náš zdrojový kód stránky bude vyzerať 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 stránka 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 stránky</h1> <br />Obsah stránky.<br /> Táto stránky je generovaná pomocou kaskádových šablón CSS a pomocou dokumentov XHTML.<br /> Toto je príklad XHTML stránky urobenej na servery www.pabi3.com </div> <div id="navigacia"> <ul> <li><a href="index.html">Domov</a></li> <li><a href="index.html">Služby</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>. Všetky práva vyhradené.<br /> XHTML a CSS validné stránky. </div> </div> </body> </html>