CSS - stručná reference kaskádových stylů

Transkript

1 1. font a parametry písma font, font-family, font-size, font-style, font-variant, font-weight 1.1 font Nastavuje většinu parametrů textu najednou. Jednotlivé atributy naleznete v kapitolách a line-height v kapitole 3.2 font: [ font-style ] [ font-variant ] [ font-weight ] font-size [ line-height ] font-family 1.2 font-family Nastavuje typ fontu. Název fontu je klasické jméno fontu (např. Arial), obecný název je typ fontu (viz tabulka níže). Zadat lze jeden název, nebo více názvů oddělených čárkou. V případě, že prohlížeč daný font nenalezne, zkusí použít další font ze seznamu. font-family: název fontu obecný název [, název fontu obecný název... ] Obecné názvy fontů: serif patkové písmo (např. Times) sans-serif bezpatkové písmo (např. Helvetica) cursive skloněné písmo (např. Zapf-Chancery) fantasy ozdobné písmo (např. Western) monospace neproporcionální písmo (např. Courier) 1.3 font-size Nastavuje velikost písma. Velikost lze nastavit čtyřmi různými způsoby. font-size: absolutní velikost relativní velikost výška procenta absolutní relativní výška procenta nabývá jedné z hodnot: xx-small, x-small, small, medium, large, x-large, xx-large, skutečnou velikost určí prohlížeč poměrná velikost ke zděděné velikosti - nabývá dvou různých hodnot: larger, smaller skutečná výška písma - nejčastěji se zadává v bodech (např. 12pt), nebo v pixelech (20px) poměrná část velikosti rodičovského elementu 1.4 font-style Nastavuje sklon písma. Styl italic je klasická kurzíva, oblique je umělé skosení rovného písma. font-style: normal italic oblique 1.5 font-variant Umožňuje zobrazit písmo KAPITÁLKAMI. font-variant: normal small-caps 1.6 font-weight Nastavuje tučnost písma. Šířka normal odpovídá šířce 400, bold šířce 700. Varianty bolder a lighter upravují velikost relativně vůči velikosti zděděné. font-weight: normal bold bolder lighter barva popředí a parametry pozadí background, background-attachment, background-color, background-image, background-position, background-repeat, color 2.1 background Nastavuje všechny parametry pozadí najednou. Jednotlivé parametry jsou vedeny v kapitolách background: [ background-color ] [ background-image ] [ background-repeat ] [ background-attachment ] [ background-position ] Pozn: jednotlivé parametry jsou nepovinné, ale alespoň jeden musí být nastaven 2.2 background-attachment Nastavuje, zda bude obrázek na pozadí scrollovat s textem, nebo zda bude obrázek umístěn pevně vzhledem k oknu prohlížeče. background-attachment: scroll fixed Martin Kruliš pouze ke studijním účelům strana 1 z 8

2 2.3 background-color Nastavuje barvu pozadí. background-color: barva transparent 2.4 background-image Specifikuje obrázek na pozadí. background-image: url none 2.5 background-position Určuje pozici obrázku na pozadí. Tato pozice je určena relativně proti levému hornímu rohu dokumentu, nebo okna prohlížeče v závislosti na nastavení atributu background-attachment (viz 2.2). Souřadnice lze zadat jednak číselně (v pixelech - px, nebo procentech - %), nebo pomocí klíčových slov: top (nahoru), center (na střed), bottom (dolů) a left (doleva), center (na střed), right (doprava). background-position: x-souřadnice y-souřadnice [ top center bottom ] [ left center right ] 2.6 background-repeat Určuje, zda se bude obrázek na pozadí opakovat (jako dlaždice). background-repeat: repeat repeat-x repeat-y no-repeat 2.7 color Nastavuje barvu popředí (touto barvou je např. zobrazen text). color: barva 3. zarovnání a vlastnosti textu letter-spacing, line-height, text-align, text-decoration, text-indent, text-transform, vertical-align 3.1 letter-spacing Nastavuje velikost mezer mezi písmeny (prokládání písma). letter-spacing: normal velikost 3.2 line-height Nastavuje velikost mezer mezi řádky. Způsob zadávání číslo je desetinné číslo zakončené znakem procenta (číslo 1.2% odpovídá 1.2 násobku výchozí velikosti - stejně tak jako 120 procent) line-height: normal číslo velikost procenta 3.3 text-align Určuje způsob zarovnání textu: doleva (left), doprava (right), na střed (center) a do bloku (justify) text-align: left right center justify 3.4 text-decoration Nastavuje dodatečnou dekoraci textu: podtržení (underline), s čárou nad (overline), přeškrtnuté (line-through) a blikající (blink) text-decoration: none underline overline line-through blink 3.5 text-indent Nastavuje velikost horizontálního odsazení před prvním řádkem textu uvnitř bloku (např. uvnitř tagu P, DIV ). Odsazení se aplikuje pouze před úplně prvním řádkem, nikoli po zalomení tagem BR. Velikost odsazení může být i záporná. text-indent: velikost procenta Martin Kruliš pouze ke studijním účelům strana 2 z 8

