Přehled vlastností stylů

Transkript

1 Přehled stylů Styly jsou ds jefektivnějším způsobem, jak ovládat grafický vzhled strák. Definují přes padesát, které slouží k vizuálních atributů elementů. V následujících tematicky rozčleněných tabulkách nalezte přehledně uspořádané tyto vlastnosti. Poslední tabulka obsahuje i přehled filtrů, které lze použít v IE 4.. Informace v tabulkách jsou uspořádány jednotně. První sloupec obsahuje název vlastnosti. Druhý sloupec zachycuje přípustné vlastnosti. Při popisu používáme některé speciální operátory, jejichž význam vysvětluje tabulka Přehled syntaktických operátorů. Operátor A B A B Přehled syntaktických operátorů Význam Právě jedna z entit A a B Alespoň jedna z entit A a B v libovolném pořadí [... ] Skupiny A? Entita A je povinná A {m, n} Entita A se opakuje jméně m-krát a jvíce n-krát Třetí sloupec uvádí u -- tj. tu, která se pro danou vlastnost použije, pokud ní ve stylu změněna. Další sloupec vymezuje, na které se daná vlastnost vztahuje. Většinou se vlastnost vztahuje na, ale i zde existují jisté výjimky. Rozdělíme si proto do tří skupin: Blokové jsou ty, před i za kterými je zalomena řádka (např. H1 a P). Inli jsou běžnou součástí textu na řádce. Nemají okolo sebe žádné zalomení řádek (např. STRONG). Nahrazované jsou ty, které jsou nahrazeny nějakým objektem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. IMG a OBJECT). Pátý sloupec nás informuje o tom, zda se vlastnost dědí i pro vnořené. Následuje sloupec s informací o způsobu interpretace. Ty se totiž u každého mohou vztahovat k něčemu jinému. Poslední sloupec stručně popisuje danou vlastnost. Hodnoty mohou mít různé jednotky. V tabulkách jsou tyto vytištěny kurzívou. Jejich popis a syntaxi nyní rozebereme. Délkové jednotky Délkové údaje se zapisují jako celá bo desetinná čísla s bo bez znaménka. Dvojice písmen identifikující jednotky musí být připojena ihd za číslem. Jednotky existují dvou druhů -- relativní a absolutní. Relativní se vždy odvozují od velikosti aktuálního písma. Relativní jednotky em Výška aktuálního písma. Odpovídá šířce písme `M'. ex Výška písme `x'.

2 px Pixely -- 1 pixel odpovídá jednomu bodu obrazovky. Absolutní jednotky in Palce. 1 in = 2,54 cm = 72 pt cm Centimetry. mm Milimetry. 1 mm = 1 cm pt Body. 1 pt = 1/72 in = 1/12 pc pc Pica. 1 pc = 12 pt Procenta Procenta se zapisují jako celá bo desetinná čísla s bo bez znaménka, za kterými ihd následuje znak `%'. Hodnoty zadané jako procento se relativně vztahují k nějaké jiné ě, od které se odvodí absolutní velikost. Proto si vždy musíme uvědomit, od které se bude absolutní velikost odvíjet. Většinou se jedná o šířku. Čísla Číslo je celé bo desetinné s bo bez znaménka. Barvy Při specfikování barev máme několik možností. Tou první je použití jména barvy. Jména barev jsou stejná jako v HTML: aqua (jasná modrozelená), black (černá), blue (modrá), fuchsia (anilínová červeň), gray (šedivá), green (zelená), lime (citrónově zelená), maroon (kaštanová), navy (tmavá modř), olive (olivová), purple (purpurová), red (červená), silver(stříbrná), teal (tmavá modrozelená), white (bílá), yellow (žlutá). Druhou možností je zapsat barvu přímo v RGB notaci pomocí červené, zelené a modré složky barvy. Jsou celkem čtyři možnosti: #rgb př. #f je červená #rrggbb př. #ffff je žlutá rgb(r, g, b) r, g, b jsou od do 255 rgb(r%,g%,b%) r, g, b jsou od do 1 URL Zápis URL adres se provádí funkcionálním způsobem. Vše nám jlépe ilustruje příklad: url( Závorky, čárky, mezery a uvozovky musíme zapsat tak, že jim předřadíme zpětné lomítko `\' (např. `\('). Seznam písem Písma zadáváme jako čárkami odděleněný seznam jejich názvů. Písma uvedná dříve mají větší prioritu. Jako poslední písmo v seznamu bychom měli vždy uvést název obecné rodiny písma. Obecné rodiny písma

