tmw 4 css_2010

doc. Ing. Zdislav EXNAR, CSc.

Tvorba multimediálnych web stránokTMW

Kaskádové štýly

TMW Úvod

CSS (Cascading Style Sheets) predstavuje možnosť formátovania WEB dokumentu s využitím definície štýlov. Umožňuje priradiť vlastnosti všetkým prvkom na WEB stránke, ktoré sú označené konkrétnou značkou. Výhodou oproti klasickým značkám HTML je úspora času, jednoduchá zmena formátovania, nové možnosti formátovania textu, ... Nevýhodou je odlišný syntax oproti HTML a veľké množstvo definícií, ktoré sa ťažko pamätajú.

TMW Anatómia

CSS sa skladajú zo značky a definície (deklarácie). Definícia je uzatvorená v zložených zátvorkách. Medzi jednotlivými definíciami sa píše bodkočiarka.

TMW Vloženie CSS do dokumentu HTML

Kaskádové štýly je možné rozdeliť do dvoch skupín:• interné,• externé.

Interné CSS sú definované priamo v zdrojovom kóde dokumentu HTML a je možné ich používať ako lokálne (využíva sa málo) alebo v záhlaví dokumentu (v sekcii „head“).

Externé CSS sú uložené v inom samostatnom súbore.

TMW Interný zápis CSS

TMW Použitie parametra ID

Hodnoty atribútov sa zapisujú bez úvodzoviek.

Ďalšou možnosťou nastavenia vlastností značiek je použitie parametra ID a jeho hodnotou bude ľubovolné unikátne slovo. Pre takúto značku je možné definovať vlastný štýl. Jeho definícia bude daná názvom materskej značky a znakom # za ktorým nasleduje názov ID. Vlastné atribúty budú v zložených zátvorkách.

TMW Použitie parametra ID

TMW Použitie tried

TMW Definícia univerzálnej triedy

TMW Zápis externých štýlov

Externé štýly sa vytvárajú v špeciálnom súbore s príponou .css. V tomto súbore sa neuvádzajú značky <style type="text/css">...</style> . Definície štýlov a tried sa zapisujú priamo.

Do stránky, v ktorej sa majú použiť štýly, sa vloží odkaz na tento súbor pomocou značky:

Pozn.: pri definícii mena súboru v href=... je potrebné zohľadniť umiestnenie súboru. Uvedený príklad je pre súbor css uložený v rovnakom adresári.

TMW Použitie externých štýlov

h1 { color: blue;text-align: center; font: bold 20pt "Vendera","Arial CE";}

h1.cervena { color: red; }.vzor1 { color: #990099;

font: bold;}

Názov súboru:

mujstyl.css

TMW Zložené deklarácie

Hromadná deklarácia

Štýlopisy umožňujú zadeklarovať vlastnosti pre viac elementov naraz. Napríklad deklarácie

H1, H2, H3 {color: green}

zafarbí všetky nadpisy prvej, druhej i tretej úrovne na zeleno. Hromadnú deklaráciu je možné použiť, keď sú zadávané rovnaké vlastnosti pre viacero elementov. Dôležitá je čiarka medzi selektormi! Keby tam nebola, išlo by o niečo iné, totiž o kontextový selektor.

TMW Zložené deklarácie

Kontextová deklarácia príklad

H3 A {font-style: italic}

Táto deklarácia by napísala kurzívou všetky odkazy vo vnútri nadpisov tretej úrovne (elementy A vo vnútri elementu H3).

<h3>Obyčajný text nadpisu s <a>odkazom kurzívou </a> </h3>

<p>Obyčajný odsek s <a>obyčajným odkazom</a></p>

Odkazy v obyčajných odsekoch to nijako neovplyvní, rovnako tak obyčajný text trojkového nadpisu.

Zápisy selektorov kontextového zápisu sú oddelené len medzerou.

TMW Skladanie štýlov

Vďaka CSS sa na jeden element môže navrstviť mnoho rôznych deklarácii (preto štýly kaskádové), niekedy i protichodných. Ako sa rozhodne, ktorá deklarácia prevládne? Spravidla tá posledná.