3 3.6 text-transform Nastavuje změnu velikosti znaků: každé první písmeno velké (capitalize), na velká písmena (uppercase) a na malá písmena (lowercase). text-transform: capitalize uppercase lowercase none Pozn: velkými písmeny je myšleno velká písmena abecedy (A, B, C ), nikoliv velikost fontu 3.7 vertical-align Vertikální umístění textu: dolní index (sub), nebo horní index (super). vertical-align: sub super 4. okraje, mezery, odsazení a obtékání margin, margin-bottom, margin-left, margin-right, margin-top, padding, padding-bottom, padding-left, padding- right, padding-top, clear, float, height, width, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width 4.1 margin (margin-bottom, margin-left, margin-right, margin-top) Nastavuje velikost vnější mezery (mezi okrajem a okolními elementy). Tento atribut akceptuje zadání jedné až čtyř hodnot. 1 hodnota určuje okraje pro všechny čtyři strany 2 hodnoty 1. je pro horní a dolní okraj a 2. pro levý a pravý okraj 3 hodnoty 1. je pro horní okraj, 2. pro levý a pravý a 3. hodnota je pro spodní okraj 4 hodnoty v pořadí horní, pravý, dolní a levý okraj (pomůcka: po směru hod. ručiček a začínáme na 12 hod.) Pozn: jsou povoleny i záporné hodnoty s výjimkou horního a dolního okraje, v případě, že je objekt zarovnán v řádku. margin: [ velikost procenta auto ] {1-4} Další varianty - margin-bottom (dolní okraj), margin-left (levý okraj), margin-right (pravý okraj), margin-top (horní okraj) nastavují velikost mezery pouze na příslušné straně objektu. margin-bottom: [ velikost procenta auto ] 4.2 padding (padding-bottom, padding-left, padding-right, padding-top) Nastavuje velikost vnitřní mezery (mezi okrajem a vnitřními elementy). Tento atribut akceptuje zadání jedné až čtyř hodnot. 1 hodnota určuje okraje pro všechny čtyři strany 2 hodnoty 1. je pro horní a dolní okraj a 2. pro levý a pravý okraj 3 hodnoty 1. je pro horní okraj, 2. pro levý a pravý a 3. hodnota je pro spodní okraj 4 hodnoty v pořadí horní, pravý, dolní a levý okraj (stejně jako u atributu margin) Pozn: záporné hodnoty nejsou povoleny. padding: [ velikost procenta ] {1-4} Další varianty - padding-bottom (dolní okraj), padding-left (levý okraj), padding-right (pravý okraj), padding-top (horní okraj) nastavují velikost mezery pouze na příslušné straně objektu. padding-top: [ velikost procenta ] 4.3 clear Nastavuje stranu, kterou ostatní objekty nesmí obtékat tento objekt. Nastavení na none znamená, že objekty můžou obtékat po obou stranách, left znamená, že objekty nesmí obtékat vlevo (ale můžou vpravo), both znamená, že objekty nesmí obtékat nikde. clear: none left right both 4.4 float Nastavuje, kterou stranou je objekt obtékán textem. Left umístí objekt napravo a text jej obtéká zleva, right naopak. float: left right none Martin Kruliš pouze ke studijním účelům strana 3 z 8

