11. Kaskádové styly Další příklad ukazuje, jak je možné využít nastavení velikosti vnějších okrajů k ovládání pozice textu. Pokud totiž vhodně nastavíte velikosti okrajů, může se stát, že se některé odstavce budou i překrývat. To je pochopitelně ve většině případů nežádoucí, ale najdou se i situace, kdy lze díky tomu vytvořit velmi působivé stránky.
Všimněte si, že v ukázce je velikost okraje u odstavce se jmény zpěváků nastavena na zápornou hodnotu. To způsobí, že se odstavec bude překrývat s předchozím textem. Ukázka je názorným příkladem toho, jak lze tuto skutečnost využít. Věřili byste tomu, že podobnou stránku, jakou ukazuje obrázek, je možné vytvořit bez použití grafiky?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>The Beatles</TITLE> <STYLE TYPE="text/css"> <!-P { font-family: "Garamond"; font-weight: bold; font-size: medium; } #background { color : #99CCCC; font : 100px impact; text-align : center; } #foreground { color : #000000; font : italic 30px Georgia; margin-top : -68px; text-align : center; } --> </STYLE> </HEAD>
<BODY> <P ID="BACKGROUND"> The Beatles</P> <P ID="FOREGROUND"> John, Paul, George & Ringo </P>
<P>I k takhle pěknému efektu lze využít kaskádové styly. </P> </BODY> </HTML>
98
HTML – tvorba jednoduchých internetových stránek
Ukázka elektronické knihy, UID: KOS180821
11. Kaskádové styly
Digitální fotografie – tisk, úprava a prohlížení v ACDSee
11.5 Kaskádové styly druhé úrovně CSS2
Jsou to: • border-bottom-color Nastavuje
barvu spodního okraje elementu.
Kaskádové styly se postupně staly velmi populární a rozšířenou technologií. A to i přesto, že některé prohlížeče měly z počátku problémy s jejich interpretací. V roce 1998 zveřejnilo konsorcium W3C definici kaskádových stylů druhé úrovně. Tyto styly značně rozšiřují možnosti původních kaskádových stylů. Bohužel dosud (červenec 2006) má většina prohlížečů se zobrazováním CSS2 značné problémy. Dokonce i některé prohlížeče, které se honosí plnou podporou CSS2, ve skutečnosti nezobrazí vše správně. Doufejme tedy, že se situace v dohledné době zlepší, a proto si zde stručně ukážeme některé zajímavé vlastnosti CSS2. Upozornění Ještě jednou upozorňuji, že vlastnosti, které naleznete v následujícím přehledu, nemusí fungovat ve vašem oblíbeném prohlížeči. Okraje a rámečky V CSS2 se objevily některé vlastnosti, které rozšiřují možnosti ráměčků a okrajů kolem elementů. HTML – tvorba jednoduchých internetových stránek
• border-bottom-style Nastavuje
styl spodního okraje elementu.
• border-left-color Nastavuje barvu
levého okraje elementu.
• border-left-style Nastavuje styl
levého okraje elementu.
• border-right-color Nastavuje bar-
vu pravého okraje elementu.
• border-right-style Nastavuje styl
pravého okraje elementu.
• border-top-color Nastavuje barvu
horního okraje elementu.
• border-top-style Nastavuje styl
horního okraje elementu.
Písmo K nastavení písma můžete použít následující vlastnosti. • font-size-adjust Nastavuje poměr mezi šířkou a výškou písma. Tento poměr se určí vydělením velikosti písma jeho šířkou. • font-stretch Vlastnost udává, zda se použije zúžená, normální nebo rozšířená verze daného písma. • text-shadow Tato vlastnost nastavuje použití stínovaného písma. 99
Ukázka elektronické knihy, UID: KOS180821
11. Kaskádové styly Vizuální vlastnosti Vzhled elementů můžete pomocí CSS2 upravit použitím následujících vlastností (jsou zde vybrány jen ty nejzajímavější): • bottom Nastavuje polohu spodního okraje aktuálního rámečku vzhledem k bloku, v němž je umístěn. • clip Definuje viditelnou oblast elementu. • cursor Definuje kurzor myši, který se použije, pokud myš přejede nad elementem. • height Udává výšku zadaného elementu. • left Nastavuje polohu levého okraje. • max-height Nastavuje maximální výšku elementu. • max-width Udává maximální šířku elementu. • min-height Udává minimální výšku elementu. • min-width Nastavuje minimální šířku elementu. • outline-color Nastavuje barvu obrysu zadaného objektu. • outline-style Udává styl obrysu zadaného objektu. • outline-width Definuje šířku obrysu zadaného objektu. • overflow Vlastnost udává, zda je obsah elementu viditelný, když přeteče mimo okraje. • right Vlastnost nastavuje polohu pravého okraje elementu. • top Vlastnost nastavuje polohu horního okraje elementu. • vertical-align Vlastnost nastavuje svislé zarovnávání elementu. • visibility Udává, zda bude element viditelný nebo skrytý. • z-index Vlastnost nastavuje pořadí vrstvy v ose z, na níž bude element umístěn.
100
Pseudotřídy podruhé CSS2 zavádějí také některé nové pseudotřídy: • :first Nastaví zvláštní styl pro první element na stránce. • :first-child Použije zadaný styl na první vnořený element aktuálního elementu. • :focus Nastaví styl u aktivního elementu. • :lang Nastaví styl pro elementy odpovídající určitému jazyku. (souvisí s používáním XML) • :left Nastaví styl pro elementy na levé straně stránky. • :right Nastaví styl pro elementy na pravé straně stránky. Další vlastnosti CSS2 Definice kaskádových stylů je mnohem rozsáhlejší, než se vejde do této tenké knížky. A proto, jestli vás kaskádové styly zaujaly, můžete jejich kompletní popis najít na webových stránkách konsorcia W3C, které mají adresu http://www.w3.org/ TR/CSS21/.
HTML – tvorba jednoduchých internetových stránek
Ukázka elektronické knihy, UID: KOS180821