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:
- CSS definované přímo v hlavičce (sekci HEAD): <HEAD><STYLE>.xxx {...}</STYLE></HEAD> - tzv. Tabulka stylů
- CSS definované uvnitř dokumentu: <SPAN STYLE=...>text</SPAN> - tzv. Přímé styly
- CSS definované uvnitř jiného tagu (Nelze použít u FONT, BASEFONT): <A HREF="*.*" STYLE=...>text</A> - tzv. Přímé styly
- 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é:
- 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>
- 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
normal | Ukázka textu |
lighter | Ukázka textu |
light | Ukázka textu |
100 | Ukázka textu |
200 | Ukázka textu |
300 | Ukázka textu |
400 | Ukázka textu |
500 | Ukázka textu |
600 | Ukázka textu |
700 | Ukázka textu |
800 | Ukázka textu |
900 | Ukázka textu |
bold | Ukázka textu |
bolder | Uká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
normal | Ukázka textu |
italic | Ukázka textu |
oblique | Uká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
normal | Ukázka textu |
underline | Ukázka textu |
overline | Ukázka textu |
line-through | Ukázka textu |
blink | Uká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>
serif | Ukázka textu |
sans-serif | Ukázka textu |
cursive | Ukázka textu |
fantasy | Ukázka textu |
monospace | Uká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:
- em - jednotka vztažená k šířce písmene m (rovná se výšce textu)
- ex - jednotka vztažená k výšce písmene x
- px - výška zadaná v pixelech (může být sporné, zda se jedná o relativní či absolutní jednotku - pixel sám je však bezrozměrný a jeho aktuální
"fyzická" velikost závisí na parametrech zobrazení a výsledně i tisku).
Absolutní jednotky:
- in - palce (1" = 2,54 cm)
- cm - centimetry
- mmpt - typografické body, 1 pt = 1/72 palce,
- pc - picas, 1 pc = 12 pt
smaller | Ukázka textu |
larger | Ukázka textu |
xx-small | Ukázka textu |
x-small | Ukázka textu |
small | Ukázka textu |
medium | Ukázka textu |
large | Ukázka textu |
x-large | Ukázka textu |
xx-large | Uká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