4 4.5 height, width Nastavují výšku (height) a šířku (width) objektu. height: velikost procenta auto width: velikost procenta auto 4.6 border (border-bottom, border-left, border-right, border-top) Nastavuje všechny parametry okraje najednou. Atribut border nastavuje okraj okolo celého objektu, atributy border-bottom (spodní okraj), border-left (levý okraj), border-right (pravý okraj), border-top (horní okraj) nastavují okraj jen na příslušné straně objektu. Jednotlivé parametry naleznete rozepsané v následujících kapitolách (4.8 a 4.9) border: [ border-width ] [ border-style ] barva 4.7 border-color (border-bottom-color, border-left-color, border-right-color, border-top-color) Nastavuje barvu okraje. Další atributy (border-bottom-color, border-left-color, border-right-color, border-top-color), nastavují barvu okraje jen na příslušné straně objektu. border-color: barva 4.8 border-style (border-bottom-style, border-left-style, border-right-style, border-top-style) Nastavuje typ okraje. Další atributy (border-bottom-style, border-left-style, border-right-style, border-top-style), nastavují typ okraje jen na příslušné straně objektu. border-style: none dotted dashed solid double groove ridge inset outset doted tečkovaná groove 3D stínování - rýha dashed čárkovaná ridge 3D stínování - výstupek solid plná inset 3D stínování - snížený double dvojitá outset 3D stínování - vyzdvižený 4.9 border-width (border-bottom-width, border-left-width, border-right-width, border-top-width) Nastavuje šířku okraje. Tento atribut akceptuje zadání jedné až čtyř hodnot. 1 hodnota určuje šířku pro všechny čtyři strany 2 hodnoty 1. je pro horní a dolní okraj a 2. pro levý a pravý okraj 3 hodnoty 1. je pro horní okraj, 2. pro levý a pravý a 3. hodnota je pro spodní okraj 4 hodnoty v pořadí horní, pravý, dolní a levý okraj border-width: [ thin medium thick velikost ] {1-4} Další varianty (border-bottom-width, border-left-width, border-right-width, border-top-width) nastavují šířku okraje pouze na příslušné straně objektu. border-left-width: [ velikost procenta ] 5. parametry seznamů list-style, list-style-image, list-style-position, list-style-type 5.1 list-style Nastavuje všechny parametry seznamu najednou. Jednotlivé parametry naleznete v následujících kapitolách. list-style: [ list-style-type ] [ list-style-position ] [ list-style-image ] Pozn: list-style-type lze uvést i za list-style-image. V případě, že prohlížeč nedokáže obrázek (podle list-style-image) stáhnout, použije se tvar podle list-style-type. 5.2 list-style-image Nastavuje obrázek, který je použit místo klasických odrážek. list-style-image: url none Martin Kruliš pouze ke studijním účelům strana 4 z 8

5 5.3 list-style-position Nastavuje, zda má být odrážka umístěna uvnitř (inside), nebo vně (outside) oblasti seznamu (nejvíce se projeví při nastavení okrajů - viz artibut border - kapitola 4.6) list-style-position: inside outside 5.4 list-style-type Nastavuje typ odrážek v seznamu: kroužek (disc), kolečko (circle), čtvereček (square), čísla (decimal), malá římská (lower-roman), velká římská (upper-roman), malá písmena (lower-alpha), velká písmena (upper-alpha) list-style-type: disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none 6. další atributy CSS 6.1 display Nastavuje způsob, jakým bude objekt zobrazen. Hodnota none, zakáže prohlížeči objekt zobrazit (nebude pro něho ani vynecháno místo), ostatní hodnoty způsobí, že se objekt zobrazí obvyklým způsobem. display: none block inline list-item Importuje externí soubor tříd CSS stylů. Tento atribut se používá v hlavičce uvnitř tagu url(url) 6.3!important Zvedne prioritu atributu, za kterým následuje. <STYLE> P { color:red!important } </STYLE> <P style= color:green > Tento text bude červený </P> 7. pseudo-elementy CSS active, link, visited, hover, first-letter, first-line 7.1 podtřídy tagu A (active, link, visited, hover) Třída A nastavuje atributy CSS pro tag A. Pomocí podtříd lze nastavit formátování tagu A při různých příležitostech: výchozí (link), myš přejíždí nad odkazem (hover), při kliknutí na odkaz (active), již navštívený odkaz (visited) A:link { text-decoration: none } A:hover { text-decoration: underline } - pokud uživatel přejede myší nad odkaz, text odkazu se podtrhne. 7.2 first-letter Nastavuje CSS atributy speciálně jen pro první písmeno textu. P:first-letter { color: blue } - zobrazí první písmeno v tagu P modře 7.3 first-line Nastavuje CSS atributy speciálně jen pro první řádek textu. P:first-line { font-size: larger } - zobrazí první řádek relativně větším písmem Martin Kruliš pouze ke studijním účelům strana 5 z 8

