XHTML a CSS, 2.diel

V poradí druhá časť seriálu XHTML a CSS vás privedie k základným informáciám o
CSS a ukáže vám menší príklad ako ho využiť v splupráci s XHTML. Príklad v článku je pokračovanie
zdrojového kódu xhtml dokumentu z minulej časti seriálu. Táto časť sa sústreďuje skôr na CSS ako na XHTML.

Kaskádové štýly, šablóny štýlov alebo Cascading Style Sheets. Široké možnosti a vysoký výkon môžeme dosiahnuť v dnešnej dobe aj s XHTML a CSS. CSS vyšlo už v 3 verziách - CSS1, CSS2 a CSS3, ktoré ale nieje podporavené prehliadačmi na 100% a je ešte stále vo fáze vývoja. V tejto poradí druhej časti sa zameriame hlavne na CSS a jeho využitie. CSS vzniklo v roku 1996. V minulosti prehliadače podporovali sčasti len svoje vlastné tagy a to videlo k tomu, že stránky boli pre mnoho užívateľov nepoužiteľné v iných prehliadačoch resp. stránka vyzerala inak v inom prehliadači. Mohli mať aj veľa chýb a nedostatkov. Organizácia World Wide Web Consortium(W3C) sa rozhodla tento globálny problém riešiť a tak navrhla a následne vydala CSS štýly. Odvtedy sa CSS uchytilo a stalo sa známejším ako kedykoľvek predtým a tak sa rozvíja. Každá dobrá firma, ktorá robí webdesign by tieto technológie už mala využívať i keď si niekto povie, že zákazník väčšinou o webe nevie nič keď si dá robiť design. To by bola aj pravda ale v dnešnej dobe som sa stretnete s veľa ľuďmi, ktorí odsudzujú tabuľky a sú závislí na CSS :-). Opakujem vetu s minulej časti tohto seriálu: "Prečo sa vracať do minulosti?".

Ešte snáď trochu teórie ale konečne už použitežnej v praxi:

CSS dokáže mnoho a nieje to možné zapísať ani do 10 článkov ale pár príkladov použitia by som uviesť mohol. Bližšie informácie o CSS hľadajte v rubrike CSS.

body {

background: #000000;

font-family: verdana, sans-serif;

font-size: 80%;

color: #fff;

text-align: center; 

}

Ako vidíte máme tu hneď základ samotného CSS štýlu. Štýly CSS majú príponu ".css" a môžete ich nazvať akokoľvek len si k nim nezabudnite zadať cestu. Zadanie cesty CSS štýlov ste mali možnosť sa naučiť s minulého dielu. Teraz k popisu. Background nám určuje farebné pozadie stránky. V tomto prípade je to čierne pozadie. Font-family je na určenie typu písma. Font-size slúži na veľkosť písma a color na farbu písma. Text-align nám pochopiteľne text zarovnáva - v tomto prípade do ľava, Základ CSS ani nieje ho ovládať ako vedieť využiť. Zápis zostal podobný HTML ale i keď CSS2 a CSS3(vo výstabe) sa snažia podporovať všetky prehliadače, tak tento štandard sa tiež nedodržiava kompletne.

Teraz si vytvoríme taký menší blok do ktorého bude zaradená navigácia a nasledovne vedľa neho bude umiestený aj obsah.

/* toto je komentár 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;

}

Ešte by som doplnil predtým než začnem vysvetlovať, že farby sa môžu zapisovať aj v skrátenom tvare ako je napr. čierna #000000 - celý tvar, a #000 - skrátený tvar. Farby je možné zapísať ešte v tvare rgb(0,0,0).

Ak ovládate HTML čo je hlavná priorita pre výuku XHTML a CSS a samozrejme aj pre tento článok, tak určite súhlasíte, že "základ" CSS je ľahšie ako samotné HTML. Sami vidíte, že zápisy do CSS ako napr. width, border... sú veľmi jednoduché a obsahuje ich aj klasické HTML. Zápis margin bude asi trochu menej známi. Slúži na odpočítanie vzdialenosti od okraja. Margin sa dá zapisovať aj v tvare margin-top, margin-left a pod. Float nám zaťahuje náš <div> na okraj tam kam ho nasmerujeme. Je to obdoba align. V tomto príklade je obsah bloku vľavo a v ňom je vložený(v obsahu) ďalší <div> a to #navigacia. Prehľad kódu, ktorý sme zapísali bude nasledovný:

<?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 stránka 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>Služby</li>

<li>Referencie</li>

<li>Kontakt</li>

</ul>

</div>



</div>

</body>



</html>

Obsah sme zasadili ako hlavný <div>, ktorý bude tvoriť jadro stránky. Jadro, ktoré bude držať celú stránku pokope. Do tohto jadra(<div id="obsah">) sme vložili ďalši <div>, ktorý slúži ako navigačný blok stránky. Stránku sme ukončili tagmy </body> a </html>. Týmto je stránka hotová a základný úvod do CSS splnený. Ostatné CSS možnosti opíšem v ďalších častiach a ak sa chcete o CSS viac naučiť odporúčam znova rubriku CSS.

V ďalšom diele si povieme niečo o CSS a skúsime si XHTML a CSS v praxi.