Kaskádové styly CSS:

Tato kapitola vás má naučit, jak správně pracovat a jak používat styly v dokumentech HTML.
Kaskádové styly CSS lze napsat několika způsoby:
  1. CSS definované přímo v hlavičce (sekci HEAD): <HEAD><STYLE>.xxx {...}</STYLE></HEAD> - tzv. Tabulka stylů
  2. CSS definované uvnitř dokumentu: <SPAN STYLE=...>text</SPAN> - tzv. Přímé styly
  3. CSS definované uvnitř jiného tagu (Nelze použít u FONT, BASEFONT): <A HREF="*.*" STYLE=...>text</A> - tzv. Přímé styly
  4. CSS definované v jiném souboru Např.: "STYLSHEETS.CSS": <LINK REL="stylesheet" TYPE="text/css" HREF="Stylesheets.css"> - tzv. Odkazy na styly
Obsah souboru kaskádových stylů by měl mít příponu .CSS a měl by obsahovat tagy <STYLE>a</STYLE>, dále znaky komentáře <!-- ... -->, název tagu buď .nazev_tagu nebo BODY jako název existujícího tagu a nakonec by měla být tabulka stylů uložená ve složených závorkách { tabulka stylů }

To, jak má vypadat tabulka stylů je docela jednoduché:
  1. Při tabulce stylů a odkazech na soubor bude tabulka nebo obsah souboru vypadat takto:
    <STYLE TYPE="text/css">
    <!--
    .nazev_tagu {
    parametr1: hodnota1;
    parametr2: hodnota2;
    }
    -->
    </STYLE>
  2. V případě přímých stylů takto:
    <tag STYLE=parametr1: hodnota1; parametr2: hodnota2;>text</tag>

Vysvětlení parametrů a jejich hodnot:

Obsah:
Parametry se zadávají do tabulky stylů nebo do přímých stylů a v našich příkladech jsou označeny jako "Parametr 1"...:

Prvním parametrem bude vysvětlení základních parametrů, které nahrazují tagy <B><I><U><S> a přídávání ještě další možnosti řezu písma:
 Již velice známý, ale už zastaralý tag <B>, se nastaví v tabulce stylů takto:
font-weight: normal | lighter | light | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | bold | bolder
normalUkázka textu
lighterUkázka textu
lightUkázka textu
100Ukázka textu
200Ukázka textu
300Ukázka textu
400Ukázka textu
500Ukázka textu
600Ukázka textu
700Ukázka textu
800Ukázka textu
900Ukázka textu
boldUkázka textu
bolderUkázka textu
Zpět na seznam
Stejně známý, stejně používaný a opět zastaralý tag <I> je nahrazen v CSS takto:
font-style: normal | italic | oblique
normalUkázka textu
italicUkázka textu
obliqueUkázka textu
Zpět na seznam
Také známý, ale méně používaný tag <U> a <S> je nahrazen parametrem:
text-decoration: normal | underline | overline | line-through | blink
normalUkázka textu
underlineUkázka textu
overlineUkázka textu
line-throughUkázka textu
blinkUkázka textu
Zpět na seznam
Dalším parametrem je nastavení typu písma (fontu):
 font-weight: serif | sans-serif | cursive | fantasy | monospace | <Název písma>
serifUkázka textu
sans-serifUkázka textu
cursiveUkázka textu
fantasyUkázka textu
monospaceUkázka textu

U vzhledu písma je to trochu složitější, protože uživatel, který navštěvuje vaše stránky, ma nainstalované jiné písmo, než to, které máte nainstalováno v systému vy. Proto parametr font-stylepodporuje několik názvů fontů:
font-style: "Název fontu 1", "Název fontu 2", "Název fontu 3"
Při nenalezení písma "Název fontu 1" bude vyhledáno písmo "Název fontu 2" atd.
Zpět na seznam
K dosažení nějakého výkonu musíme znák také základní parametr font-size, který nastavuje velikost písma:
 Zde je to opět trochu složitější, protože je zde možno použít 8 typů měrných jednotek:
font-size: [smaller | larger] [xx-small | x-small | small | medium | large | x-large | xx-large] [<procenta>] [<číslo>]
 a u číslic je nutné použít jednotky:
Relativní jednotky: Absolutní jednotky:
smallerUkázka textu
largerUkázka textu

xx-smallUkázka textu
x-smallUkázka textu
smallUkázka textu
mediumUkázka textu
largeUkázka textu
x-largeUkázka textu
xx-largeUkázka textu

0%Ukázka textu
50%Ukázka textu
100%Ukázka textu
Zpět na seznam
K dosažení nějakého výkonu musíme znák také základní parametr font-size, který nastavuje velikost písma:
 Zde je to opět trochu složitější, protože je zde možno použít 8 typů měrných jednotek:
font-size: [smaller | larger] [xx-small | x-small | small | medium | large | x-large | xx-large] [<procenta>] [<číslo>]
 Zpět na seznam