Keď je potrebné, aby niektorá predchádzajúca deklarácia prevládla, vloží sa do deklarácie reťazec "! important". Takáto deklarácia potom nebude prepísaná žiadnou neskoršou. (Túto vlastnosť je odporúčané používať s rozvahou, pretože spôsobuje zmätok pri neskoršom ladení designu.)

TMW Písmo a jeho vlastnosti

• Typ písma

font-family:[meno_písma], [generické_meno]

meno_písma – uvádza sa v uvodzovkách napr. arial, times new roman, ....

generické_meno – predstavuje skupinu men písma:

- serif – štandardné pätkové písmo (Times)

- sans-serif – štandardné bezpätkové písmo (Arial)

- cursive – zdobené písmo v kurzívnom rezu (Zapf-Chancery)

- fantasy – ornamentálne písmo (Western)

- monospace – neproporcionálne písmo (Courier)

font-family: arial, times new roman, serif;

• Sklonenie písma font-style:[hodnota]

hodnota – normál

- italic font-style: italic;

• Tučné písmo font-weight: [hodnota];

hodnota: normal – normálny typ písma

bold – tučné písmo

číselné označenie:100-300 normal, 400-500 tučné, 600-900, extra tučné

font-weight: bold;

• Variant písma určuje ako bude písmo písané verzálkami alebo malými kapitálkami

font-variant: [názov];

font-variant: small-caps;

• Veľkosť písma font-size: [hodnota];

hodnota: - v jednotkách

- absolútna veľkosť – xx-small, x-small, small, medium, lerge, x-large,

xx-large

- relatívna veľkosť – relative-size – large, smaller oproti pôvodnej,

- výška – určuje výšku písma v typografických jednotkách najčastejšie

v bodoch (pt)

- percentá – určuje veľkosť oproti pôvodnej veľkosti písma.

font-size: 25pt;

font-size: xx-small;

font-size: larger;

font-size: 250%;

• Skratkový príkaz pre zápis vlastností písma font: bold italic 14pt arial, times new roman, serif;

TMW Farby textu a pozadia

Je možné nastaviť farbu textu aj pozadia neviditeľného rámčeka okolo textu.

• Farba textu color: [definícia farby]

- menom základnej farby color:blue;

- RGB zápisom color:rgb(128,250,65);

- rgb štardantnou trojicou color: #cc3366;

- percentuálnou hodnotou jednotlivých zložiek color: rgb(100%,50%,50%);

• Farba pozadia background-color:[farba],[transparentnosť]

- farba – rovnako ako u textu,

- transparentnosť – priehľadnosť pozadia,

• Fixovanie obrázku, pozadia background-attachment: fixed;

background-attachment: scrol;

TMW Formátovanie textu

• Medzera medzi slovami word-spacing: [hodnota]; word-spacing: 10pt;

• Medzera medzi písmenami letter-spacing: [hodnota]; letter-spacing: 5pt;

• Rez písma text-decoration: [hodnota]; text-decoration: underline;

hodnota: none - základný text

underline - podčiarknutý text

overline - čiara nad textom

line-through - prečiarknutý text

• Odsadenie textu predstavuje odsadenie textu od ľavého okraja

text-indent: [hodnota]; text-indent: 50pt;

TMW Formátovanie textu

• Verzálky a kapitálky text-transform: [hodnota]; text-transform: uppercase;

hodnota: capitalize – všetky písmena veľká s zvýraznením prvých písmen

uppercase – všetky písmena veľká text-transform: uppercase;

lowercase – malá písmena,

• Medziriadková medzera line-height: : [hodnota];

hodnota: - číslo line-height: 10pt;

- výška (napr. 1.5 znamená 1,5x výšku písma)

- percentuálna výška

TMW Vlastnosti rámčeka

• Okraje rámčeka margin-left: [hodnota] ; - miesto vľavo

margin-bottom: [hodnota]; - miesto pod textom

margin-right: [hodnota]; - miesto vpravo

margin-top: [hodnota]; - miesto nad textom

margin: 10pt 20pt 30pt 25pt;

margin: nad vpravo pod vľavo

• Veľkosť voľného priestoru okolo elementu

padding-bottom: [hodnota];

padding-left: [hodnota];

padding-right: [hodnota];

padding-top: [hodnota];

padding: 20pt 30pt 45pt 30pt;

TMW Vlastnosti rámčeka

• Zobrazenie rámčeka border-top-width:15pt ;

