tmw 4 css_2010

39
doc. Ing. Zdislav EXNAR, CSc. Tvorba multimediálnych web stránok TMW Kaskádové štýly

Upload: grep1

Post on 05-Dec-2014

383 views

Category:

Documents


7 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Tmw 4 css_2010

doc. Ing. Zdislav EXNAR, CSc.

Tvorba multimediálnych web stránokTMW

Kaskádové štýly

Page 2: Tmw 4 css_2010

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ú.

Page 3: Tmw 4 css_2010

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.

Page 4: Tmw 4 css_2010

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.

Page 5: Tmw 4 css_2010

TMW Interný zápis CSS

Page 6: Tmw 4 css_2010

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.

Page 7: Tmw 4 css_2010

TMW Použitie parametra ID

Page 8: Tmw 4 css_2010

TMW Použitie tried

Page 9: Tmw 4 css_2010

TMW Definícia univerzálnej triedy

Page 10: Tmw 4 css_2010

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.

Page 11: Tmw 4 css_2010

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

Page 12: Tmw 4 css_2010

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.

Page 13: Tmw 4 css_2010

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. 

Page 14: Tmw 4 css_2010

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.)

Page 15: Tmw 4 css_2010

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;

Page 16: Tmw 4 css_2010

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;

Page 17: Tmw 4 css_2010

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;

Page 18: Tmw 4 css_2010

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;

Page 19: Tmw 4 css_2010

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;

Page 20: Tmw 4 css_2010

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

Page 21: Tmw 4 css_2010

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;

Page 22: Tmw 4 css_2010

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

Page 23: Tmw 4 css_2010

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>

Page 24: Tmw 4 css_2010

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>

Page 25: Tmw 4 css_2010

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>

Page 26: Tmw 4 css_2010

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>

Page 27: Tmw 4 css_2010

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>

Page 28: Tmw 4 css_2010

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. 

Page 30: Tmw 4 css_2010

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.

Page 31: Tmw 4 css_2010

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

Page 32: Tmw 4 css_2010

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í

Page 33: Tmw 4 css_2010

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.

Page 34: Tmw 4 css_2010

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ý

   

Page 35: Tmw 4 css_2010

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

Page 36: Tmw 4 css_2010

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ů

Page 37: Tmw 4 css_2010

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 

Page 38: Tmw 4 css_2010

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).

Page 39: Tmw 4 css_2010

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>.