3 serif klasické patkové písmo (např. Times) sans-serif bezpatkové písmo (např. Helvetica bo Arial) cursive fantasy monospace Vlastnost font-style fontfamily fontvariant fontweight font-size font Vlastnost použitelné pro font-size a liheight wordspacing letterspacing textdecoration verticalalign kurzíva (např. Script) ozdobné písmo proporcionální písmo (např. Courier) Možné seznam písem italic oblique small-caps bold bolder lighter xx-small x-small small medium large x-large xx-large larger smaller délka procento [font-style fontvariant font-weight]? font-size [/ liheight]? font-family Možné délka délka no [underli overli li-through blink] baseli sub super top text-top Vlastnosti písma záleží na prohlížeči = 4 medium no baseli Aplikuje se na Vlastnosti textu Aplikuje se na inli rodina písma ano ano relativně k rodičovské velikosti písma k ě li-height styl písma: = normální, italic = kurzíva, oblique = skloněné varianta písma: normální bo kapitálky duktus písma (tj. "jak bude písmo silné") velikost písma písma o kolik se má zvětšit mezislovní mezera o kolik se má zvětšit mezera mezi jednotlivými písmeny "ozdoba" textu: underli = podtržení, overli = čára nad, lithrough = čára přes, blink = blikání vertikální zarovnání

4 text-align middle bottom text-bottom procento capitalize uppercase lowercase no left right center justify no záleží na prohlížeči text-indent délka procento li-height Vlastnost color texttransform backgroundcolor backgroundimage backgroundrepeat backgroundattachment backgroundposition background číslo délka procento Možné ano ano relativně k velikosti písma Vlastnosti pro barev a pozadí záleží na prohlížeči transparent transparent URL no repeat repeat-x repeat-y no-repeat scroll fixed no repeat scroll [procento délka] {1,2} [top center % % (odpovídá bottom] top left) [left center right] background-color backgroundimage background-repeat Aplikuje se na a nahrazované převod textu na: capitalize = kapitálky, uppercase = velká písmena, lowercase = malá písmena zarovnání textu: left = na levý praporek, right = na pravý praporek, center = centrování, justify = do bloku velikost odstavcové odrážky (odsazení první řádky odstavce) výška řádky; číslo udává násobek velikosti písma (většinou by měl být alespoň 1.2) pozadí k velikosti vlastního pouze u backgroundposition obrázek na pozadí směry, ve kterých se bude obrázek na pozadí opakovat pozadí se pohybuje se stránkou (scroll) bo je jako přibité (fixed) poloha obrázku na pozadí (udává se X- a Y-pozice) pozadí

5 Vlastnost margin-top margin-left margin padding Možné [délka procento ] {1,4} délka procento délka procento délka procento délka procento [délka procento] {1,4} backgroundattachment backgroundposition marginright marginbottom paddingtop paddingright paddingbottom paddingleft border-topwidth thick thin medium délka borderright-width thin medium thick délka borderbottomwidth thin medium thick délka medium medium medium Vlastnosti boxů Aplikuje se na velikost horního okraje velikost pravého okraje velikost spodního okraje velikost levého okraje velikosti okrajů velikost vnitřního horního okraje velikost vnitřního pravého okraje velikost vnitřního spodního okraje velikost vnitřního levého okraje velikostí vnitřního okraje šířka horní části šířka pravé části šířka spodní border-left- thin medium medium šířka levé části

6 width thick délka border-top borderwidth bordercolor borderstyle borderright borderbottom border-left border width [thin medium thick délka] {1,4} {1,4} [no dotted dashed solid double groove ridge inset outset] {1,4} border-top-width border-top-width border-top-width border-top-width border-width vlastnosti color no height délka float clear left right no no left right both no no a nahrazované a nahrazované Klasifikační vlastnosti šířky tvaru horní pravé spodní levé šířka výška umístění plovoucího objektu: left = vlevo, right = vpravo, no = normální objekt čekání na skončení plovoucích elementů: left = vlevo, right = vpravo, both = na obou stranách