border-bottom-width: 25pt;

border-left-width: 5pt;

border-right-width: 2pt;

border-width: 2pt 10pt 5pt 35pt; - nastaví veľkosť určeným stranám

border-width: 2pt; - nastaví pre všetky 4 strany veľkosť 2

border-color:#990000 ; - nastavenie farby rámčeka

TMW Zhrňujúci príklad

#prvniOdsek {text-ident: 20 px}

A.visited {color: teal}

A.link {color: navy}

a.hover {color: red}

.velkeA {font-weight: bold}

.zalozka {font-style: oblique}

.zalozkaA:visited {color: navy ! important}

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

H2 {font-size: 18pt}

</style>

TMW Použití CSS - pozíciovanie

Pozíciovanie elementov predstavuje možnosť akýkoľvek objekt (obrázok, tabuľka, text, ...) umiestniť kamkoľvek na stránku, objekty sa môžu prekrývať, posúvať.

Druhy pozíciovania:• Absolútna pozícia – umiestni objekt do stránky na udané

súradnice bez ohľadu na okolie textu.• Relatívna pozícia – určuje o koľko sa má objekt posunúť

oproti svojej pôvodnej polohe. Objekt zostává súčasťou zobrazovaného textu.

<body>Normálný text,<span style="position: relative; top: 20px"> relatívne umiestený

text</span> a<span style="position: absolute; top: 100px; left: 150px">absolútne

umiestený text.</span>.</body>

TMW Prekrývanie

Prekrývanie – vlastnosť, ktorá určuje možnosť vzájomného prekrytia a to v poradí ako sú uvedené v textu dokumentu alebo s využitím

Vnorené pozície – vnorený prvok bude poziciovaný z pohľadu nadriadeného prvku (top:0;left:0 predstavuje horný ľavý okraj nadriadeného prvku)

Syntax

<tag style="position:(absolute|relative); [top: dĺžka]; [left: dĺžka]; [z-index: číslo]">Pozíciovaný element</tag>

TMW Príklad umiestnenia objektu

<body>

Z-index je nastavený na 2, a tak je objekt hore (vyhraje nad všetkými nižšími i neuvedenými z-indexy), i keď je v kódu skorej (je prvý). Bez z-indexu by bol prvý objekt naspodku.

</div>

<br><br><br>Tento žltý objekt so zeleným prehraje, pretože má nastavený z-index len na 1 (to je menej ako 2). V kódu je druhý.

</div>

Z-index. Pre pochopení príkladu je potrebné zobraziť zdroj. Všetky objekty sú absolútne poziciované.

</body>

TMW Vytvorenie stránky pomocou pozíciovania

TMW Neisté znaky

V menách tried a identifikátorov sa nesmie používať podtrhnutie _ (a výrazov s diakritikou a iných pochybných znakov, ale mínus je v pohode). Internet Explorer 5 podtrhnutie v názve triedy alebo ID znesie a správne zobrazí, žiadny iný prehliadač ale nie!!!

Názov triedy ani identifikátora by podľa špecifikácie nemal začínať číslicou, Internetu Exploreru 6 sa to veľmi nepáči.

TMW Přehled vlastností CSS

fonttext a odstavecbarvy a pozadívelikost a obtékáníokrajerámečky seznamypozicovánítabulky

Převzato z:http://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html

V následující části jsou uvedeny tabulky atributů:

TMWFont (písmo)

Vlastnost Hodnoty Význam Příklady Poznámky

font-family seznam písem Druh písma, font font-family: Arial CE, sans-serif

Může se zadávat více písem za sebou, odděluje se čárkami. Pokud klient nemá v systému první font, bere další atd. Vizte Přehled použitelných písem.

font-stylenormalitalicoblique

normálníkurzívaskloněné

font-style: normalfont-style: italicfont-style: oblique

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

font-variant normalsmall-caps

normálníkapitálky FONT-VARIANT: SMALL-CAPS

Kapitálky jsou velká písmena velikosti malých. Velká písmena by měla být trochu větší. IE 5 udělá sice kapitálky, ale zmenší i velká písmena, což by neměl.

font-size

xx-smallx-smallsmallmediumlargex-largexx-largevýškaprocento

mrňavémaličkémaléstřednívelkéobřímaxipsívýškazvětšení

