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

Transkript

1 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. 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 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 small-caps 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 relativně k rodičovské velikosti písma velikost písma font [font-style font-variant fontweight]? font-size [/ li-height]? font-family použitelné pro font-size a liheight komplexní nastavení písma

2 i pro nastavení barev a pozadí 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é vztahují se k 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 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, li-through=čára přes, blink=blikání verticalalign baseli sub super top text-top middle bottom text-bottom 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 délka procento blokové velikost odstavcové odrážky (odsazení první řádky odstavce) li-height číslo délka procento 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)

3 i boxů margin-top no velikost horního okraje marginright velikost pravého okraje marginbottom velikost spodního okraje margin-left velikost levého okraje margin [ ] {1,4} komplexní nastavení velikosti okrajů 4 y: nahoře, vpravo,, 3 y: nahoře, vpravo a, 2 y: nahoře a, vpravo a 1 : nohoře a vpravo a a paddingtop délka procento velikost vnitřního horního okraje paddingright délka procento velikost vnitřního pravého okraje paddingbottom délka procento velikost vnitřního dolního okraje paddingleft délka procento velikost vnitřního levého okraje padding [délka procento] {1,4} komplexní nastavení velikostí vnitřního okraje 4 y: nahoře, vpravo,, 3 y: nahoře, vpravo a, 2 y: nahoře a, vpravo a 1 : nohoře a vpravo a a border-topwidth thin thick délka -- šířka horní části borderright-width thin thick délka -- šířka pravé části borderbottomwidth thin thick délka -- šířka spodní části

4 border-leftwidth thin thick délka -- šířka levé části borderwidth [thin thick délka] {1,4} -- komplexní nastavení šířky 4 y: nahoře, vpravo,, 3 y: nahoře, vpravo a, 2 y: nahoře a, vpravo a 1 : nohoře a vpravo a a bordercolor barva {1,4} vlastnosti color -- barva borderstyle [no dotted dashed solid double groove ridge inset outset] {1,4} no -- nastavení tvaru : 4 y: nahoře, vpravo,, 3 y: nahoře, vpravo a, 2 y: nahoře a, vpravo a 1 : nohoře a vpravo a a border-top -- nastavení horní části borderright -- nastavení pravé části borderbottom -- nastavení spodní části border-left -- nastavení levé části border border-width borderstyle barva -- komplexní nastavení width blokové a nahrazované šířka height délka 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=, right=vpravo, both=na obou stranách

5 Klasifikační vlastnosti 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 list-styletype disc circle square decimal lower-roman upper-roman loweralpha upper-alpha no disc, druh odrážek v seznamech list-styleimage URL no no, obrázek použitý jako odrážka v seznamu list-styleposition inside outside outside, umístění odrážky: outside=před textem, inside=v textu položky seznamu list-style list-style-type liststyle-position liststyle-image implicitní y, komplexní nastavení vzhledu položek seznamu Řízení pozice position absolute relative static static způsob pozicování ; static odpovídá běžnému formátování left -- top -- posunutí vpravo; záporná posu posunutí dolů; záporná posu nahoru width height blokové, nahrazované a s position: absolute (výšce) šířka a výška clip rect([délka ] [délka ] [délka ] [délka ]) s position: absolute -- definice obdélníkové části, která bude viditelná (standardně je viditelný celý element) overflow no clip scroll no s relativní bo absolutní pozicí -- 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

6 z-index číslo s relativní bo absolutní pozicí -- pozice na pseudoose z visibility inherit visible hidden inherit pro inherit -- viditelnost : visible = viditelný, hidden = viditelný Použitá syntaxe A B Právě jedna z entit A a B A B Alespoň jedna z entit A a B v libovolném pořadí [... ] Skupiny? 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 Jednotky 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. Relativní jednotky: em ex px Výška aktuálního písma. Odpovídá šířce písme 'M'. Výška písme 'x'. Pixely -- 1 pixel odpovídá jednomu bodu obrazovky. Absolutní jednotky: in cm mm pt pc Palce. 1 in = 2,54 cm = 72 pt Centimetry. Milimetry. 1 mm = 1 cm Body. 1 pt = 1/72 in = 1/12 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é y se bude absolutní velikost odvíjet. Většinou se jedná o šířku. Čísla Číslo je celé bo desetinné s bo bez znaménka.

7 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štvá), 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 #rrggbb př. #f je červená 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 klasické patkové písmo (např. Times) sans-serif cursive fantasy monospace bezpatkové písmo (např. Helvetica bo Arial) kurzíva ozdobné písmo proporcionální písmo (např. Courier) 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).