V tejto časti sa dozviete všetko o formulovaní stránky do CSS a následne ju postaviť na XHTML 1.1. Nájdete tu aj základné informácie o CSS a dozviete sa tak trochu aj jeho rozšírenú syntax. Zdrojový kód stránky sa trochu prerobil od minulej časti ale v základe je to jej priame pokračovanie.
Hneď ako prvé by ste očakávali asi pokračovanie zdrojového kódu a tým pádom tvorby minulého layoutu,
ktorý sme ešte nedokončili. Tak som sa rozhodol aj pokračovať. Pokračovanie nájdete v dolnej časti
článku. Tu hore si povieme niečo o CSS.
CSS
CSS je veľmi výhodné používať. Jeho vlastnosti zdôrazňujú rýchly efektívny
kód s malou veľkosťou na serveroch, ktorá sa pohybuje v niekoľkých kB. Obnáša ľahšiu syntax základnú ako HTML a je ľahké s ním
narábať a upravovať ho. Možno trochu ťažšie pre začiatočníkov je navrhnúť ho pre
každý jeden prehliadač. CSS oddeľuje štýl stránky od jej štruktúry (obsahu).
Vhodná kombinácia CSS je s XHTML a to je "moderný web" o čom hovorí aj samotný
seriál. Určite vás už niekedy napadlo pri písaní HTML aby ste si
na stránke povedzme zmenili písmo a pod. Bolo to dosť zložité ak ste používali
klasické tagy <font>. Všetko ste museli prepisovať a zabralo to pekne veľkú časť
práce len so štýlmi. V CSS na to slúžia iba entity, ktoré sa zapisujú veľmi
jednoducho a to v takejto podobe:
#entita - tento zápis je braný ako "id" a taktiež ho môžete v kóde použiť iba jeden krát. Viac-násobné použitie môže viesť k nevalidnému kódu a to predsa nikto nechce dosiahnúť. .entita - tento zápis je braný ako "class" a môžeme ho narozdiel od "id" (#entina) použiť na stránke viackrát.Takže zápis do CSS vyzerá takto:
<div id="entita">Obsah</div> <div class="entita">Obsah</div>Určite by ste radi vedeli ako sa zapisujú štýly písma, jeho veľkosť, či má byť hrubé alebo tenké, modré alebo červené. Taktiež môžeme určovať linky, ktoré sme navštívili, ktoré sú práve otvorené, voľba farieb pozadia a pod. Možno si myslíte, že všetko bolo zodpovedané v minulom diele ale tak to nieje, pretože to musím aj vysvetliť.Základný zápis štýlov písma je takýto:
body {
font-family: verdana, sans-serif;
font-size: 80%;
font-weight: normal;
color: #000;
text-align: left;
background: #fff;
}
Všetko čo sme napísali je obrazom našej stránky (štýlom). Ako prvé čo je pre nás
primárny cieľ je vždy písmo. Začnem od začiatku. Zápis font-family nám určuje
typ písma, ktoré sme si vybrali. Písma rozdeľujeme na tvz.
patkové písma a bezpatkové písma.<h1>Nadpis stránky</h1> <h2>Nadpis stránky</h2> <h3>Nadpis stránky</h3> <h4>Nadpis stránky</h4> <h5>Nadpis stránky</h5> <h6>Nadpis stránky</h6>A toto bude efekt v kóde:
Nadpis stránky
Nadpis stránky
Nadpis stránky
Nadpis stránky
Nadpis stránky
Nadpis stránky
h1 { color: #ccc; }
Teraz sme si deklarovali a tým pádom aj zmenili nejaký tag pomocou CSS. Takto
isto to platí aj pre iné tagy a nie len pre nadpisy. Výsledok posúďte sami:
Nadpis stránky
body {
font-family: verdana, sans-serif;
font-size: 80%;
font-weight: normal;
color: #000;
text-align: center;
background: #fff;
}
#main {
width: 770px;
margin: 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;
}
Ako vidíte trochu som pozmenil aj body {} a pribudlo pár nových odsekov, dúfam,
že ste sa nenaplašili :-). Chcel som aby to trochu malo aj farieb a tak som
použil aj modrú farbu a zafarbil som ňou vrch a spodok stránky. Vrch stránky
predstavuje entita #logo. Logu sme dali pevné rozmery, pretože sa v ňom počas
prehliadania stránky nebude nič meniť. Border sme zadali len na spodnú čiaru a
tým sme dostali viditeľné ohraničenie spodku #logo. Nakoniec prišlo aj background a tomu som dal
tmavo-modrú farbu. Pribudol nám tu ešte #spodok a zmenil sa nám #obsah a #navigacia.
Obsah sa nám zmenil v trochu širšom rozpätí. Jeho šírku sme určili v percentách a nastavili
sme mu aj border na ľavú stranu. Padding je určité rozšírenie nejakého
obsahu a istým spôsobom aj jeho vnorenie. Padding sme použili s dôvodu aby sme
texty v obsahu nemali úplne na okraji. Float v CSS je akoby náhradou align.
Navigácii sme zadali šírku na 20% aby sa mohla prispôsobiť rovno s #obsah.
Floatom sme zarovnali #navigacia-u na ľavo. Určite ste si ešte všimli aj
#spodok, ktorému atribúty asi vysvetľovať nemusím ale jeden by tu aj bol.
Clear:both určuje ukončenie zarovnania stránky vo všetkých smeroch. dalo by sa
povedať ide aj o obtekanie stránky. Keby sme to neukončili nastalo by tzv.
"rozpadnutie stránky" čo by viedlo aj k jej nepoužitiu. Posledné čo sme si
zadefinovali je úprava tagu "ul". Normálne bez tejto úpravy by nám každý
prehliadač vykonal posunutie o riadok alebo od okraja. Prehliadače sú v tomto
odlišné. Pridali sme tam ešte aj padding: 0px aby sa nám menu "ul" zobrazovalo
správne aj vo Firefoxe.Teraz sa presunieme k samotnej definícií do kódu stránky.
<?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>Domov</li> <li>Služby</li> <li>Referencie</li> <li>Kontakt</li> </ul> </div> <div id="spodok"> © PaBi3.com. Všetky práva vyhradené.<br /> XHTML a CSS validné stránky. </div> </div> </body> </html>