font-size: xx-smallfont-size: x-smallfont-size: smallfont-size: mediumfont-size: largefont-size: x-largefont-size: 14ptfont-size: 16pxfont-size: 125%

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

font-weight

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

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

font-weight: normalfont-weight: boldfont-weight: bolderfont-weight: lighterfont-weight: 100 font-weight: 300,font-weight: 400font-weight: 500 font-weight: 600font-weight: 800font-weight: 900

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 všechny možné předchozí hodnoty nebo systémové písmo font: italic bold 20px Arial

Tato deklarace je citlivá na pořadí jednotlivých údajů. Musí se použít v pořadí: kurzíva tučnost velikost jméno. Použije-li se v deklaraci např. font: 12pt/14pt, údaj za lomítkem se vztahuje k vlastnosti line-height.

TMWVlastnost Hodnoty Význam Příklady Poznámky

text-decoration

noneunderlineoverlineline-throughblink

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

text-decoration: nonetext-decoration: underlinetext-decoration: overlinetext-decoration: line-throughtext-decoration: blink

Teoreticky se dá zadávat více vlastností najednou.MS IE neumí blinkat.

text-transform

nonecapitalizeuppercaselowercase

nechat jak to jeZačátky Slov VelkéVELKÁ PÍSMENAmalá písmena

Text-Transform: noneText-Transform: capitalizeTEXT-TRANSFORM: UPPERCASEText-Transform: lowercase

word-spacingnormaldélka

mezislovní mezerazvětšená o délku

word-spacing: normalword-spacing: 100px

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

letter-spacingnormaldélka

prostrkání znakůzvětšené o délku

letter-spacing: normall e t t e r - s p a c i n g : 5 p t

line-height

normalvýškanásobekprocento

výška řádkuabsolutní výškanásobekzvětšení

line-height: 3line-height: 8pxline-height: 80%

text-indentdélkaprocento

odsazení prvníhořádku

text-indent: 50px;druhý řádek odstavce

Popis použití u českých odstavců

text-align

leftrightcenterjustify

zarovnání vlevovpravona středdo bloku

text-align: left text-align: righttext-align: center

text-align: justify blablabla blablabla blablabla bla bla bla

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

vertical-align

baselinesubsupertoptext-topmiddlebottomtext-bottomprocento

na řádekdolní indexhorní indexco nejvýševršek k vrškustřed na středco nejnížespodek ke spodkuprocento výšky

baseline řádeksub řádeksuper řádektop řádektext-top řádekmiddle řádekbottom řádektext-bottom řádek30% řádek

Vertikální zarovnání nízkého prvku na vyšším řádku Vlastnosti top, middle a bottom se dají použít u buněk tabulky a u obrázků na řádku.

display

blockinlinelist-itemnone

blokový elementřádkový elementseznamnezobrazí se

display: block <br>display: inline <br>display: list-item <br>display: none <br>

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. Nejzajímavější je možnost nezobrazení. Ostatní hodnoty mají význam pouze při formátování XML dokumentů.

white-spacenormalprenowrap

normální textpředformátovanýnezalamovat

Předformátovaný text zachovává mezery a konce řádků jako ve 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> nebo vyšším

Text / odstavec

TMW Barvy a pozadí

color barva barva písma color:blueBarva písma a základních rámečků nebo barva toho, k čemu se to vztahuje

background-color barvatransparent

barva pozadíprůhledné pozadí

background-color: yellowbackground-color: transparent

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

background-imagenoneurl(cesta) obrázek na pozadí background-image: url('pozadi5.gif')

background-repeat

repeatno-repeatrepeat-xrepeat-y

pozadí se opakujeneopakujeopakuje v ose Xnebo v ose Y

background-image: url('pozadi5.gif'); background-repeat: repeatbackground-repeat: no-repeatbackground-repeat:repeat-xbackground-repeat:repeat-y

background-attachment scrollfixed

pozadí se posouvápozadí je jako přibité

příklad má smysl pouze u pozadí stránky; fixed se používá zejména v souvislosti s rámy

background-position

top, center, bottom

left, center, right,

délka, procento

Poloha obrázku na pozadí(nejčastěji pokud se neopakuje)

background-image: url('pozadi5.gif'); background-repeat: no-repeat; background-position: right 50%

