Úprava textu v CSS
Nastavení typu písma pomocí CSS
K tomu slouží vlastnost CSS s názvem font-family
Příklad
.dva{font-family:"Lucida Console"}
.jedna {font-family:Arial, Verdana,"sans-serif"}
Pomocí sans-serif jsme prohlížeči sdělili, pokud nenajde bezpatkova Arial nebo Verdana, pak má hledat jiné.
<p class="jedna">tento text napsán typem písma Monotype Corsiva</p>
<p class="dva">tento text je napsán Lucinda Console</p>
Nastavení barvy písma pomocí CSS
definuje se stejně jako v HTML, a to prostředníctvím vlastnosti color.
<p style="color:gray">text napsán šedivou barvou</p>
<p style=color:"#A0A0A0">text napsán šedivou barvou</p>
<p style=color:"rgb(160,160,160)">text napsán šedivou barvou</p>
Je možné podobně jako u HTML nastavit barvu písma pro celou internetovou stránku.
body {color:yellow}
Nastavení barvy pozadí
background a její varianty
background-color
background-image nastavuje obrázek na pozadí
background-repeat nastavuje několikanásobné opakování na pozadí(repeat-x, repeat-y, no-repeat, repeat)
background-attachment nastavuje, zda se má obrázek na pozadí pohybovat při používání posuvníků, nebo nemá (fixed, scrooll)
backgrount-position nastavuje umístění obrázku na pozadí- pokud zadáme jednu hodnotu pak to platí pro vzdálenost od levého okraje. Pokud zadáme dvě hodnoty pak ta druhá hodnota platí pro vzdálenost od horního okraje. Kromě délky můžeme také použít hodnoty (left, right top, bottom, center)
Nastavení velikosti písma pomocí CSS
Pokud chceme definovat velikost písma pomocí stylů, pak použjeme vlastnost font-size.
číselné údaje týkající se velikosti písma můžeme zadávat v různých jednotkách
typografický bod (pt)
obrazovkový bod pixel (px)
palec(in)
procento(%)
Jednotky píšeme hned za číslo neděláme mezeru!
Nejvhodnější je použití neutrální jednotky jednotky pt
Nastavení kurzivy pomocí CSS
Vlastnost CSS font-style můžeme použít na kurzivu nebo na písmo skloněné.
Používáme hodnoty italic(kurziva)
oblique (skloněné)
Nastavení tlošťky písma pomocí CSS
Prostřednictvím vlastnosti font-weight. Tady je široká škála možností. Možné hodnoty jsou:
bolder - tučnější
lighter - pro méně tučné
obyčejné odpovídá 400
Nastavení stylů písma
Vlastnost font-variant
kapitálky small-caps
Nastavení výšky řádku
Výška vyplyne z velikosti a typu použitého písma. Pomocí vlastnosti CSS line-height můžeme zadat třemi způsoby:
- jednotky délky
- v procentech (100% je velikost právě nastaveného písma)
- kladným číslem, které vyjadřuje násobek výšky písma
<p style="line-height: 1.5"> 3.5 násobek výšky písma</p>
Nastavení vzdálenosti mezi písmeny nebo slovy
Můžeme dolaďovat vzdálenost mezi písmeny, aby se jemně změnilo zobrazení dostavce.
V HTML můžeme nastavit dva typy vzdáleností: vzdálenost slov a vzádlenost písmen.
Nastavení vzdálenosti mezi slovy provedeme pomocí vlastnosti word-spacing a nastavení vzdálenosti mezi písmeny provedeme pomocí vlastnosti letter-spacing
<p style="letter-spacing:10pt">
p {letter-spacing:10pt}
Použití podtrženého a přeškrtnutého písma
Přeškrtnuté písmo se používá pro označení změněného textu. Podtržené písmo většina webových designérů nepoužívá, protože podtržené jsou odkazy a podtržení by mohlo být matoucí.
Používáme vlastnost text-decoration s hodnotami
- underline (podtržení)
- oveline (čára nad textem)
- line-through (přeškrtnutí)
- blink (blikání)
Nastavení písma kombinací různých způsobů
Při formátování písma pomocí CSS máme možnost poutí několik vlastností: font-style, font-variant, font-weight, font-size/font-height či font-family, které můžeme všechny zařadit do vlastnosti font.
K font jsou poviné zařadit font-size a font-family v tomto pořadí a na konec výčtu a ostatní tři jsou volitelné v lib. pořadí.
color musíme definovat zvlášť
př.
<!--
p.jedna{font: italic small-caps 24pt/18pt "Monotype Coursiva"}
-->