CSS poskytuje mnoho vlastností pro úpravu vzhledu textu. Tyto se pohybují od písma přes styl písma až po stínování.
Mezi vlastnosti CSS pro text patří informace o stylu písma, o typu písma a o tučnosti. Tyto vlastnosti jsou samozřejmě užitečné hlavně pro HTML elementy, ve kterých je obsažen text (p, i atd.). Ale mohou být také použity pro tabulky.
Pomocí font-family můžete stanovit použité písmo.
<!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ýsledek v prohlížeči vypadá následovně:
Typickými písmy jsou například Arial, Helvetica a Times Roman. Vlastnost CSS font-family přiřazuje požadovaná písma. Pokud zadáte více písem, záleží na pořadí. Pokud je první uvedené písmo dostupné, použije se toto. Požadovaná písmena jsou oddělena čárkou. Jako poslední pokyn se obvykle uvádí takzvaná generická rodina písem. Pomocí této generické rodiny umožňujete prohlížečům vybrat písmo, které je alespoň podobné zadanému.
• serif = písmo se serify
• sans-serif = písmo bez serifů
• cursive = kurzíva
• fantasy = neobvyklé písmo
• monospace = písmo s rovnoměrným rozestupem mezi písmeny.
Styl písma
Skrze vlastnost font-style můžete stanovit styl písma. Pokud zvolené písmo dovolí, můžete silou italic vyžadovat kurzivu.
Jiná písma lze zkřivit pomocí oblique.
Další CSS vlastností, kterou lze použít k ovlivnění vzhledu textu, je font-variant. Tím lze definovat tzv. malá kapitálka.
Přiřaďte kvalifikátoru font-variant hodnotu small-caps.
Velikost písma
Velmi důležitá je také definice velikosti písma. CSS nabízí vlastnost font-size. Velikost písma se může zadávat v různých jednotkách.
• EM
• REM
• Pixel
• Procento
• Klíčová slova
Jako klíčová slova jsou k dispozici následující varianty:
• xx-small – velice, velice malé
• x-small – velmi malé
• small – malé
• smaller – menší než v rodičovském prvku
• medium – střední
• large – velké
• x-large – velice velké
• xx-large – velice, velice velké
• larger – větší než v rodičovském prvku
Zde je příklad, jak nastavit velikost písma:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}A tak to vypadá v prohlížeči:
Upozorňujeme, že definice velikosti písma je velmi komplexní, protože jednotlivé jednotky mají své výhody a nevýhody.
Dobrý přehled, kterou jednotku použít a kdy, naleznete na stránce http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Pro všechny, kteří si to nechtějí číst: Používejte relativní hodnoty jako em pro zobrazení na obrazovce. Pro úpravy tiskových stránek zvolte absolutní jednotky jako pt.
Tučné písmo
Dále pokračujeme s tzv. tučným písmem. Tím se určuje tloušťka písma. K tomu slouží vlastnost font-weight.
.fett {
font-weight:bold;
}
Tímto zápisem se vybraný text zobrazí tučně.
Možné hodnoty jsou bold (tučné), bolder (zvlášť tučné), lighter (tenké) a normal. Kromě toho jsou povoleny i číselné hodnoty 100, 200, 300, 400, 500, 600, 700, 800 a 900. Tyto číselné hodnoty sahají od extra-tenké (100) po zvlášť tučné (900).
Shrnutí definic
V souvislosti s definicemi písma hraje důležitou roli také vlastnost line-height, pomocí které se definuje výška řádku. K této vlastnosti se ještě později podrobněji vrátím. V tomto bodě musí být jen zmíněna, protože hraje určitou roli ve spojitosti s následující vlastností font.
Dosud představené údaje o zobrazování textu můžete kombinovat. K tomu slouží obecná vlastnost font. Tato obsahuje následující jednotlivé údaje nebo je zahrnuje.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Pomocí font lze kombinovat různé formátování písma. Přitom můžete uvést dříve zmíněné vlastnosti, nemusíte však použít všechny. Povinné jsou však vlastnosti pro velikost písma a rodinu písma.
Díky zkratce lze CSS soubory udržovat kratší a přehlednější.
Pořadí, jaké je uvedeno níže, musí být dodrženo. Pokud jsou uvedeny obě vlastnosti font-size a line-height, tyto jsou odděleny lomítkem. Pokud se v tomto bodě uvádí pouze jedna hodnota, pak se jedná o font-size.
Příklad:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}
font-size-adjust bylo vyvinuto s cílem umožnit zobrazování písem téměř ve stejné velikosti. Různá písma mají při stejné výšce písma různou výšku x. Nicméně písma s větší výškou x jsou lépe čitelná. Tak se může stát, že dokument není dobře čitelný, pokud původní písmo není k dispozici a nahrazeno jiným s menší výškou x. S font-size-adjust by měla být tato odlišnost vyrovnána.
Příklad:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
V dalším tutoriálu se dozvíte další možnosti, jak můžete upravit vzhled textu na svých webových stránkách.