7 Vlastnost display whitespace list-styletype list-styleimage list-styleposition list-style Vlastnost position left top width height Možné block inli list-item no pre nowrap disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha no URL no inside outside list-style-type list-style-position list-style-image Možné absolute relative static délka procento délka procento délka procento block disc no outside Aplikuje se na, které mají display: list-item, které mají display: list-item, které mají display: list-item, které mají display: list-item druh Vlastnosti pro určení pozice Aplikuje se na static, nahrazované a s position: absolute (výšce) způsob práce s mezerami: = normální, pre = mezery a konce řádek se zachovají, nowrap = text se bude zalamovat do řádek druh odrážek v seznamech obrázek použitý jako odrážka v seznamu umístění odrážky: outside = před textem, inside = v textu položky seznamu vzhledu položek seznamu způsob umístění ; static odpovídá běžnému formátování posunutí vpravo; záporná posu vlevo posunutí dolů; záporná posu nahoru šířka a výška clip definice

8 overflow rect([délka ] [délka ] [délka ] [délka ]) no clip scroll no z-index číslo visibility inherit visible hidden s position: absolute s relativní bo absolutní pozicí s relativní bo absolutní pozicí inherit pro inherit Filtry a jejich parametry Filtr Parametry Alpha Blur Míra průhlednosti objektu. Lze vytvářet i transparentní přechody (gradienty). Vytvoří efekt objektu pohybujícího se vysokou rychlostí jeho rozmazáním v jednom směru. -- obdélníkové části, která bude viditelná (standardně je viditelný celý element) způsob zobrazení elementů, jejichž obsah se vejde do vyhrazeného prostoru: no = obsah přeteče, clip = obsah bude oříznut, scroll = po obsahu půjde skrolovat pozice na pseudoose z viditelnost : visible = viditelný, hidden = viditelný; Opacity=číslo Průhlednost ( = úplně průhledná, 1 = průhledná). FinishOpacity=číslo Průhlednost (--1). Style=číslo Určení tvaru transparentního přechodu: (jednotný), 1 (liární), 2 (radiální) a 3 (obdélníkový). StartX=x Souřadnice x začátku přechodu. StartY=y Souřadnice y začátku přechodu. FinishX=x Souřadnice x konce přechodu. FinishY=y Souřadnice y konce přechodu. Add=boolean 1 = do rozmazaného obrázku se přidá i původní obrázek; = výsledek se bude kombinovat s originálním obrázkem. Direction=úhel Úhel, kterým bude směrovat šmouha. Úhel se zadává ve stupních a možné jsou pouze násobky 45. Strength=číslo Síla rozmazání.

9 Chroma DropShadow FlipH FlipV Glow Gray Invert Light Mask Shadow Wave XRay Určitou barvu objektu vykreslí jako průhlednou. Filtr vytvoří k objektu stín a tím i zdánlivý efekt, že se objekt vznáší nad stránkou. Vytvoří dojem, že objekt svítí tím, že specifikovanou barvou obkreslí okraje objektu. Horizontálně převrátí objekt. Vertikálně převrátí objekt. Color= Barva, která bude transparentní. Udává se ve tvaru #RRGGBB. Color= Barva stínu ve tvaru #RRGGBB. OffX=číslo Posunutí stínu oproti originálnímu objektu ve směru osy x. OffY=číslo Posunutí stínu oproti originálnímu objektu ve směru osy y. Positive=boolean 1 = stín je proveden pouze pro transparentní části objektu; = stín je vytvořen pro body obrázku. Color= Barva obrysu ve tvaru #RRGGBB. Strength=číslo Intenzita obrysu (1--255). Všechny barvy v objektu převede na odstíny šedi. Provede inverzi jasu, sytosti a světlosti v objektu. Simuluje efekt nasvícení objektu světelným zdrojem. Vytvoří z objektu transparentní masku. Vytvoří k objektu jeho stín. Zdeformuje objekt do tvaru sinusoidy. Světelné zdroje se přidávají pomocí metod, lze je nastavit jako parametry. Color= Barva, kterou se vykreslí původně transparentí části objektu. Opět ve tvaru #RRGGBB. Color= Barva stínu zadaná ve tvaru #RRGGBB. Direction=úhel Úhel, kterým bude směrovat stín. Úhel se zadává ve stupních a možné jsou pouze násobky 45. Add=boolean 1 = do zvlněného obrázku se přidá i původní obrázek; = výsledek se bude kombinovat s originálním obrázkem. Freq=číslo Počet vln v deformaci. Light=číslo Světelná intenzita vlny (--1). Phase=číslo Fázové posunutí začátku vlny. Udává se od do 1 jako procento z jednoho úplného průběhu sinusoidy. Strength=číslo Intenzita efektu. Barevnou hloubku objektu sníží na 1 -- tj. vytvoří černobílý obrázek, který zachycuje obrysy v původním objektu.