Služby internetu a tvorba WWW Připojení CSS •Styl je de fi nován v samostatném souboru, na který se html dokument odkazuje. •Styl je de fi nován uvnitř html stránky. •Styl je de fi nován uvnitř html příkazu. Služby internetu a tvorba WWW De fi nování CSS De fi nování stylu html příkazu: p { color: white; background-color: black; } Služby internetu a tvorba WWW De fi nování CSS De fi nování jednoho stylu pro více html příkazů: h1, h2, h3, h4 { color:green; background-color:gold; } Služby internetu a tvorba WWW De fi nování CSS #name{ color:red; font-family: Courier, sans-serif; font-size: 0.5em; } Služby internetu a tvorba WWW Třída .text{ color:blue; font-family: Arial, sans-serif; font-size: 1.2em; } Služby internetu a tvorba WWW Třída Služby internetu a tvorba WWW Písma •serif – klasické patkové písmo, jako je Times •sans-serif – klasické bezpatkové písmo, jako je Arial a Helve ti ca •monospace – neproporcionální písmo, jako je Courier, nebo Terminal •cursive – písmo s kurzívou •fantasy – různá ozdobná písma Služby internetu a tvorba WWW Vlastnos t font-family libovolně dlouhý seznam fontů oddělených čárkami závisí na prohlížeči všechny značky ano nastavení druhů písma; prohlížeč použije první písmo v seznamu, které má k dispozici font-style normal | italic | oblique normal všechny značky ano styl písma: italic = kurzíva, oblique = skloněné font-variant normal | small-caps normal všechny značky ano small-caps = kapitálky font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal všechny značky ano tloušťka písma, normal = 400 font-size xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | délka | procento medium všechny značky ano velikost písma font [‚font-style‘ || ‚font-variant‘ || ‚font-weight‘]? ‚fontsize‘ [/’line-height‘]? ‚font- family‘ podle jednotlivých vlastností všechny značky ano zkrácený zápis – nastavuje všechny vlastnosti písma Služby internetu a tvorba WWW Vlastnos t background- color barva | transparent transparent všechny značky ne barva pozadí background- image url | none none všechny značky ne obrázek na pozadí background- repeat repeat | repeat-x | repeaty | no-repeat repeat všechny značky ne opakování obrázku na pozadí background- attachment scroll | fi xed scroll všechny značky ne scroll = pozadí se pohybuje s textem, fi xed = pozadí je přibité background- position [procento | délka]{1,2} | [[top | center | bottom] || [left | center | right]] 0% 0% blokové a nahrazova né značky ne poloha obrázku na pozadí background background-color‘ || ‚background-image‘ || ‚background-repeat‘ || ‚background-attachment‘ podle jednotlivých vlastností všechny značky ne zkrácený zápis – nastavuje všechny vlastnosti pozadí Služby internetu a tvorba WWW Vlastnos t word- spacing normal | délka normal všechny značky ano velikost mezery mezi jednotlivými slovy letter- spacing normal | délka normal všechny značky ano velikost mezery mezi jednotlivými písmeny text- decoration none | [underline || overline || line-through || blink] none všechny značky témě ř ne efekty: underline = podtržení, overline = čára nad, line-through = přeškrtnutí, blink = blikání vertical-align baseline | sub | super | top | text-top | middle | bottom | textbottom | procento baseline značky v řádce a uvnitř buněk tabulky ne vertikální zarovnání text- transform capitalize | uppercase | lowercase | none none všechny značky ano převede text na: capitalize = kapitálky, uppercase = velká písmena, lowercase = malá písmena text-align left | right | center | justify závisí na prohlížeči blokové značky ano horizontální zarovnání: left = vlevo, roght = vpravo, center = na střed, justify = do bloku text-indent délka | procento 0 blokové elementy ano velikost odsazení první řádky v odstavci line-height normal | číslo | délka | procento normal všechny značky ano výska řádku Služby internetu a tvorba WWW Vlastnos tmargin-top délka | procento | auto 0 všechny značky ne výška mezery nad horním okrajem margin-right délka | procento | auto 0 všechny značky ne šířka mezery na pravém okraji margin- bottom délka | procento | auto 0 všechny značky ne výška mezery nad dolním okrajem margin-left délka | procento | auto 0 všechny značky ne šířka mezery před levým okrajem margin [délka | procento | auto]{1,4} 0 všechny značky ne zkrácený zápis – nastavení šířka mezery kolem celého boxu Služby internetu a tvorba WWW Vlastnos tpadding-top délka | procento 0 všechny značky ne výška vnitřního horního okraje padding- right délka | procento 0 všechny značky ne šířka vnitřního pravého okraje padding- bottom délka | procento 0 všechny značky ne výška vnitřního dolního okraje padding-left délka | procento 0 všechny značky ne šířka vnitřního levého okraje padding [délka | procento] {1,4} 0 všechny značky ne zkrácený zápis – nastavení všech vnitřních okrajů Služby internetu a tvorba WWW Vlastnos t border-top- width thin | medium | thick | délka medium všechny značky ne šířka horní části rámečku border-right- width thin | medium | thick | délka medium všechny značky ne šířka pravé části rámečku border- bottom- width thin | medium | thick | délka medium všechny značky ne šířka dolní části rámečku border-left- width thin | medium | thick | délka medium všechny značky ne šířka levé části rámečku border- width [thin | medium | thick | délka]{1,4} medium všechny značky ne zkrácený zápis – šířka všech částí rámečku border-color [barva]{1,4} podle jednotlivýc h všechny značky ne zkrácený zápis – nastavuje barvu všech okrajů border-style none | dotted | dashed | solid | double | groove | none všechny značky ne styl rámečku: solid = plná čára, double = dvojitá plná čára, atd. border-top ‚border-top-width‘ || ‚border-style‘ || barva podle jednotlivýc h všechny značky ne zkrácený zápis – nastavení všech vlastností horní části rámečku Služby internetu a tvorba WWW Vlastnos tdisplay block | inline | listitem | none block všechny značky ne určuje, jak se má značka zobrazit, použití pro HTML sporné white- space normal | pre | nowrap normal všechny značky an o jak se bude zacházet s mezerami: pre = jako u značky
, nowrap = text se nebude lámat do list-style- type disc | circle | square | decimal | lowerroman | upperroman | lower-alpha disc seznam y an o tvar odrážek před seznamem: disc = plný kruh, circle = kroužek, square = čtverec, list-style- image url | none none seznam y an o obrázek jako odrážka u seznamu list-style- position inside | outside outside seznam y an o typ předsazení odrážky: outside = odrážka bude předsazena, inside = nebude předsazena list-style list-style-type‘ || ‚liststyle-position‘ || ‚list- style-image‘ podle jednotlivý ch vlastností seznam y an o zkrácený zápis – nastavuje všechny vlastnosti seznamu Služby internetu a tvorba WWW ...děkuji za pozornost Mgr. Rostislav Fojtík, PhD . Katedra informatiky a matematik y Obchodně podnikatelská fakulta v Karvin é Slezská univerzit a