Tato stránka je testem možnosti použití (externích) stylů. Styl definovat dvěma způsoby:
stylem uvnitř stránky použitím <STYLE> ... </STYLE> v rámci HEAD části
stylem z externího souboru použitím <link rel="stylesheet" href="url_souboru">;
soubor se v podstatě vloží do STYLE části, která se vytvoří
Tato stránka používá externí vložení, soubor "files/styly.css". Následuje jeho stručně
okomentovaný obsah:
body {background: #404040 url(stranka.jpg) no-repeat fixed center}
body {color: #a0ffff}
Nastavení celé části BODY - barva pozadí a obrázek na pozadí (Netscape neumí) s
nastavením bez opakování a scrollování a na sřed okna; také standardní barva textu.
address {font-family: Arial; font-style: normal; color: #ffffff}
address {margin: 20; margin-right: 50%}
#k {color: #ff0000; display: inline}
Toto je ukázka (KKK) odstavce stylu ADDRESS s vloženým K
(v závorkách).
a tady skončil...
ul {margin-top: 0; margin-bottom: 10; color: #ff0000; display: inline}
li {color: #00ff00; list-style: square}
Toto je snaha o seznam bez mezery od nadpisu. IE reaguje na MARGIN-TOP, kdežto
N na DISPLAY. N též barvu LI použije jen na značku, nikoliv text.
A tady je seznam:
- první položka
- druhá položka, měla by mít oddělovač obrázek
(IE)
a tady skončil...
Následují různé styly okrajů políček tabulky (BORDER: x) (N nemění):
| standard |
NONE |
DOTTED |
DASHED |
SOLID |
DOUBLE |
GROOVE |
RIDGE |
OUTSET |
INSET |
Tento odstavec je ukázka různých nastavení fontů.
Velikost písma:
Dvanáct pixelů (PX)
1.5 násobek původní velikosti (EM)
3.8 násobek výšky písmene 'x' (EX)
1.0 centimetru (CM)
8 milimetrů (MM)
0.3 palce (IN)
2 body (PT)
1.3 picasu (PC)
lze též používat spoustu dalších typů nastavení
Font-family:
Serif,
Sans-Serif,
Cursive,
Fantasy,
Monospace
Font-weight:
Extra-Light,
Light,
Demi-Light,
Medium,
Demi-Bold,
Bold,
Extra-Bold,
Bolder,
Lighter
Font-style:
Normal,
Italic,
Small-Caps,
Oblique
A nakonec jiné řádkování ...
... 150%
V tomto odstavci se naházejí ukázky různých stylů a nastavení písma.
Mezera mezi slovy (Word-Spacing: 30),
Mezera mezi písmeny (Letter-Spacing: 5)
Text-Decoration:
Žádná (None),
Podtržení (Underline),
Nadtržení (Overline),
Přeškrtnutí (Line-Through),
Blikání (Blink)
Text-Transform:
Žádná (None),
Prní velká (Capitalize),
Velká písmena (UpperCase),
Malá písmena (LowerCase)
Vertical-Align:
Dolní index (SUB),
Horní index (SUPER),
Baseline,
Top,
Text-top,
Middle,
Bottom,
Text-bottom,
200%,
Text-indent (posunutí):
Posunutý text (30px)