6 8. ochutnávka CSS 2 clip, cursor, filter, left, overflow, position, top, visibility, z-index 8.1 clip Ořízne objekt. Všechny části objektu, které se nachází mimo nastavený obdélník (rect), nebudou viditelné. Obdélník se zadá pomocí čtyř rozměrů. Pozn: clip lze použít pouze pokud je atribut position (viz 8.3) nastaven na relative, nebo absolute. clip: rect(horní, pravý, dolní, levý) auto 8.2 overflow Tento atribut určuje, jak se má objekt zachovat, pokud se do něho text nevejde. Tento atribut lze použít jen u tagů DIV, SPAN a TEXTAREA. Tento atribut funguje pouze pokud je nastaven position (viz 8.3) na relative nebo absolute a jsou dány pevné rozměry objektu pomocí width a height (viz 4.5). overflow: scroll hidden visible auto scroll hidden visible auto textem lze uvnitř objektu scrollovat text bude oříznut objekt se roztáhne prohlížeč určí sám (většinou začne také scrollovat) 8.3 position Určuje jakým způsobem bude objekt zarovnáván. Výchozí hodnota je static (objekt podléhá klasickému zarovnání HTML). Hodnota absolute zapíná absolutní zarovnání vůči oknu prohlížeče (nastavení left a top na 0, 0 odpovídá zarovnání k levému hornímu okraji okna prohlížeče). Hodnota relative určuje, že je objekt zarovnán podle pravidel HTML a poté je vychýlen (hodnota left=0 a top=0 že objekt nebude vychýlen vůbec). position: absolute relative static 8.4 left a top Určuje levou (left) resp. horní (top) souřadnice objektu. Tyto atributy má smysl nastavovat pouze při absolutním, nebo relativním zarovnání. left: velikost procenta auto top: velikost procenta auto 8.5 visibility Nastavuje viditelnost objektu. Na rozdíl od atributu display (viz 6.1) pro skrytý objekt se rezervuje místo na stránce. Hodnota inherit říká, že viditelnost bude zděděna od otcovského elementu. visibility: visible hidden inherit 8.6 z-index Nastavuje hloubku objektu. Čím větší je hodnota, tím výše je objekt při vykreslení. Výška objektu se projeví pouze pokud se překrývá s jiným. Tento parametr lze použít pouze v kombinaci s atributem position (viz 8.3) nastaveným na absolute, nebo relative. z-index: hodnota auto 8.7 cursor Nastavuje tvar kurzoru myši při pohybu nad objektem. cursor: auto crosshair default hand move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help auto prohlížeč sám vybere n-resize kurzor změna velikosti nahoru crosshair zaměřovací křížek s-resize kurzor změna velikosti dolů default základní tvar (obyčejná šipka) w-resize kurzor změna velikosti doleva hand ukazovátko ve tvaru ruky e-resize kurzor změna velikosti doprava move kurzor pro přesun objektů nw-resize kurzor změna velikosti doleva-nahoru text kurzor pro výběr textu ne-resize kurzor změna velikosti doprava-nahoru wait přesýpací hodiny sw-resize kurzor změna velikosti doleva-dolu help šipka s otazníčkem se- resize kurzor změna velikosti doprava-dolu Martin Kruliš pouze ke studijním účelům strana 6 z 8