2 hodnoty se oddělují mezerou. První patří k horizontální, druhá hodnota k vertikální poloze.

background všechny výše uvedé hodnoty background: url('pozadi5.gif') no-repeat scroll silver center bottom Vizte Vše o pozadí

TMW Velikost a obtékání

widthautošířkaprocento

automatická šířkanastavená šířkaprocento *

Vizte popis délkových jednotek

V IE nelze nastavit width pro body.Prohlížeče se velmi liší v tom, u kterých objektů jsou ochotny šířku akceptovat. Myslím, že to má souvislost s blokovými a řádkovými elementy.V Internet Exploreru ve quirk módu je do šířky nesprávně započítávána šířka paddingu a borderu. Opera, Mozilla (a IE6+ ve standardním režimu) počítají správně.

heightautovýškaprocento

automatická výškanastavená výškaprocento *

Dá se nastavit jenom blokovým tagům.Nejlépe funguje u <div>.

min-widthšířkaprocento

minimální šířka

V Internet Exploreru fungují až od verze 7 ve standardním módu

max-widthšířkaprocento

maximální šířka

min-heightvýškaprocento

minimální výška

max-heightvýškaprocento

maximální výška

floatleftrightnone

umístění plovoucího (obtékaného)objektu či zdaje neplavec

float: leftnormální odstavecfloat: right

leftrightbothnone

čekání na skončeníplovoucích objektůzleva, zprava,obou, nebo žádných

Používá se namísto atributu "clear" u tagu BR.Většinou u nadpisů pod obrázky.

TMW Okraje

margindélkaprocentoauto

šířka vnějšího okrajeprocento *automatický okraj

Vizte text o okrajích

možno zadávat všechny čtyři okraje dohromady nebo zvlášť **

margin-topmargin-leftmargin-bottommargin-right

jako u margin

vnější okrajhorní levýspodnípravý

Popis použití např. u českých odstavců

paddingdélkaprocento

šířka vnitřního okrajeprocento *

možno zadávat všechny čtyři okraje dohromady nebo zvlášť **

padding-toppadding-leftpadding-bottompadding-right

jako u padding

horní vnitřní okrajlevýspodnípravý

TMW Rámečky 1

border-width

thinmediumthickdélka

šířka rámečku slabá,normálnítlustánastavená

Příklady v přílozemožno zadávat všechny čtyři okraje dohromady nebo zvlášť **

border-top-widthborder-left-widthborder-bottom-widthborder-right-width

jako uborder-width

horní šířka rámečkuleváspodnípravá

Měl jsem tu dlouho chybu. Není to border-width-strana, ale border-strana-width.

border-color barva barva rámečkuborder-color: red;border-style: solid

možno zadávat všechny čtyři okraje dohromady nebo zvlášť ** Pro NN 4 nelze rozlišovat jednotlivé čtyři okraje

border-style

none,dotted,dashed,solid,double,groove,ridge, inset, outset

Druh rámečku žádný,tečkovaný,čárkovaný,plný,dvojitý,příkop,val,ďolík, návrší

border-style: none border-style: dottedborder-style: dashedborder-style: solidborder-style: doubleborder-style: grooveborder-style: ridgeborder-style: insetborder-style: outset

IE 4 a 5 zobrazuje doted a dashed jako solid a stínuje vše černou barvou (proto je příklad v zelené, aby bylo alespoň něco vidět).Ostatní prohlížeče včetně IE 5.5 zobrazují správně a stínují šedou. IE 6 zobrazuje úzkou dotted jako dashed

TMW Rámečky 2

Vlastnost Hodnoty Význam Příklady Poznámkyborder-topborder-leftborder-bottomborder-right

barva, tloušťkaa styl

celkové vlastnostistrany rámečku

Příklady v příloze

borderbarva, tloušťkaa styl

všechny vlastnosti rámečku border: solid blue 2px

outlinenonetloušťka styl barva

vnější rámečekoutline: 1px dotted blue;outline: 1px dotted blue; border: 1px solid red;

Outline se zobrauje těsně vně rámečku (border), pokud existuje. Nepřišel jsem na to, jak outline od border oddělit. Outline má stejné hodnoty jako border. Podpora i ve IE 8 (standardní mód), v IE 7 ne

outline-coloroutline-styleoutline-width

jako u border-color, border-style a border-width

