HTML & CSS pro začátečníky

HTML & CSS pro začátečníky (část 29): Krásný text pomocí CSS (1)

Všechna videa tutoriálu HTML a CSS pro začátečníky

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ě:

HTML & CSS pro začátečníky (část 29): Krásný text pomocí CSS (1)

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.

HTML a CSS pro začátečníky (část 29): Krásný text pomocí CSS (1)

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.

HTML & CSS pro začátečníky (část 29): Krásný text pomocí CSS (1)



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:

HTML a CSS pro začátečníky (část 29): Krásný text pomocí CSS (1)



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ě.

HTML & CSS pro začátečníky (část 29): Krásný text pomocí CSS (1)



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.