Pozicování a vrstvení písma
Kromě jednoduché specifikace fontů, velikostí a stylů umožňují CSS webovým návrhářům rozmístit písmo ve vícero vrstvách s naprostou přesností. CSS užívá v souvislosti s vrstvami webové stránky termín "z-index". Z-index odpovídá ose Z, která je kolmá na obě osy X a Y okna prohlížeče. S použitím z-indexu mohou CSS umístit písmo v různých úrovních (nebo rovinách) k vytvoření efektu vrstveného písma. Při absolutním pozicování typografických prvků, CSS vycházejí z "horního" a "levého" umístění od okrajů okna prohlížeče.
Tuto techniku využijete k:
Specifikaci absolutního umístění textu.
Přesně určíte, kde se má text objevit bez nutnosti ovládání tabulek nebo mezerujících GIFů.
Vytvoření vícenásobných vrstev, v nichž může písmo plavat.
S využitím kaskádových stylů můžete dosáhnout rychle se natahující vrstvené typografie bez použití jediného obrázku.
Návrhu flexibilnějších uspořádání.
Překonáte omezení provedení dané jednoduchým HTML a omezení jednovrstvého plánu.
Definice vrstev písma:
Do hlavičky HTML dokumentu nebo do externího souboru vložíme kód:
Text za // do kódu nepište - jde o komentář.
< STYLE TYPE="text/css"> // začátek delkarací stylů - POUZE V HLAVIČCE!
.jméno_vrstvy { // deklarace stylu pro vrstvu písma
position: absolute; // definice absolutního pozicování písma
top: číslo px; // odsazení vrstvy od horního okraje okna prohlížeče
left: číslo px; // odsazení vrstvy od levého okraje okna prohlížeče
z-index: přirozené_číslo; // číslo vrstvy 1, 2, 3, ...; vrstva s vyšším číslem přepisuje vrstvu s nižším číslem
... // sem přijdou definice vlastností písma
} // konec deklarace stylu pro vrstvu písma
... // sem přijdou deklarace dalších vrstev
< /STYLE> // konec delkarací stylů - POUZE V HLAVIČCE!

POZOR!
Nezapomínejte na STŘEDNÍK za každou definovanou vlastností stylu!
V těle dokumentu používejte tag < SPAN CLASS="jméno_vrstvy">!
Takhle to vypadá.

Příklad:
Definice vrstev pro ukázkovou stránku:
.pozadi{font-family: Desdemona, Impact, Arial; font-size: 30pt; line-height: 40pt; color:tomato; margin:20pt; position:absolute; top:30px; left:30px; z-index:1; }

.popredi1 {font-family: Desdemona, Impact, Arial; font-size: 15pt; line-height: 20pt; color:red; margin:20pt; position:absolute; top:65px; left:70px; z-index:2; }

.popredi2 {font-family: Desdemona, Impact, Arial; font-size: 15pt; line-height: 20pt; font-weight:bold; color:darkred; margin:20pt; position:absolute; top:100px; left:130px; z-index:3; }
Začátek
Předchozí