XHTML a CSS, 4.diel

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}

Idem pekne od vrchu. A:link slúži ako základná forma odkazu, ktorú ideme definovať. Je to bežná nenavštívená linka. A:visited je prakticky to isté ako a:link, len s tým rozdielom, že táto linka už bola navštívená. A:hover slúži ako prechod myši cez odkaz. Odporúčam zvoliť vždy inú farbu pre túto definíciu. A:active je linka, na ktorej sa práve nachádzate čiže ju máte aktívnu. Všetky tieto zápisy sú určené pre CSS verziu 1.
Určite sa stretnete aj s tým, že budete mať farby odkazov definované na červenú farbu a niekde budete mať červené pozadie. Potom musíte už len urobiť nový zápis 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 znamená, že do stránky to dostaneme nasledovne:

<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">

&copy; <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">

&copy; <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>

Všetko čo ste sa dnes naučili je iba farba odkazov. Síce maličkosť ale veľmi dôležitá. Teraz si vyskúšajte farby odkazov v menu a potom aj na spodku stránky a zistíte, že to funguje.
Hotový príklad tu

V ďalšej časti sa dozviete niečo viac o sľubovanom XHTML, pretože teraz sme boli zameraný skôr na CSS.

Alternatívne verzie:

Autor: PaBi3 · Kategória: Webdesign · Dátum: 30.04.2005 21:07