Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)

Transkript

1 Stránka č. 1 z 9 Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia W3C Cascading Style Sheets, level 1, jsou však uspořádány do přehledných tabulek. Jiří Kosek, 1997 Obsah i písma i pro nastavení barev a pozadí i textu i boxů Klasifikační vlastnosti Řízení pozice (Zatím se nachází ve fázi vývoje; z formálního hlediska se jedná o standard.) Použitá syntaxe Jednotky Druhy elementů i písma Možné Aplikuje se na fontfamily seznam písem záleží na prohlížeči rodina písma font-style italic oblique styl písma: =normální, italic=kurzíva, oblique=skloněné fontvariant smallcaps varianta písma: normální bo kapitálky fontweight bold bolder lighter duktus písma (tj. "jak bude písmo silné") font-size xx-small x-small small large x-large xx-large larger smaller délka procento ano relativně k rodičovské velikosti písma velikost písma [font-style font- použitelné pro

2 Stránka č. 2 z 9 font variant fontweight]? font-size [/ li-height]? font-family ano font-size a liheight komplexní nastavení písma i pro nastavení barev a pozadí Možné Aplikuje se na color barva záleží na prohlížeči barva backgroundcolor barva transparent transparent barva pozadí backgroundimage URL no no obrázek na pozadí backgroundrepeat repeat repeat-x repeat-y norepeat repeat směry, ve kterých se bude obrázek na pozadí opakovat backgroundattachment scroll fixed scroll pozadí se pohybuje se stránkou (scroll) bo je jako přibité (fixed) backgroundposition [procento délka] {1,2} [top center bottom] [left center right] % % (odpovídá top left) blokové a nahrazované velikosti vlastního poloha obrázku na pozadí (udává se X a Y pozice) background background-color background-image background-repeat background-attachment background-position pouze u backgroundposition komplexní nastavení pozadí i textu Možné Aplikuje se na wordspacing délka o kolik se má zvětšit mezislovní mezera letterspacing délka o kolik se má zvětšit mezera mezi jednotlivými písmeny textdecoration no [underli overli li-through blink] no "ozdoba" text: underli=podtržení, overli=čára nad, lithrough=čára přes, blink=blikání

3 Stránka č. 3 z 9 verticalalign baseli sub super top text-top middle bottom textbottom procento baseli inli vztahují se na u liheight vertikální zarovnání texttransform capitalize uppercase lowercase no no převod textu na: capitalize=kapitálky, uppercase=velká písmena; lowercase=malá písmena text-align left right center justify záleží na prohlížeči blokové zarovnání textu: left=na levý praporek, right=na pravý praporek, center=centrování, justify=do bloku text-indent blokové ano velikost odstavcové odrážky (odsazení první řádky odstavce) li-height číslo ano relativně k velikosti písma výška řádky; číslo udává násobek velikosti písma (většinou by měl být alespoň 1.2) i boxů Možné Aplikuje se na margintop no velikost horního okraje marginright velikost pravého okraje marginbottom velikost spodního okraje marginleft velikost levého okraje margin [délka procento auto] {1,4} komplexní nastavení velikosti okrajů 4 : nahoře, vpravo, dole, vlevo 3 : nahoře, vpravo a vlevo, dole 2 : nahoře a dole, vpravo a vlevo 1 : nohoře a vpravo a dole a vlevo

