tmw 4 css_2010
DESCRIPTION
TRANSCRIPT
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:
<link rel="stylesheet" type="text/css" href="styly.css”/>
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;}
<link rel="stylesheet" type="text/css" href="mujstyl.css" /></head><body><h1>Text nadpisu</h1><h1 class="cervena">Použitie triedy</h1><p class="vzor1">Farebný text</p>
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;
TMW Písmo a jeho vlastnosti
• 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;
TMW Písmo a jeho vlastnosti
• 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
<style type="text/css">
#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>
<div style="position:absolute; width: 150px; height: 150px; top:60px; left: 100px; background-color:lime; z-index:2;">
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>
<div style="position:absolute; width: 150px; height: 150px; top:160px; left: 150px; background-color:yellow; z-index:1;">
<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
<style type="text/css"><!– #hlavicka {position: absolute; width: 760px; height: 60px; top: 0px; left: 0px; background-color: green; color: white}#levy {position: absolute; width: 150px; height: 360px;top: 60px; left: 0px; background-color: #0000ff; color: white}#pravy {position: absolute; width: 150px; height: 360px;top: 60px; left: 610px; background-color: #ff9933; color: white}#spodny {position: absolute; width: 760px; height: 60px; top: 360px; left: 0px; background-color: #ffff33; color: #000000}--></style><meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /></head><body><div id="hlavicka">Hlavička</div><div id="levy">Levý sloupec</div><div id="pravy">Pravý sloupec</div><div id="spodny">Spodný riadok</div></body>
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í
Vlastnost Hodnoty Význam Příklady Poznámky
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í
Vlastnost Hodnoty Význam Příklady Poznámky
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
clear
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
Vlastnost Hodnoty Význam Příklady Poznámky
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
Vlastnost Hodnoty Význam Příklady Poznámky
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
Vlastnost Hodnoty Význam Příklady Poznámky
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>.