Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS

Mimochodem, co je CSS? CSS vzniklo někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových stránek. Ta zkratka znamená Cascading Style Sheets, česky "kaskádové styly". Kaskádové, protože se na sebe mohou vrstvit definice stylu, ale platí jenom ta poslední. Už je na světě CSS 2, vylepšené a složitější formy stylů, které ale zatím moc nefungují v nejrozšířenějším prohlížeči Internet Exploreru.) Styly poprvé implementovala f. Microsoft do IE 3.0. První verze stylů má název Level 1 a je uvedena v HTML 4.0. Pomocí stylu lze jednoduše definovat druh písma, způsob zarovnání, barvu a další vlastnosti tagu. Tato definice se použije jednotně v celém dokumentu. V dokumentu se soustředíme pouze na strukturu informace – grafický vzhled je definován stylem.

Formátování HTML Každý text má obsah a formu. Formát (forma) webových stránek - barva a velikost písma, pozadí, zarovnání atd., prostě všechno, co nepatří do obsahu. Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Proto dnes existují dva odlišné způsoby, jak v HTML třeba obarvit písmo nebo ztučnit text. 1. Starší způsob používá přímo HTML tagy. (Například kurzíva se dělá pomocí tagů a : kurzíva). Pomocí tagů se některé věci nedají udělat. 2. Novější způsob -- CSS styly -- používá obecný atribut "style", kterému se přiřazuje nějaká definice. Je to složitější, ale všeobecné.

Drobný problém CSS nepodporují starší prohlížeče (2. Explorer a 3. Navigator), v takových se text nezformátuje (zůstává čitelný), ale tyhle prohlížeče se už téměř nevyskytují (a bude lépe). CSS zatím nepodporují mobilní zařízení, například prohlížeče Ipaqů. I v nich ale jde text přečíst.

Základy práce se styly H1 { color: blue } ....

skládá se z 1 pravidla H1 ... selektor, lze použít všechny tagy HTML color: blue ... deklarace, color ... vlastnost, blue ... hodnota

vlastnosti Selektor zajišťuje vazbu na odpovídající HTML tag. Vlastností u každého tagu, které je možno použít, je několik desítek.

Trojí použití CSS Styl se může nadeklarovat třemi způsoby:



Přímo (in-line)

Do zdroje se napíše tato deklarace odstavce:

Tento odstavec bude červený.

-1-

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS

Vysvětlení:

je značka vymezující odstavec; z anglického paragraph. Atribut "style" je obecný atribut podobný třeba atributu "align", jenže je mocnější.

-2-

Okruhy k absolutoriu



Kaskádové styly dokumentů - CSS

Stylopisem

Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy <style>: <style> p

{color: red}



a do těla stránky se mohou psát odstavce:

Tento odstavec bude červený.

Tento mimochodem také, protože červené budou všechny.

To, jak zařídit, aby nebyly červené všechny, ale jenom některé odstavce, se dá pomocí "tříd" a "identifikátorů", o tom později.



Externím CSS souborem

Vytvoří se soubor, který se pojmenuje třeba styly.css. V něm bude tento text: p

{color: red}

Do hlavičky html dokumentu, který chci stylovat, musím napsat odkaz na tento soubor:

V těle dokumentu pak budou opět všechny odstavce červené. K dispozici je i podrobnější příklad.

Pravidla použití stylů Definice stylů jsou v sekci HEAD, kvůli kompatibilitě se staršími verzemi prohlížečů je pod úrovní STYLE ještě jeden „obal“, který má strukturu tradičního komentáře (). Je to výjimka, kdy moderní prohlížeč tato data neinterpretuje jako komentář, ale jako tag HTML. Ten prohlížeč, který tag STYLE nezná, jej naopak jako komentář interpretuje.

Třída jako selektor <TITLE>Titulek stránky <STYLE TYPE=“text/css“>

-3-

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS

Přiřadí se styl “novy“ k formátovacímu stylu odstavce P. V případě konfliktu definic má přednost ta, která je uvedena jako poslední.

Tento text nemá přiřazen žádný styl.

Velikost písma ve stylu “novy“ přebije velikost písma definovaného v tagu H1.

Chcete-li aplikovat pouze formátování stylu, <SPAN CLASS=“novy“>tag SPAN nijak text neformátuje a ni na něj nemá žádný vliv.