7 8.8 filter Nastavuje grafické filtry, které se mají aplikovat při zobrazení objektu. Tento atribut lze použít pouze u grafických tagů a u tagů DIV a SPAN, které mají nastavené pevné rozměry, nebo jsou umístěny pomocí absolutního zarovnání (viz 8.3). Kromě obyčejných statických filtrů lze nastavit i přechodové filtry, které lze uplatnit v kombinaci s Java skriptem. Filtry jsou definovány v kaskádových stylech verze 3 a v současné době je podporuje pouze Internet Explorer (doporučuji nepoužívat). Zde je ukázka několika statických filtrů. filter: názevfiltru(parametr1, parametr2, ) [ názevfiltru(parametr1, parametr2, ) ] Alpha(Opacity=průhlednost) - nastavuje průhlednost objektu (0 je úplně průhledný, 100 je úplně viditelný) Blur(Add=sloučit s původním, Direction=směr ve stupních, Strength=síla rozmazání) - rozmaže objekt Chroma(color=barva) - nastaví průhlednou barvu objektu DropShadow(color=barva, OffX=horiz. vzdálenost, OffY=vert. vzdálenost, Positive=1) - vykreslí stín objektu FlipH a FlipV - převrátí objekt H - horizontálně, V - vertikálně Glow(color=barva, strength=velikost) - zobrazí záři okolo objektu Gray - zobrazí objekt v šedotónové škále barev Invert - invertuje barvy objektu XRay - speciální úprava, která má vypadat, jako by byl objekt pod rentgenem 9. přílohy 9.1 Syntaxe v tomto dokumentu Syntaxe jednotlivých atributů v tomto dokumentu je zobrazena neproporcionálním písmem (Courier New). Klíčová slova, která je potřeba zapsat tak jak jsou uvedena v tomto dokumentu jsou psána tučně, text psaný kurzívou je třeba nahradit např. hodnotou barvy (viz 9.2) nebo rozměrem (viz 9.3). Znak svislítka (roury) je použit k oddělování možností, ze kterých je třeba vybrat právě jednu. Hranaté závorky [ ] ohraničují volitelnou část. Složené závorky { } s číslem uvnitř určují počet opakování (tj. [ číslo ] {1-4} znamená, že lze zadat jedno až čtyři čísla). Příklad: atribut: [ číslo procenta auto ] {1-3} lze zadat: atribut: 10 atribut: 5% auto atribut: auto auto auto 9.2 Zadávání hodnot barev Barvy lze zadávat třemi základními způsoby: názvem v angličtině (red, green, blue ), ve tvaru #RRGGBB jako v HTML, nebo ve tvaru: RGB červená zelená modrá kde jsou jednotlivé složky zadány desetinným číslem v rozsahu Zadávání rozměrů a velikostí Rozměry lze zadávat v několika různých jednotkách: pixely (px), body (pt), picas (pc, 1pc = 12pt), milimetry (mm), centimetry (cm), palce (in, 1in = 2,54cm) a rovněž v relativních velikostech: šířka písmene m v akt. fomtu (em), výška písmene x v akt. fontu (ex). Jednotky je třeba uvést těsně za zadávanou hodnotou. Např: H1 { font-size: 12pt; width: 100px; text-indent: 3em; } Martin Kruliš pouze ke studijním účelům strana 7 z 8

8 Obsah: 1. font a parametry písma 1 font, font-family, font-size, font-style, font-variant, font-weight 2. barva popředí a parametry pozadí 1 background, background-attachment, background-color, background-image, background-position, background-repeat, color 3. zarovnání a vlastnosti textu 2 letter-spacing, line-height, text-align, text-decoration, text-indent, text-transform, vertical-align 4. okraje, mezery, odsazení a obtékání 3 margin, padding, clear, float, height, width, border, border-color, border-style, border-width 5. parametry seznamů 4 list-style, list-style-image, list-style-position, list-style-type 6. další atributy CSS 5 7. pseudo-elementy CSS 5 active, link, visited, hover, first-letter, first-line 8. ochutnávka CSS 2 6 clip, cursor, filter, left, overflow, position, top, visibility, z-index 9. přílohy 7 Rejstřík: active 5 font-size 1 background 1 font-style 1 background-attachment 1 font-variant 1 background-color 2 font-weight 1 background-image 2 height 4 background-position 2 hover 5 background-repeat 5 border 4!important 5 border-bottom 4 left 6 border-bottom-color 4 letter-spacing 2 border-bottom-style 4 line-height 2 border-bottom-width 4 link 5 border-color 4 list-style 4 border-left 4 list-style-image 4 border-left-color 4 list-style-position 5 border-left-style 4 list-style-type 5 border-left-width 4 margin 3 border-right 4 margin-bottom 3 border-right-color 4 margin-left 3 border-right-style 4 margin-right 3 border-right-width 4 margin-top 3 border-style 4 overflow 6 border-top 4 padding 3 border-top-color 4 padding-bottom 3 border-top-style 4 padding-left 3 border-top-width 4 padding-right 3 border-width 4 padding-top 3 clear 3 position 6 clip 6 text-align 2 color 2 text-decoration 2 cursor 6 text-indent 2 display 5 text-transform 3 filter 7 top 6 first-letter 5 vertical-align 3 first-line 5 visibility 6 float 3 visited 5 font 1 width 4 font-family 1 z-index 6 Martin Kruliš pouze ke studijním účelům strana 8 z 8