Grafická úprava textu
Pri dizajne začneme s tým najzákladnejším a to je grafická úprava textu, resp. jeho grafický vzhľad. Formátovanie a úpravu textu poznáte určite z tvorby textových dokumentov v pokročilejších editoroch ako je Microsoft Word alebo Open Office Writer. Najčastejšie zmeny prevádzané na texte sú zmena jeho farby, štýlu (tučné, kurzíva), veľkosti, typu fontu (Arial, Times New Roman...) a podobne. Všetky tieto parametre a mnoho ďalších je možné definovať pomocou jazyka CSS.
Farbu textu je možné meniť pomocou vlastnosti color (color – farba), ktorej defaultná hodnota je black (čierna). Ako je zrejmé, hodnotou tejto vlastnosti je názov farby. Na výber je viac ako sto farieb, najčastešie používané sú white (biela), black (čierna), grey (šedá), red (červená), blue (modrá) atď. Farby sa všeobecne v jazyku CSS dajú definovať viacerými spôsobmi (viacej druhov hodnôt vlastnosti color), to si však vysvetlíme neskôr podrobne v kapitole na to určenej. Veľkosť textu definujeme pomocou vlastnosti font-size (veľkosť fontu/písma). Jej hodnota sa udáva číselne v pixeloch, podobne ako width a height a jej defaultná hodnota je 16px (pixelov). Veľkosť písma, ako už bolo spomenuté v prvej kapitole, sa dá zadať pomocou viacerých merných jednotiek (okrem pixelov), na začiatok ale budeme používať iba pixely, neskôr si vysvetlíme aj ostatné možnosti. Zarovnanie textu v riadku sa zadáva pomocou vlastnosti text-align, ktorá môže byť nastavená na nasledujúce hodnoty: left (left – vľavo, k ľavému okraju), center (center – stred, na stred), right (right-vpravo, k pravému okraju) a justify (justify – zarovnať/vyplniť, vyplniť celý riadok). V nasledujúcej ukážke si ukážeme rôzne nastavenia týchto vlastností, môžete sa s tým kľudne pohrať, skúšajte si meniť jednotlivé hodnoty. Podobne ako pri vlastnostiach height a width, vlastnosti v jazyku CSS platia pre všetky elementy, takže napríklad vlasnosť text-align sa dá použiť na elementy, ktoré môžu obsahovať text (p, div...):
<!DOCTYPE html>
<html>
<head>
</head>
<body style="font-size: 12px;">
<p style="color: red; font-size: 22px; text-align: center;">
Vyrazny velky napis, cervenym a zarovnany na stred!
</p>
<table>
<tr>
<td style="text-align: right;">Meno:</td>
<td style="text-align: left; font-size: 16px;">Adam</td>
</tr>
<tr style="color: grey;">
<td style="text-align: right;">Priezvisko:</td>
<td style="text-align: left; font-size: 16px;">Sangala</td>
</tr>
<table>
</body>
</html>
Všimnite si viacero zaujímavých vecí. Vlastnosť určujúcu veľkosti písma (font-size) sme použili hneď na začiatku v tagu body, čím sme určili (nastavili) veľkosť písma pre všetok obsah tohto tagu, čiže pre celú webstránku. Schválne sme chceli poukázať na túto možnosť, ešte len dodáme, že je to možné aj do tagu html. Ako vidíte, v prvom elemente (p) sme použili naraz všetky tri vlastnosti, ktoré sú oddelené bodkočiarkou ako každé pravidlo v jazyku CSS. Prvá bunka tabuľky (tá s hodnotou Meno:) nemá určenú farbu a ani veľkosť písma, takže má tento element defaultné nastavenia, resp. si nastavenia dedí z nadradeného elementu. Nadradené elementy (rodičia, rodič – parent) tejto bunky sú postupne tr, table, body a html (je to pekne vidieť podľa správne použitého odsadenia). Keďže bunka nemá definovaný štýl, hľadá sa prvý nadradený rodič, ktorý to má určené, čo je v tomto prípade tag body, takže text v bunke je o veľkosti 12 pixelov. Rovnako je to aj v ostatných parametroch, ako napríklad vo farbe. V tomto prípade nemá žiadny rodič nastavenú farbu, takže sa berie všeobecne defaultná hodnota pre túto vlastnosť a to je čierna farba (black). V druhej bunke (s hodnotou Adam) sme zadefinovali vlastnosť font-size, takže text je má veľkosť 16 pixelov. Týmto sme prepísali (prestavili) nastavenie, ktoré je definované v tagu body, ktoré by sa v opačnom prípade bralo. Takisto, keby napríklad prvý nadradený tag tr mal nastavenú túto vlastnosť, aj tá by bola prebitá, pretože sa berie vždy najspodnejšia vlastnosť v hierarchii nadradenosti.
Týmto je vysvetlený aj fakt, ktorý bol spomenutý skorej, že jednotlivé vlastnosti sa dajú zadefinovať elementom, v ktorých sa môže nachádzať text, ako je to v prípade druhého riadku (tagu tr). Element tr sám o sebe neobsahuje text, ale zadefinovali sme farbu textu pre celý riadok, resp. pre všetko, čo sa v ňom nachádza. Vlastnosti sa načítavajú v hierarchii od dola hore, až po najvrchejší element. Toto je kľúčová vlastnosť jazyka CSS, že štýl sa aplikuje v štruktúre nadradenosti. Z tejto skutočnosti vychádza aj názov jazyka, ktorý sme si ešte nevysvetlili. Názov je skratka Cascading Style Sheet, čo značí kaskádový štýl. Kaskádami sa myslia postupné poschodia elementov (úrovne v štruktúre), ktoré sú na rovnakej úrovni alebo o úroveň nižšie a štýl majú aplikovaný svoj vlastný alebo sa pozerajú smerom na rodičovské elementy.
Určite ste už veľakrát písali nejaký textový dokument a používali ste viacero typov písma. Typ písma sa všeobecne nazýva font. Fontov existuje strašne veľa a v podstate hocikto si môže spraviť vlastný font a ponúknuť ho na stiahnutie a používanie. Okolo fontov je aj kus teórie, ako sa delia, čím sa odlišujú a podobne, to si však teraz nejdeme rozoberať, bude to podrobnejšie rozobraté v kapitole na to určenej. Medzi tie najpoužívanejšie a asi pre vás aj najznámejšie patria Arial, Times New Roman, Verdana, Comic Sans, Helvetica, Courier atď. Väčšina fontov, ktoré si môžete zvoliť v textovom editore (napríklad Microsoft Word), sa dá použiť aj pre webstránku. Font písma sa dá nastaviť pomocou vlasnosti font-family a jej hodnota je názov jedného alebo viacerých fontov. Možno sa pýtate, prečo viacerých?
Fonty sú všeobecne uložené na počítačí lokálne v operačnom systéme. Font tvorí niekoľko súborov, v ktorých sú uložené akokeby šablóny pre všetky znaky daného fontu. Pri zadaní fontu v CSS sa automaticky zadaný font hľadá na počítači používateľa (hľadajú sa dotyčné súbory), resp. návštevníka stránky. Pomocou jazyka CSS je možné ale aj zadefinovať vlastné fonty, resp. použiť nejaký font, ktorý je uložený spolu so stránkou na webserveri (mieste, kde je uložená stránka a všetko s ňou súvisiace). Tento spôsob sa používa, ak je nutné na webstránke použiť nejaký vlastný alebo neštandardný font, ktorý sa defaultne nenachádza v každom operačnom systéme. Presne pre tento dôvod je možné ako hodnotu vlasnosti font-family zadať viacero fontov. Pri definovaní tohto pravidla sa zoberie vždy prvá hodnota. Ak však daný font nie je napríklad podporovaný prehliadačom alebo sa jeho načítanie nepodarilo z akéhokoľvek iného dôvodu, zoberie sa druhá hodnota a tak ďalej. Preto pri zložitejších stránkach, kde sa používa viacero fontov dobré zadefinovať viac možností, pre nás to ale zatiaľ nie je dôležité. Hodnota tejto vlastnosti je teda názov fontu. Ak sa však meno fontu skladá z viacerých slov, je nutné tento názov obaliť jednoduchými úvodzovkami, ako napríklad 'Times New Roman'. Viacero zadaných fontov sa oddeľuje čiarkov. Ako hodnoty môžete teda použiť napríklad Times New Roman, Arial, Verdana, Courier New, Helvetica, Comic Sans MS, Tahoma, Geneva atď. V nasledujúcej ukážke použijeme viacero fontov na jednotlivé elementy, aby sme videli rozdiel medzi fontami:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="font-family: Arial;">
<h1>Nadpis - Arial</h1>
<span>Nemal som doma co robit, tak som programoval...</span>
</div>
<div style="font-family: 'Times New Roman';">
<h1>Nadpis - Times New Roman</h1>
<span>Nemal som doma co robit, tak som programoval...</span>
</div>
<div style="font-family: 'Comic Sans MS';">
<h1>Nadpis - Comic Sans MS</h1>
<p>Nemal som doma co robit, tak som programoval...</span>
</div>
<div style="font-family: 'Courier New';">
<h1>Nadpis - Courier New</h1>
<span>Nemal som doma co robit, tak som programoval...</span>
</div>
<div style="font-family: Verdana;">
<h1>Nadpis - Verdana</h1>
<span>Nemal som doma co robit, tak som programoval...</span>
</div>
<div style="font-family: Helvetica;">
<h1>Nadpis - Helvetica</h1>
<span>Nemal som doma co robit, tak som programoval...</span>
</div>
<div style="font-family: Geneva;">
<h1>Nadpis - Geneva</h1>
<span>Nemal som doma co robit, tak som programoval...</span>
</div>
<div style="font-family: NeexistujuciFont, Fero, Geneva;">
<h1>Nadpis - Geneva</h1>
<span>Nemal som doma co robit, tak som programoval...</span>
</div>
</body>
</html>
Medzi jednotlivými fontami je v tejto ukážke pekne vidieť rozdiely. Všimnite si, že v poslednom dive sme naschvál zadali zle dve hodnoty fontu, aby sme vám ukázali, že si webstránka berie ďalej fonty, ktoré sú zadané. Takže je použitý prvý font, ktorý prehliadač pozná, resp. našiel a tým je Geneva. V sekcii jazyka HTML sme si ukázali tagy, pomocou ktorých sme vedeli nastaviť štýl písma ako tučné písmo, kurzíva a podobne (tagy b, i...). Štýl písma sa zadáva pomocou vlastnosti font-style, ktorej hodnota normal určuje štandardný štýl písma a hodnota italic určuje kurzívu. Hrúbka písma sa určuje pomocou vlasnosti font-weight (weight – váha), ktorej hodnota sa môže zadať aj číslom určujúcim hrúbku písma, túto možnosť ale zatiaľ nebudeme používať, pre nás bude zatiaľ dôležitá hodnota normal (štandardná hrúbka) a najmä bold (tučné). Okrem týchto hodnôt existuje ešte viacej textových možností pre túto vlastnosť, dostaneme sa k nim neskôr. Čiže pre štandardné písmo používame pravidlo font-style: normal, pre kurzívu font-style: italic a pre tučné písmo font-weight: bold. Dekoráciu (ozdobu) textu je možné zadať pomocou vlastnosti text-decoration. Medzi dekoráciu patrí napríklad podčiarknutý text, ktorý sa zadáva hodnotou underline (underline – podčiarknutie) alebo prečiarknutý text (line-through – čiara cez). Podčiarknutie sa využíva najmä pri odkazoch, keď sa nad nimi nastavíme myšou, často sa zmenia na podčiarknuté a tučné. V nasledujúcej ukážke je vidieť použitie všetkých týchto troch vlastností. Na aplikovanie rôznych štýlov, resp. pravidiel CSS jazyka na časť textu môžeme použiť tag span. Použitie tohto inline elementu nespôsobí defaultne žiadnu grafickú zmenu, ohraničí nám však text do tagu, na ktorý možeme aplikovať štýl:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p>
Ukazeme si vsetky vlastnosti.
<span style="font-style: italic; font-weight: bold;">
Tento text je kurzivou a je aj tucny.
<span style="font-weight: normal;">
Pouzili sme span vo vnutri spanu a nastavili sme hrubku na normalnu, kurziva sa dedi.
</span>
</span>
<span style="text-decoration: underline;">
Tento text je zase podciarknuty.
</span>
</p>
</div>
</body>
</html>
Všimnite si najmä použitie spanu v spane a prenastavenie resp. zresetovanie nastavenia tučného textu v nadradenom elemente (v rodičovi). Hodnotou normal sme predchádzajúce nastavenie anulovali a text sa zobrazuje normálnou hrúbkou. Na záver si ukážeme ešte dve vlastnosti, ktoré sa nám zídu. Pomocou vlastnosti text-transform vieme pre zobrazenie transformovať (pretvoriť, pozmeniť) text na taký, aký chceme. Sú tri možné transformácie a to všetky písmenká spraviť veľkými písmenami (hodnota uppercase), všetky písmenka dať na malé písmená (lowercase) alebo nastaviť, aby sa každé slovo začínalo veľkým písmenom (capitalize). Posledná vlastnosť nám bude slúžiť na nastavenie hrúbky, resp. výšky riadka. Doteraz sme si nastavovali iba veľkosť písma, je možné ale nastaviť osobitne aj veľkosť riadka a tým zväčšiť alebo zmenšiť odstup medzi riadkami. Hodnota vlasnosti line-height (výška riadka) sa môže zadať opäť viacerými spôsobmi, nám bude zatiaľ stačiť zadávanie pomocou pixelov:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p style="text-transform: uppercase;">
TenTO text nam SPRAVILO velkymi pismenami.
</p>
<p style="text-transform: lowercase;">
TenTO text nam SPRAVILO malymi pismenami.
</p>
<p style="text-transform: capitalize;">
Slova tohto textu sa zacinaju velkymi pisMENami. <span style="font-weight: bold;">Vsimnite SI, ze MENI sa iBA prve pismeno!!!</span>
</p>
<p>
<span>Menime hrubku riadka. Tento je standardny.</span><br>
<span style="line-height: 50px;">Menime hrubku riadka. Tento ma 50 pixelov.</span><br>
<span>Menime hrubku riadka. Tento je standardny.</span><br>
<span style="line-height: 30px;">Menime hrubku riadka. Tento ma 30 pixelov.</span><br>
<span>Menime hrubku riadka. Tento je standardny.</span><br>
</p>
</div>
</body>
</html>
Počas práce na dizajne stránky sa vo väčšine všetko ráta presne na jeden pixelík, to znamená, že na predlohe, ktorú väčšinou navrhne grafik, musí byť všetko presne zoradené. Každý jeden element na stránke musí byť presne na svojom mieste tak, ako si to vyžaduje grafik. Preto sa často budeme zaoberať presnými rozmermi na pixely a hranami a vzdialenosťami medzi elementami a podobne. Preto existujú vlastnosti ako line-height, aby sme presne vedeli zadať, resp. aby sme vedeli, koľko nám daný riadok bude zaberať presne pixelov.