Základné formátovanie textu

Kým sme sa prepracovali k tejto časti, už sme text formátovali. Ak si spomínate, menili sme veľkosť písma prostredníctvom font-size, farbu písma prostredníctvom color, pozadie prostredníctvom background alebo background-color.

To ani zďaleka nie je všetko, čo s textom dokážeme urobiť. Tak... Hor sa do práce! :)

Vlastnosti písma

Font-family (rodina písma):

V rámci tejto vlastnosti definujeme písmo, ktoré bude použité (napr. Arial, Comic Sans MS, Times New Roman), ale tiež, ktoré písmo bude použité, ak prvé uvedené písmo nemá prehliadač k dispozícii.

Ak by sa stalo, že prehliadač nemá k dispozícii žiadne nami zadané písmo, je dobré pre istotu na koniec uviesť aj všeobecnú rodinu písma.

Všeobecné rodiny písma:

• serif - pätkové písmo (napr. Times New Roman)
• sans-serif - bezpätkové písmo (napr. Arial)
• coursive - kurzíva (napr. Comic Sans MS)
• fantasy - ozdobné ornamentálne písmo (napr. Western)
• monospace - neproporcionálne písmo (napr. Courier)

Vyskúšajte rôzne rodiny písma na vlastnom texte.

Font-style (štýl písma):

Používame 3 štýly písma: normal (normálne písmo), italic (kurzíva) a oblique (sklonené písmo). Sklonené písmo vzniká naklonením normálneho písma, kdežto italic je jedinečné.

Font-variant (varianty písma):

Existujú 2 varianty písma: normal (normálne písmo) a small-caps (kapitálky).

Font-weight (tučnosť písma):

Určuje pomer hrúbky ťahu písma k jeho veľkosti. Hodnoty nadobúda normal, bold, bolder, lighter alebo tiež 100, 400, 800 atď.

Font-size:

Udáva veľkosť písma, ktorá môe byť daná absolútne, relatívne, percentuálne a konkrétnou výškou.

Absolútna veľkosť:

xx-small, x-small, small, medium, large, x-large, xx-large

Relatívna veľkosť:

Relatívna veľkosť oproti aktuálnej veľkosti - larger (väčšia), smaller (menšia).

Percentuálna veľkosť:

Veľkosť daná v % oproti okolitému písmu, napr. 220% oproti aktuálnej veľkosti písma.

Veľkosť daná výškou:

Veľkosť daná napr. v jednotkách px alebo em. Písmo s výškou 16px.

Úloha:

Vytvorte webovú stránku, v ktorej použijete nadpisy 1., 2. a 3. úrovne, samozrejme aj bežné odseky. V externom súbore vytvorte štýly pre jednotlivé prvky. Napr.:

h1 {
  font-family: Comic Sans MS, Courier, cursive;
  font-size: 16px;
  font-weight: bolder;
}

Ďalší článok - CSS a odrážky.