CSS ponúka veľa vlastností pre prispôsobenie vzhľadu textu. Tieto zahŕňajú výber písma, štýl písma a tiene.
Medzi vlastnosti písma v CSS patria informácie o písme, štýle písma a hrúbke písma. Tieto vlastnosti sú samozrejme najviac užitočné pre HTML prvky obsahujúce text (p, i a pod.). Môžu sa však používať aj pre tabuľky.
Pomocou font-family možno stanoviť požadovaný font.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Výsledok v prehliadači vyzerá nasledovne:
Bežné písmená sú napríklad Arial, Helvetica a Times Roman. Vlastnosť CSS font-family priradzuje požadované písma. Ak uvedieme viacero písiem, je dôležitá ich poradie. Ak je prvé uvedené písmo k dispozícii, bude použité. Požadované písma sú oddelené čiarkami. Posledným pokynom je obvykle tzv. generická rodina písma, ktorá umožňuje prehliadačom vybrať podobný font.
• serif = písmo s ozdobami
• sans-serif = písmo bez ozdob
• cursive = písmo pre kurzívny text
• fantasy = extravagántne písmo
• monospace = písmo s rovnakou hrúbkou znakov.
Štýl písma
Pomocou vlastnosti font-style môžete určiť štýl písma. Ak to zvolené písmo umožňuje, môžete silou vlastnosti italic vnútiť kurzívny spôsob písania.
Iné písma možno nakloniť pomocou oblique. Ďalšou vlastnosťou CSS ovplyvňujúcou vzhľad textu je font-variant. Pomocou nej možno definovať tzv. kapitálky.
Ak chcete nastaviť kapitálky, priraďte vlastnosti font-variant hodnotu small-caps.
Veľkosť písma
Dôležitou informáciou je aj veľkosť písma. CSS na to ponúka vlastnosť font-size. Veľkosti písma možno zadať v rôznych jednotkách.
• EM
• REM
• Pixel
• Percento
• Kľúčové slová
Ako kľúčové slová sú k dispozícii nasledujúce varianty:
• xx-small – veľmi malé
• x-small – veľmi malé
• small – malé
• smaller – menší ako v nadradenom prvku
• medium – stredné
• large – veľké
• x-large – veľmi veľké
• xx-large – veľmi veľké
• larger – väčší ako v nadradenom prvku
Ukážka, ako sa dá nastaviť veľkosť písma:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}A takto to vyzerá v prehliadači:
Pri určovaní veľkosti písma je dôležité zohľadniť, že rôzne jednotky majú svoje výhody a nevýhody.
Pre prehľad o tom, ktorú jednotku je najlepšie použiť a kedy, navštívte stránku http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Pre tých, čo si to nechcú prečítať, máme jedno odporúčanie: Používajte relatívne hodnoty ako em pre zobrazovanie na obrazovke. Pre tlačové rozloženia sa však radšej spoliehajte na absolútne jednotky ako pt.
Hrúbka písma
Pokračujeme s tzv. hrúbkou písma. Týmto sa stanovuje tlak a pevnosť písma. Na to sa používa vlastnosť font-weight.
.fett {
font-weight:bold;
}
Takto označený text sa zobrazuje tučne.
Možné hodnoty sú bold (tučné), bolder (extra tučné), lighter (tenšie) a normal. Ďalej sú povolené číselné hodnoty 100, 200, 300, 400, 500, 600, 700, 800 a 900. Tieto hodnoty sa pohybujú od extra-tenkého (100) po extra tučné (900).
Zhrňovanie definícií
V súvislosti s definíciami písma hrá dôležitú úlohu aj vlastnosť line-height, cez ktorú je možné definovať výšku riadkov. Neskôr sa ešte podrobnejšie budeme zaoberať touto vlastnosťou. V tejto chvíli ju musíme len spomenúť, pretože zohráva určitú úlohu v súvislosti s ďalšou ukázanou font vlastnosťou.
Zatiaľ môžete kombinovať uvedené informácie o zobrazovaní písma. Na tento účel slúži všeobecná vlastnosť font, ktorá zahŕňa tieto jednotlivé údaje alebo ich zahŕňa.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Pomocou font môžete kombinovať rôzne formátovania písma. Môžete uviesť vyššie uvedené vlastnosti, ale nemusíte použiť všetky. Povinné sú však vlastnosti pre veľkosť písma a rodinu písma.
Vďaka skratkám môžu byť súbory CSS stručnejšie a prehľadnejšie.
Poradie, ktoré bude uvedené nižšie, je však potrebné dodržať. Ak budú vyznačené obe vlastnosti font-size a line-height, budú oddelené lomkou. Ak na tejto mieste bude uvedená len jedna hodnota, znamená to font-size.
Príklad:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust bol vyvinutý na dosiahnutie približne rovnakej veľkosti písma. Rôzne písma majú pri rovnakej výške písma rôzne výšky x. Avšak písma s väčšou výškou x sú lepšie čitateľné. Môže sa teda stať, že dokument bude ťažko čitateľný, ak pôvodné písmo nie je k dispozícii a nahradí ho iné s menšou výškou x. S font-size-adjust by mal byť tento rozdiel vyrovnávaný.
Príklad:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
V ďalšom návode sa dozviete ďalšie možnosti, ako môžete prispôsobiť vzhľad textu na svojej webovej stránke.