border margin padding width top bottom left right

rámečekvnější okraj

vnitřní okraj

šířka (rámečku)

horní spodní levý pravý

Slovníček okrajů a rámečků

TMW Seznamy

list-style-type

disccirclesquaredecimallower-romanlower-alphaupper-alphanone

puntíkkolečkočtverečekčíslovánířímské čísliceábécéčkováníABCDbez odrážek

•disc•circle•square•decimal•lower-roman•lower-alpha•upper-alpha•none

list-style-imagenoneURL(cesta)

normální neboobrázková odrážka

•none•list-style-image: URL('pozadi5.gif')

list-style-positioninsideoutside

odrážky v úrovni textuodrážka mimo text

•list-style-position: inside•list-style-position: outside

při inside je puntík jakoby součástí dalšího textu

list-style všechny předchozí hodnoty

TMW Pozicování

Vlastnost Hodnoty Význam Poznámky

positionabsoluterelativestatic

absolutní umístěnírelativní umístěnínormální umístění

Vizte popis pozicování. Mozilla navíc podporuje hodnotu fixed.

leftautodélkaprocento

bez posunutíposunutí vpravo o délkunebo o procento

Pro prvky s position: absolute nebo position: relative.Vlevo se posouvá zápornou hodnotou.

topautodélkaprocento

bez posunutíposunutí dolů o délkunebo o procento

Pro prvky s position: absolute nebo position: relative.Nahoru se posouvá zápornou hodnotou.

rightautodélkaprocento

pozicování od pravého okraje okna nebo elementu variace na vlastnosti left a top (top a left ale vždy vyhrají). Pouze pro

objekty s position: absolute. Podpora od IE 5, v Opeře a v Mozille, ve starších prohlížečích je to katastrofa.

bottomautodélkaprocento

pozicování od spodního okraje okna nebo elementu

clipautorect(shora zprava zdola zleva)

normální zobrazenízadání obdélníku pro oříznutí elementu

Pouze pro elementy s position: absolute.Hodnoty v závorce udávají viditelný obdélník.Shora a zleva jsou souřadnice levého horního rohu vzhledem k elementu. Zprava a zdola jsou souřadnice pravého dolního rohu.Místo hodnoty se může zadat "auto"; v tom směru se to nebude ořezávat.Vizte příklad a popis.

overflow

visiblehiddenscrollauto

nechat přetékatoříznoutvždy rolovatrolování, je-li třeba

pro elementy, které mají nastavené rozměry a nevejdou se do nich. Vizte popis overflow příklad na overflow. V IE fungují i overflow-x a overflow-y

z-index autočíslo

definice překrývání elementůjakoby v ose z Nefunguje pro tagy iframe, select (v IE) pro a flashové animace

visibility visiblehidden

viditelný elementskrytý (neviditelný)

u skrytých objektů se vyhradí místo, jako by tam byly (narozdíl od display: none).

TMW Tabulky

Vlastnost hodnoty význam poznámky

table-layoutautofixed

nerozměrovaná tabulka se přizpusobuje oknu;fixed = tabulka se nezužuje do okna

Podpora v IE 5+, v Mozille a v Opeře. Použití pouze u tagu <table>

border-collapse

separate

collapse

buňky v tabulce mají rámečky oddělené

sousední buňky mají vykreslený rámeček společně jednou čarou

Podpora v IE 5+, v Mozille a v Opeře. Použití pouze u tagu <table>

border-spacing délka vzdálenost mezi rámečky sousedních buněk

Nefunguje v Internet Exploreru, takže v praxi je nutno používat zastaralý HTML atribut cellspacing. Na cellpadding se dá použít padding pro <td>.

tmw 4 css_2010

Documents

tmw magazine n.41

tmw magazine n.39

tmw magazine n. 23

tmw magazine n. 34

tmw magazine n.30

tmw60/ 100/ pad-printers baa, tmw-140 tmw-60 tmw-ioo …

tmw magazine n.38

kabiny en - tmw

tmw magazine n.14

tmw magazine n.35

tmw magazine n.36

tmw magazine n.54

tmw magazine n.32

tmw magazine n.52

tmw magazine n. 22

tmw magazine n.44

tmw magazine n.31

tmw magazine n.29

tmw 2 html2_2010

tmw magazine n.2