Příklad s odkazy :pseudotřídy Pomocí stylopisů se dají formátovat libovolné HTML tagy, ne pouze nadpisy. Obzvlášť efektní je to u odkazů. Nebudu vypisovat celý zdroj, omezím se na stylopis: <style>
{text-decoration: none}

a:link

{color: green}

a:visited {color: navy} a:active {color: black} a:hover {color: red; text-decoration: underline} -->

Celý soubor s tímto stylopisem si můžete zobrazit. Setkáváme se tu s deklarací formátu odkazů -vnitřku tagu . Navíc tento tag má pseudotřídy (různé stavy), které umožňují různé zobrazení podle toho, zda už je odkaz navštívený nebo zda po něm jede myš. Takže konkrétně: 

text-decoration: none znamená, že odkazy nebudou podtrhávané



a:link znamená nenavštívený odkaz (bude zelený)



a:visited je už navštívený (tmavě modrý)



a:active je ten, na který se zrovna kliklo (černý), nebo ten, po kterém jede tabulátor



a: hover je ten, přes který se jede myší (červený podtržený)



text-decoration: underline znamená podtržení.

Tag A je jediný, u něhož se vyskytují pseudotřídy. Ještě pozor na syntaxi: mezi a a dvojtečkou není mezera! První řádek stylopisu definuje nepodtrhávání odkazů pro všechny pseudotřídy. Pouze a:hover tuto deklaraci přebíjí, protože je uvedena později.

-4-

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS

Identifikátor Pro jednoznačný popis nějakého elementu (zejména pro potřeby skriptů) existuje univerzální atribut ID. I jemu se může ve stylopisu přiřadit nějaká deklarace, ale na rozdíl od třídy nezačíná tečkou, ale dvojkřížkem #. V těle dokumentu by se element s jedním identifikátorem měl vyskytovat jenom jednou. Kdybych v předchozím příkladu použil identifikátoru namísto třídy, deklarace by vypadala takhle: #podtitul { text-align: center; font-weight: bold; text-decoration: overline}

a v těle by se odstavci přiřadila identifikace atributem id:

Text podtitulu

Identifikátor id se z hlediska CSS chová stejně jako třída class. Rozdíly jsou právě jen ve skriptech a v parsování dokumentu. Osobně identifikátory pro formátování nepoužívám, stačí mi třídy.

Složené deklarace – slučování definic Stylopisy umožňují nadeklarovat vlastnosti pro více elementů najednou. Například deklarace H1, H2, H3

{color: green}

obarví všechny nadpisy první, druhé i třetí úrovně na zeleno. Hromadnou deklaraci používám, pokud zadávám mnoho stejných vlastností pro mnoho elementů. Důležitá je čárka mezi selektory! Kdyby tam nebyla, šlo by o něco jiného, totiž o kontextový selektor. Nebo lze sloučit deklarace: H1 { font-size: 12pt; font-family: sans-serif; font-style: normal}

Kontextová deklarace Vysvětlím příkladem: H3 A

{font-style: italic}

Tato deklarace by udělala kurzívou všechny odkazy uvnitř nadpisů třetí úrovně (elementy A uvnitř elementu H3).

Obyčejný text nadpisu s odkazem kurzívou

Obyčejný odstavec s obyčejným odkazem

Odkazy v obyčejných odstavcích to nijak neovlivní, stejně tak obyčejný text trojkového nadpisu. Zápisy selektorů kontextového zápisu jsou odděleny pouze mezerou. Osobně tuto vlastnost považuji za nejfantastičtější a výborně použitelnou vlastnost CSS. Použil jsem ji třeba v příkladu o různých barvách odkazů.

Skládání stylů Díky CSS se na jeden element může navrstvit mnoho různých deklarací (proto styly kaskádové), někdy i protichůdných. Jak se rozhodne, která deklarace převládne? Zpravidla ta poslední. Když chci, aby nějaká dřívější deklarace převládla, napíšu do deklarace řetězec "! important". Taková deklarace potom nebude přehlušena žádnou pozdější. (Tuto vlastnost doporučuji používat s rozvahou, protože způsobuje zmatek při pozdějším ladění designu.) -5-

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS

Pseudoelementy Ve specifikaci CSS1 se vyskytují pseudoelementy :first-line a :first-letter. Znamenají první řádek a první písmeno. Například zápis: p:first-line {color: blue} p:first-letter {font-size: 200%}

by měl způsobit, že odstavce budou mít první řádek modrý a první písmeno dvakrát větší. Z prohlížečů to podporují Mozilla 5, Internet Explorer 5.5 (nikoliv IE 5.0) a IE 6 (myslím ale, že Internet Explorer to umí jenom u tagu

).

Shrnující příklad Ve stylopisu (v hlavičce či v externím souboru) se mohou vyskytovat i takovéhle věci: <style> #prvniodstavec

{text-ident: 20 px}

A:visited

{color: teal}

A:link

{color: navy}

a:hover

{color: red}

.velke A

{font-weight: bold}

.zalozka

{font-style: oblique}

.zalozka A:visited H1, H2 H2

{color: navy ! important}

{color: #33ff66; font-variant: small-caps}

{font-size: 18pt}



Doufám, že význam je zřejmý. Všechno to funguje. Důležité je v příkladu snad jen to, že se může jeden element deklarovat vícekrát a že kontextová deklarace se může kombinovat s třídami a pseudotřídami.

Nejisté znaky Ve jménech tříd a identifikátorů se vyvarujte používání podtržítka _ (a raději i češtiny a jiných pochybných znaků, ale mínus je v pohodě). Internet Explorer 5 podtržítko v názvu třídy nebo ID snese a správně zobrazí, žádný jiný prohlížeč ale ne!!! Název třídy ani identifikátoru by podle specifikace neměl začínat číslicí, Internet Exploreru 6 se to opravdu nelíbí.

-6-

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS

Font (písmo) Vlastnost

Hodnoty

Význam

Příklady

Poznámky Může se zadávat více písem za sebou, odděluje se

font-family

seznam

Druh písma,

font-family: Arial čárkami. Pokud klient nemá v systému první font,

písem

font

CE, sans-serif

bere další atd. Vizte Přehled použitelných písem.

font-style

normal

normální

italic

kurzíva

oblique

skoněné

font-style: normal font-style: italic font-style:

Skloněné písmo je prostá geometrická transformace, kurzíva je jiný řez. Prohlížeče většinou užívají kurzívu i při oblique.

oblique Kapitálky jsou velká písmena velikosti malých.

font-variant

normal

normální

FONT-VARIANT:

Velká písmena by měla být trochu větší.

small-caps

kapitálky

SMALL-CAPS

IE 5 udělá sice kapitálky, ale zmenší i velká písmena, což by neměl.

font-size: xx-small

font-size: x-small

font-size: small

font-size: medium

font-size

xx-small

mrňavé

x-small

maličké

small

malé

medium

střední

large

velké

x-large

obří

xx-large

maxipsí

výška

výška

procento

zvětšení

font-size: large

fontsize: x-

Netscape se na procenta tváří divně. MS IE 3.x zase neumí správně zobrazovat jednotky em a ex.

V IE 6 je vykreslovaná velikost závislá na ! doctype. Vizte použitelná písma v různých velikostech. Vizte délkové jednotky v CSS. Vizte velikosti písma podle prohlížečů

large font-size: 14pt font-size: 16px

font-size: 125%

-7-

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS font-weight: normal

normal bold bolder lighter font-weight

100, 200, 300, 400, 500, 600, 700, 800, 900

normální tučné trochu tučnější trochu světlejší duktus vyjádřený číslem

font-weight: bold font-weight: bolder font-weight: lighter font-weight: 100 font-weight: 300,

U většiny fontů mají smysl jenom základní tloušťky: záleží to na výrobci fontu. Bolder a lighter se doporučuje nepoužívat.

font-weight: 400 font-weight: 500 font-weight: 600 font-weight: 800 font-weight: 900 Tato deklarace je citlivá na pořadí jednotlivých

font

všechny možné předchozí

font: bold

údajů. Musí se použít v pořadí: tučnost kurzíva

hodnoty nebo systémové

italic 20px

velikost jméno. Netscape 4 chce všechny hodnoty.

písmo

Arial

Použije-li se v deklaraci např. font: 12pt/14pt, údaj za lomítkem se vztahuje k vlastnosti line-height.

hodnota serif sans-serif cursive fantasy monotype

font-family - obecná jména fontů obecné jméno fontu patkové písmo, nejčastěji Times New Roman bezpatkové písmo, nejčastěji Arial psací písmo divoké volně psané písmo jako psací stroj

Text / odstavec Vlastnost

Hodnoty

Význam

Příklady

-8-

Poznámky

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS text-decoration: none

none underline text-

overline

decoration

linethrough blink

bez dekorace podtržení "nadtržení" přeškrtnutí blikání

text-decoration: underline

Teoreticky se dá zadávat více vlastností

text-decoration:

najednou.

overline

Netscape 4 neumí overline.

text-decoration:

MS IE neumí blinkat.

line-through text-decoration: blink Text-Transform:

none

nechat jak to je

capitalize Začátky Slov text-

uppercas

Velké

transform

e

VELKÁ

lowercas

PÍSMENA

e

malá písmena

none Text-Transform: capitalize TEXTTRANSFORM: UPPERCASE Text-Transform: lowercase

word-spacing

normal délka

mezislovní mezera zvětšená o délku

word-spacing: normal word-spacing:

Prohlížeče podporují od šestých verzí.

100px letter-spacing:

letter-spacing

normal

prostrkání znaků

délka

zvětšené o délku

normal l e t t e r -

Netscape 4 nepodporuje.

s p a ci n g : 5 p t

line-height

text-indent

normal

výška řádku

výška

absolutní výška

násobek

násobek

procento

zvětšení

délka

odsazení prvního

procento

řádku

line-height: 3 line-height: 8px line-height: 80% text-indent: 50

Mozilla 5 na této stránce záhadně nepodporuje,

druhý řádek

normálně ale ano. Popis použití u českých

odstavce

odstavců

-9-

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS text-align: left

text-align

left

zarovnání vlevo

text-align: right

right

vpravo

center

na střed

text-align:

justify

do bloku

blablabla

text-align: center

Dá se použít jen u blokových elementů, tj. u věcí, které má smysl zarovnávat, například u

justify odstavců. blablabla

blablabla bla bla bla

vertical-align

display

baseline

na řádek

sub

dolní index

super

horní index

top

co nejvýše

text-top

vršek k vršku

middle

střed na střed

bottom

co nejníže

text-

spodek

bottom

spodku

procento

procento výšky

block

blokový element

baseline sub

řádek

super

řádek

Vertikální zarovnání nízkého prvku na

top

řádek

vyšším řádku

text-top

ke

řádek

řádek

middle

řádek

použít u buněk tabulky a u obrázků na

bottom

řádek

řádku.

text-bottom

inline

řádkový element

list-item

seznam

none

nezobrazí se

Vlastnosti top, middle a bottom se dají

30%

řádek

řádek

display: block
display: inline
display:

Jde o to říct prohlížeči, že některý element je druhu odstavec (blok), nebo že má být zarovnán do řádku, nebo že je to seznam.

list-item Nejzajímavější je možnost nezobrazení.




Ostatní hodnoty mají význam pouze při formátování XML dokumentů.

Předformátovaný text zachovává mezery a konce řádků jako ve

white-space

normal

normální text

pre

předformátovaný

nowrap

nezalamovat

zdroji. Obdoba tagu <pre>. Nezalamovaný neudělá automatický konec řádky. Podle mých zkušeností funguje pouze v Mozille a v IE 5.5 Závisí na nebo vyšším.

Barvy a pozadí Možnosti zápisu barvy Barva se dá v HTML zapsat pěti způsoby: Způsob zápisu Jménem v angličtině

Příklad: červené písmo

- 10 -

Poznámka Existuje mnoho "pojmenovaných" barev.

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS

Procentuálním RGB



Desetiným RGB zápisem Šestnáctkovým RGB zápisem



Zkráceným šestnáctkovým RGB

(rgb znamená Red Green Blue)



zápisem

Tento způsob je nejjistější, nejpoužívanější a nejlepší. Jenom v případě, že všechny dvojice cifer shodují

Detailním rozborem rgb zápisů se budu zabývat níže.

Pojmenované barvy

Ačkoliv se dnes uvádí několik desítek pojmenovaných barev, je dobré držet se základních šestnácti windowsáckých barev. Jsou to black, white, green, maroon, olive, navy, purple, gray, yellow, lime, aqua, fuchsia, silver, red, blue a teal. Hlavní výhoda tohoto zadávání spočívá ve snadné zapamatovatelnosti, nemusíte analyzovat světelné složky. Jako všude v HTML nemusíte dávat pozor na velká písmena, RED funguje stejně dobře jako red nebo ReD.

RGB model RGB znamená red green blue, čili červená zelená modrá. Lidské oko chápe každé barevné světlo jako směs tří složek: 

červeného (red),



zeleného (green),



a modrého (blue) světla. - 11 -

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS

Stejným způsobem jsou barvy tvořeny na monitoru. Když se na zapnutý monitor podíváte lupou, uvidíte červené, zelené a modré body (nemáte-li lupu, stačí si na monitor plivnout). Rozsvícením sousedních bodů různou kombinací intenzit se tvoří barvy. Například žlutá barva se vytvoří rozsvícením zelených a červených bodů, když modré zůstanou zhasnuté. RGB v HTML funguje úplně stejně. Říká, jak moc se mají rozsvítit červené, zelené a modré body na obrazovce. Například modrá barva se dá procentuálně napsat jako rgb(0%,0%,100%), protože v ní není žádné červené světlo (to je ta první nula), žádné zelené světlo (druhá nula) a je v ní naplno modrá (100%). Žlutá by byla rgb(100%,100%,0%) neboť je tvořena červeným a zeleným světlem. Myslím, že procentuální zápis je natolik zřejmý, že jej nebudu dále rozvíjet. Nejlepší je zápis šestnáctkový, napřed ale vyložím jednodušší desítkový. Pokud máte raději praxi než teorii, podívejte se na tabulku základních barev, ve které jsem vypsal příklady včetně grafických složek barev.

Desítkový RGB zápis Namísto procent se v desítkovém zápisu používají čísla od 0 do 255, kde 0 odpovídá 0% a 255 je 100%. Například zelená barva, která má procentuálně rgb(0%,50%,0%), se desítkově zapíše jako rgb (0,128,0).

Proč je maximum zrovna 255? To vyplývá z toho, jak počítače zacházejí s informacemi. Pro

škálování intenzity pixelu mají (v hi color) vymezeno 8 bitů, což znamená 28 = 256 možností. Protože tam patří i nula, tak maximum je 255. Desítkový zápis se v praxi příliš nepoužívá, ale je dobré jej pochopit, jinak zůstane záhadou i nejpoužívanější zápis šestnáctkový.

Šestnáctkový (hexadecimální) zápis barvy Začíná se vždy dvojkřížkem (#, na české klávesnici pravý alt+X), za kterým následuje šest znaků. První dva znaky patří červené (red), prostřední dva zelené (green) a poslední dva modré (blue). Symbolicky to lze zapsat takto: #ČČZZMM, nebo chcete-li anglicky #RRGGBB. Každá dvojice znaků je číslo v šestnáctkové soustavě. Nejvyšší hodnotou je zde FF (odpovídá 100%), nejnižší 00. (FF je 15 . 16 + 15 = 255) Například modrá barva je #0000FF. Žádná červená ani zelená, jenom naplno modrá. Kdo nerozumí šestnáctkové soustavě, může pro něj být tento zápis na první pohled záhadný. Důležitý je v té dvojici znaků vždycky ten první, druhý jenom drobně škáluje. Čím je ten první znak vyšší, tím více barva svítí. Přitom znak A odpovídá číslu 10, B = 11, C = 12, D = 13, E = 14, F = 15. Nelamte si s tím hlavu, nechte to koňovi, má ji větší. Za chvíli pochopíte, že se to při používání "bezpečných barev" zjednoduší.

Zkrácený zápis Protože se oba znaky zastupujících jedno světlo často zapisují stejným znakem, existuje zkrácená varianta zápisu. Místo šesti znaků se použijí jenom 3. Pak symbolicky barva #RGB odpovídá barvě #RRGGBB. - 12 -

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS

Například vyblitá barva, která se normálně zapisuje #aabbcc, se dá zapsat také #abc. Toho se bohatě využívá zejména při zápisu bezpečných barev.

Bezpečné barvy Starší monitory, starší grafické karty nové mobily dokáží zobrazovat jenom některé barvy. Všechny ostatní barvy se snaží napodobovat kropenatou plochou (dithering), což se ale mnohdy nedaří. Naštěstí existují barvy, kterým se říká bezpečné a které dokáží starší monitory zobrazit bez problémů. Říká se tomu Netscape paleta. Tyto barvy mají v šestnáctkovém zápisu pro každou barvu pouze šest možných hodnot: 00, 33, 66, 99, CC nebo FF. Například #33CC66 je bezpečná barva (nazelenalá). Nebo #FF0066 je bezpečná červená. V procentuálním zápisu se mohou používat násobky 20%, což odpovídá násobkům čísla 51 v zápisu desetinném. Takových barev je 216. Můžete si je prohlédnout na samostatné stránce. Dále k bezpečným barvám patří šestnáct odstínů šedi (#xxxxxx, kde x je 0 až F). Někdy se udává, že k bezpečným barvám patří též základní barvy Windows. Bezpečné barvy by se správně měly používat i ve všech souborech gif. (U jpg je to jedno.)

Zápis barev v CSS Zatímco v normálním HTML se zapisuje (symbolicky) .

Pro zápis "barvy" platí vše, co bylo řečeno výše, i zde jsou tedy ty čtyři způsoby. (Za zmínku stojí, že se barva nedává do uvozovek, tak ji Netscape 4 nepozná.) Například obarvení všech nadpisů druhé úrovně na zeleno se dělá takto: <style> h2 {color: #009900} .

Vlastnost

Hodnoty

Význam

Příklady

Poznámky Barva písma a základních

color

barva

barva písma

color:blue

rámečků nebo barva toho, k čemu se to vztahuje

background-

barva

color

transparent

background-

none

image

url(cesta)

barva pozadí

background-color: yellow

průhledné

background-color:

pozadí

transparent

obrázek na pozadí

background-image: url ('pozadi5.gif') - 13 -

Barva pozadí. Dá se zadávat libovolná barva (zápis barev).

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS background-image: url pozadí se

repeat

opakuje

background-

no-repeat

neopakuje

repeat

repeat-x

opakuje v

repeat-y

ose X nebo v ose Y

('pozadi5.gif'); backgroundrepeat: repeat background-repeat: norepeat background-repeat: repeat-x background-repeat: repeat-y

pozadí se

příklad má smysl pouze u

background-

scroll

posouvá

pozadí stránky; fixed se

attachment

fixed

pozadí je

používá zejména v

jako přibité

souvislosti s rámy

Netscape 4 neumí fixed

top, center, bottom

Poloha obrázku na

background-

left, center,

pozadí

position

right,

(nejčastěji pokud se

délka,

neopakuje)

2 hodnoty se oddělují background-image: url

mezerou. První patří k

('pozadi5.gif'); background-

horizontální, druhá hodnota

repeat: no-repeat;

k vertikální poloze.

background-position: right

Netscape 4.x neumí změnit polohu

50%

z levé horní, dokonce tuto vlastnost ani nezná.

procento background

všechny výše

background: url

uvedé

('pozadi5.gif') no-repeat

hodnoty

scroll silver center bottom

Vizte Vše o pozadí

URL se zadává do závorek a apostrofů, např.: background-image: url('pozadi.gif') . Jsou ale možné i uvozovky nebo jenom závorky. URL může být absolutní i relativní, je však citlivé na velikost písmen.

Velikost a obtékání * Procenta v této tabulce se vztahují k šířce (výšce) rodičovského elementu. Šířka rodiče je nejčastěji šířka dokumentu (nezávislá na okně), kdežto procentuální výška nevnořených elementů se počítá z výšky okna!

Vlastnos t

Hodnoty

Význam

Příklady

- 14 -

Poznámky

Okruhy k absolutoriu

Kaskádové styly dokumentů - CSS V IE nelze nastavit width pro body. Prohlížeče se velmi liší v tom, u kterých objektů jsou

width

auto

automatická šířka

Vizte popis ochotny šířku akceptovat. Myslím, že to má souvislost

šířka

nastavená šířka

délkových

procento procento *

jednotek

s blokovými a řádkovými elementy. V Internet Exploreru 4 a vyšších je do šířky nesprávně započítávána šířka paddingu a borderu (to je quirk mode). Opera, Mozilla (a IE6 ve standardním režimu) počítají správně.

height

auto

automatická výška

Dá se nastavit jenom některým tagům.

výška

nastavená výška

Nejlépe funguje u