4 Stránka č. 4 z 9 paddingtop velikost vnitřního horního okraje paddingright velikost vnitřního pravého okraje paddingbottom velikost vnitřního dolního okraje paddingleft velikost vnitřního levého okraje padding [délka procento] {1,4} komplexní nastavení velikostí vnitřního okraje 4 : nahoře, vpravo, dole, vlevo 3 : nahoře, vpravo a vlevo, dole 2 : nahoře a dole, vpravo a vlevo 1 : nohoře a vpravo a dole a vlevo bordertop-width thin thick délka šířka horní části rámečku borderrightwidth thin thick délka šířka pravé části rámečku borderbottomwidth thin thick délka šířka spodní části rámečku borderleft-width thin thick délka šířka levé části rámečku borderwidth [thin thick délka] {1,4} komplexní nastavení šířky rámečku 4 : nahoře, vpravo, dole, vlevo 3 : nahoře, vpravo a vlevo, dole 2 : nahoře a dole, vpravo a vlevo 1 : nohoře a vpravo a dole a vlevo bordercolor barva {1,4} vlastnosti color barva rámečku borderstyle [no dotted dashed solid double groove ridge inset no nastavení tvaru rámečku: 4 : nahoře, vpravo, dole, vlevo 3 : nahoře, vpravo a vlevo, dole 2 : nahoře a dole, vpravo a vlevo

5 Stránka č. 5 z 9 outset] {1,4} 1 : nohoře a vpravo a dole a vlevo bordertop border-top-width border-style barva nastavení horní části rámečku borderright border-top-width border-style barva nastavení pravé části rámečku borderbottom border-top-width border-style barva nastavení spodní části rámečku borderleft border-top-width border-style barva nastavení levé části rámečku border border-width border-style barva komplexní nastavení rámečku width auto blokové a nahrazované šířka height délka auto blokové a nahrazované výška float left right no no left, right = plovoucí objekt (např. obrázek obtékaný textem), no = normální objekt clear no left right both no čekání na skončení plovoucích elementů: left=vlevo, right=vpravo, both=na obou stranách Klasifikační vlastnosti Možné Aplikuje se na display block inli list-item no block druh whitespace pre nowrap blokové způsob práce s mezerami: =normální, pre=mezery se zachovají, nowrap=text se bude zalamovat do řádek disc circle

6 Stránka č. 6 z 9 list-styletype square decimal lower-roman upperroman lower-alpha upperalpha no disc, které mají display: list-item druh odrážek v seznamech list-styleimage URL no no, které mají display: list-item obrázek použitý jako odrážka v seznamu list-styleposition inside outside outside, které mají display: list-item umístění odrážky: outside=před textem, inside=v textu položky seznamu list-style list-style-type list-style-position list-styleimage, které mají display: list-item komplexní nastavení vzhledu položek seznamu Řízení pozice Možné Aplikuje se na position absolute relative static static způsob pozicování ; static odpovídá běžnému formátování left auto posunutí vpravo; záporná posu vlevo top auto posunutí dolů; záporná posu nahoru width height auto blokové, nahrazované a s position: absolute vztahují se k (výšce) šířka a výška clip auto rect ([délka ] [délka ] [délka ] [délka ]) auto s position: absolute definice obdélníkové části, která bude viditelná (standardně je viditelný celý element) způsob zobrazení elementů, jejichž obsah se vejde do vyhrazeného prostoru:

7 Stránka č. 7 z 9 overflow no clip scroll no s relativní bo absolutní pozicí no = obsah přeteče, clip = obsah bude oříznut, scroll = po obsahu půjde skrolovat z-index auto číslo auto s relativní bo absolutní pozicí pozice na pseudoose z visibility inherit visible hidden inherit pro inherit -- viditelnost : visible = viditelný, hidden = viditelný Použitá syntaxe Jednotky Délkové jednotky A B A B [... ] Skupiny Právě jedna z entit A a B Alespoň jedna z entit A a B v libovolném pořadí? Předcházející entita je povinná {A,B} Předcházející entita se opakuje jméně A-krát a jvíce B-krát 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. Relativní jednotky: em ex px Výška aktuálního písma. Odpovídá písme 'M'. Výška písme 'x'. Pixely -- 1 pixel odpovídá jednomu bodu obrazovky. Absolutní jednotky: in cm mm pt Palce. 1 in = 2,54 cm = 72 pt Centimetry. Milimetry. 1 mm = 1 cm Body. 1 pt = 1/72 in = 1/12 pc

8 Stránka č. 8 z 9 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. Pokud používáme procenta, musíme si vždy 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 jsou stejná jako v HTML a jsou následující: 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 si jlépe ukážeme na příkladě: url( Závorky, čárky, mezery a uvozovky musíme zapsat tak, že jim předřadíme zpětné lomítko '\'. 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 obecný název písma: serif sans-serif cursive fantasy monospace klasické patkové písmo (např. Times) bezpatkové písmo (např. Helvetica bo Arial) kurzíva ozdobné písmo proporcionální písmo (např. Courier)

9 Stránka č. 9 z 9 Druhy elementů 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 obsahem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. IMG a OBJECT). Stránku připravil Jiří Kosek, xkosj6@vse.cz Poslední modifikace: