načítání...
nákupní košík
Košík

je prázdný
a
b

Kniha + CD: 333 tipů a triků pro CSS - Martin Domes

333 tipů a triků pro CSS
-15%
sleva

Kniha + CD: 333 tipů a triků pro CSS
Autor:

Tvoříte internetové stránky a máte chuť používat nevšední vizuální efekty pomocí CSS? Nechcete se zabývat teorií, naopak se chcete ihned vrhnout do praxe? Nyní máte k dispozici tu ... (celý popis)
Produkt teď bohužel není dostupný.

»hlídat dostupnost


hodnoceni - 66.6%hodnoceni - 66.6%hodnoceni - 66.6%hodnoceni - 66.6%hodnoceni - 66.6% 80%   celkové hodnocení
1 hodnocení + 0 recenzí

Specifikace
Nakladatelství: Computer press
Médium: Kniha + CD
Rok vydání: 2009-02-26
Počet stran: 272
Rozměr: 167 x 225 mm
Úprava: 272 stran
Vydání: Vyd. 1.
Vazba: brožovaná lepená
ISBN: 9788025123607
EAN: 9788025123607
Ukázka: » zobrazit ukázku
Popis

Tvoříte internetové stránky a máte chuť používat nevšední vizuální efekty pomocí CSS? Nechcete se zabývat teorií, naopak se chcete ihned vrhnout do praxe? Nyní máte k dispozici tu pravou knihu – sbírku nejužitečnějších tipů a triků pro CSS. Kdykoli si nevíte rady, potřebujete inspiraci či pomoc s řešením zapeklitého problému, stačí nalistovat příslušnou stranu této publikace. Kniha z edice 333 tipů a triků odpoví na všechny vaše otázky, seznámí vás s důmyslnými postupy profesionálů a ukáže vám, jak své představy okamžitě použít v praxi. Kniha vám mimo jiné ukáže, jak: - Uvést odstavec textu dekorativní iniciálou - Použít stínované, hořící nebo neviditelné písmo na stránce - Přizpůsobit podtržení, odrážky a rámečky vlastním představám - Vytvořit na pozadí barevný přechod či obrázkovou tapetu - Nechat obrázky interaktivně vyskakovat z náhledu - Vytvořit bloky s kulatými nebo ohnutými rohy - Tvořit sloupcové layouty a simulovat použití rámů - Vytvořit vodorovnou, záložkovou či drobečkovou navigaci stránky - Zajistit průhlednost elementů a další zajímavé efekty - Vložit do WWW stránky přepínač stylů - Obcházet chyby Internet Exploreru CD s intuitivním rozhraním obsahuje kompletní knihovnu kódů a ukázkových řešení z knihy, které můžete okamžitě použít na svých vlastních WWW stránkách. Na CD dále najdete editory CSS, internetové prohlížeče, vývojové nástroje a užitečné skripty, jichž využívají některé triky v knize. O autorovi: Martin Domes je zkušený tvůrce WWW stránek a autor téměř desítky úspěšných knih, např.: CSS Kapesní přehled nebo Tvorba WWW stránek pro úplné začátečníky. Jako redaktor a šéfredaktor vydavatelství Computer Press stojí za vznikem několika stovek počítačových knih. Jeho web najdete na adrese www.MDwebdesign.cz.

Předmětná hesla
Související tituly dle názvu:
333 tipů a triků jak na počítač 333 tipů a triků jak na počítač
Domes Martin, Bitto Ondřej
Cena: 169 Kč
333 tipů a triků pro Windows 8 333 tipů a triků pro Windows 8
Klatovský Karel
Cena: 254 Kč
333 Tipů a triků pro MS Office 2010 333 Tipů a triků pro MS Office 2010
Klatovský Karel
Cena: 254 Kč
333 tipů a triků pro Windows 10 333 tipů a triků pro Windows 10
Klatovský Karel
Cena: 254 Kč
Martin Domes - další tituly autora:
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

Rozměry, okraje a rámečky

185 Jaké jednotky délky lze v CSS použít

Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů,

tak rozměry okrajů či rámečků. Zapisují se hned za číslo určující množství jednotek.

Možné je použít i zápornou hodnotu pomocí znaménka minus. Jednotky délky mohou

být absolutní a relativní.

Absolutní

Zápis jednotky Význam a velikost

in palec, 1 palec odpovídá 2,54 centimetru

mm milimetr

cm centimetr

pt typografi cký bod, 1 bod odpovídá 1/72 palce

pc pica, 1 pica odpovídá 12 bodům Relativní

Zápis jednotky Význam a velikost

em šířka velkého písmene M, vztahuje se k použitému typu písma

ex výška malého písmene x, vztahuje se k použitému typu písma

px

pixel, neboli obrazovkový bod, jednotka relativní k zobrazovacímu

zařízení (např. monitoru)

186 K čemu se vztahují procenta při určování rozměrů

Místo jednotek délky lze k určení rozměrů použít také procenta. Znak procent se

zapisuje ihned za číslo. Procenta se vztahují k hodnotě téže vlastnosti deklarované pro

nadřazený (rodičovský) element.

Příklad elementů v dokumentu (X)HTML:

<div id=“obal“>

<div id=“levy“>

</div>

...

</div>

A nyní v CSS:

#obal {

width: 700px;

}

začátečník

začátečník


152 Rozměry, okraje a rámečky

#levy {

width: 50%;

}

Šířka element div s identifikátorem levy bude 50 % ze šířky 700 pixelů, kterou jsme

deklarovali u nadřazeného elementu div s identifikátorem obal. Výsledkem tedy bude

hodnota 350 pixelů vlastnosti width.

187 Co to je blokový model CSS

Vše, co se týká nastavování rozměrů, začíná v případě CSS u tzv. blokového modelu.

Veškerý textový i obrazový obsah umísťuje CSS na stránku pomocí bloků. Blok je jakýsi

čtyřúhelník s rozměrem obsahu, okraji a případně s rámečkem. Mluvíme tak o bloku

elementu, který obsahuje:

obsah elementu,

vnitřní okraj,

rámeček,

vnější okraj.

Obrázek 121. Blok elementu

V blokovém modelu pak můžeme mluvit o dvou rozměrech:

rozměr bloku elementu – text včetně rámečku a okrajů,

rozměr obsahu elementu – rozměr samotného textu.

Celkový rozměr elementu je součtem obsahu, okrajů a rámečku, který je buď stejný

(pokud element neobsahuje žádné okraje ani rámeček) nebo větší než rozměr obsahu

(například textu v odstavci).

Upozornění: Starší, pětkové verze Internet Exploreru špatně interpretují blokový

model a hodnoty vlastností width a height v jejich případě nedeklarují rozměr

obsahu, ale celého elementu. Tzn., že do této šířky nebo výšky započítají i okraje

a rámeček. Pro opravu lze použít hack – viz předposlední kapitola knihy.

„

„

„

„

„

„

začátečník


153Rozměry, okraje a rámečky

188 Jaká je skutečná šířka a výška bloku elementu

Skutečné rozměry bloku elementu, tedy prostor, který element na stránce ve skutečnosti

zabírá, se skládá podle blokového modelu CSS (viz předchozí tip) z více částí:

Šířka bloku elementu = levý vnější okraj (margin-left) + levý rámeček (border

left-width) + levý vnitřní okraj (padding-left) + obsah (width) + pravý vnitřní

okraj (padding-right) + pravý rámeček (border-right-width) + pravý vnější okraj

(margin-right).

Výška bloku elementu = horní vnější okraj (margin-top) + horní rámeček(border

top-width) + horní vnitřní okraj (padding-top) + obsah (height) + spodní vnitřní

okraj (padding-bottom) + spodní rámeček (border-bottom-width) + spodní vnější

okraj (margin-bottom).

Příklad:

div.blok {

width: 200px;

height: 100px;

margin: 40px 20px;

padding: 20px 10px;

border: 5px solid red;

}

Obrázek 122. Výpočet šířky a výšky bloku elementu – obrys ukazuje skutečnou velikost

bloku, zatímco obsah určený vlastnostmi width a height je onen čtyřúhelník zcela vevnitř

Šířka bloku tohoto elementu bude: 20 + 5 + 10 + 200 + 10 + 5 + 20 = 270 pixelů.

Výška bloku tohoto elementu bude: 40 + 5 + 20 + 100 + 20 + 5 + 40 = 230 pixelů.

Upozornění: Starší, pětkové verze Internet Exploreru špatně interpretují blokový

model a hodnoty vlastností width a height v jejich případě nedeklarují rozměr

obsahu, ale celého elementu. Tzn., že do této šířky nebo výšky započítají i okraje

a rámeček. Pro opravu lze použít hack – viz kapitola 12.

189 Jak nastavit šířku elementu

Jestliže chcete deklarovat šířku jakéhokoli elementu, pak použijte vlastnost width. Vlastnost

width udává šířku obsahu elementu, do níž nejsou započítávány okraje (vnitřní ani vnější)

a ani rozměr rámečku. Viz předchozí tip Co to je blokový model CSS. Vlastnosti width

můžete přidělit jakékoli jednotky délky, nebo procenta. Jde o vlastnost nedědičnou.

„

„

začátečník

vnější okraj

rámeček

vnitřní okraj

obsah

začátečník


154 Rozměry, okraje a rámečky

#obal {

width: 700px;

}

190 Jak nastavit výšku elementu

Pokud chcete elementu nastavit jednoznačnou výšku, pak použijte vlastnosti height.

Jejími hodnotami mohou být jakékoli jednotky délky, nebo procenta. Jde o vlastnost

nedědičnou. Vlastnost height udává výšku obsahu elementu, do níž se nezapočítávají

rozměry okrajů (vnitřních i vnějších), ani rozměr rámečku.

#zahlavi {

height: 200px;

}

191 Jak nastavit minimální šířku elementu

Pokud používáte proměnlivou šířku elementu, definovanou například pomocí procent,

která se mění podle okolností zobrazení, pak může nastat situace, že bude element tak

malý, že se do něj obsah nevejde a ten přeteče přes okraj. K zabránění takového stavu

můžete použít vlastnost min-width, která určuje minimální možnou šířku elementu.

Jako její hodnoty použijte jednotky délky nebo procenta.

#obsah {

min-width: 500px;

}

Upozornění: Tuto vlastnost neumí vyhodnotit Internet Explorer 6 a starší verze

(řešení ukazuje trik 293). Internet Explorer 7 ji zase použije pouze pokud pracuje ve

standardním režimu (při použití striktního DOCTYPE).

192 Jak nastavit minimální výšku

Jestliže definujete výšku elementu explicitně pomocí vlastnosti height, ale pohyblivě,

například pomocí procent, pak může nastat například situace, že při zmenšení okna

prohlížeče se obsah do elementu nevejde a vyteče přes okraj. Abyste takové situaci

zabránili, můžete nastavit minimální výšku elementu pomocí vlastnosti min-height.

Jako její hodnoty použijte jednotky délky nebo procenta.

#obal {

min-height: 700px;

}

Upozornění: Tuto vlastnost neumí vyhodnotit Internet Explorer 6 a starší verze

(řešení ukazuje trik 292). Internet Explorer 7 ji zase použije pouze pokud pracuje ve

standardním režimu (při použití striktního DOCTYPE).

začátečník

pokročilý

pokročilý


155Rozměry, okraje a rámečky

193 Jak nastavit maximální šířku elementu

Pokud používáte proměnlivou šířku elementu, definovanou například pomocí procent,

která se mění podle okolností zobrazení, pak může nastat situace, že budou řádky textu

tak dlouhé, že se text bude špatně číst. K zabránění tohoto nebo jakéhokoli jiného stavu

vzniklého velkým natažením šířky elementu můžete použít vlastnost max-width, která

určuje maximální možnou šířku elementu. Jako její hodnoty použijte jednotky délky

nebo procenta.

#obsah {

max-width: 1000px;

}

Upozornění: Tuto vlastnost neumí vyhodnotit Internet Explorer 6 a starší verze

(řešení ukazuje trik 294). Internet Explorer 7 ji zase použije pouze, pokud pracuje ve

standardním režimu (při použití striktního DOCTYPE).

194 Jak nastavit maximální výšku elementu

V případě, že chcete z jakéhokoli důvodu omezit maximální výšku elementu, zvláště

pokud používáte procentně stanovenou výšku elementu, může ve velkých rozlišeních

nastat problém se zobrazením. Abyste takové situaci zabránili, můžete nastavit maximální výšku elementu pomocí vlastnosti max-height. Jako její hodnoty použijtejednotky délky nebo procenta.

#novinky {

max-height: 300px;

}

Upozornění: Tuto vlastnost neumí vyhodnotit Internet Explorer 6 a starší verze(řešení ukazuje trik 295 v poslední kapitole). Internet Explorer 7 ji zase použije pouze

pokud pracuje ve standardním režimu (při použití striktního DOCTYPE).

195 Jak nastavit vnější okraje elementu

Vnější okraj kolem elementu je neviditelný, ale vytváří mezery mezi rámečky víceelementů. Efektivně lze pomocí nich například odsazovat odstavce textu. K definování

vnějších okrajů elementu lze použít vlastnosti:

margin-top – horní vnější okraj.

margin-right – pravý vnější okraj.

margin-bottom – spodní vnější okraj.

margin-left – levý vnější okraj.

„

„

„

„

pokročilý

pokročilý

začátečník


156 Rozměry, okraje a rámečky

Hodnotami mohou být jakékoli jednotky délky nebo procenta. Hodnoty této vlastnosti

se nedědí.

p {

margin-top: 0;

margin-bottom: 10px;

margin-left: 5px;

margin-right: 5px;

}

Obrázek 123. Vnější okraje odstavců textu vytváří mezery mezi odstavci

196 Jak nastavit vnější okraj elementu pomocí jediné

vlastnosti

Jestliže chcete vnější okraj elementu nastavit pro všechny strany stejný, nebo pro horní

a spodní stranu jeden rozměr a pro pravou a levou stranu druhý rozměr, pak jejednodušší použít místo čtyř vlastností vlastnost jednu – margin.

Vlastnost margin může nabývat jedné až čtyř hodnot, které oddělte pomocí prázdné

mezery. Hodnoty platí od horní po levou stranu ve směru hodinových ručiček:

Zápis Platí pro strany Příklad

margin: a b c d

čtyři různé hodnoty pro každou stranu zvlášť v pořadí:

horní, pravá, spodní, levá

margin: 4px 5px

3px 2px

margin: a bc d

tři hodnoty: a pro horní, bc pro pravou a levou a c pro

spodní stranu

margin: 4px 2px

3px

margin: ad bc

dvě hodnoty: ad pro horní a spodní stranu a bc pro

pravou a levou stranu

margin: 4px 2px

margin: abcd jediná hodnota: pro všechny strany stejná margin: 3px

197 Jak nastavit vnitřní okraje elementu

Vnitřní okraj elementu vytváří prostor mezi rámečkem a obsahem elementu. Přes

vnitřní okraj se promítne pozadí elementu. K definování vnitřních okrajů elementu lze

použít vlastnosti:

začátečník

začátečník


157Rozměry, okraje a rámečky

padding-top – horní vnitřní okraj.

padding -right – pravý vnitřní okraj.

padding -bottom – spodní vnitřní okraj.

padding -left – levý vnitřní okraj.

Hodnotami mohou být jakékoli jednotky délky nebo procenta. Hodnoty této vlastnosti

se nedědí.

p {

padding-top: 3px;

padding-bottom: 3px;

padding-left: 6px;

padding-right: 6px;

}

Obrázek 124. Vnitřní okraje odstavců vytvoří prostor mezi rámečkem a obsahem odstavců

198 Jak nastavit vnitřní okraje elementu pomocí jediné

vlastnosti

Jestliže chcete vnitřní okraj elementu nastavit pro všechny strany stejný, nebo pro horní

a spodní stranu jeden rozměr a pro pravou a levou stranu druhý rozměr, pak jejedno

dušší použít místo čtyř vlastností vlastnost jednu – padding.

Vlastnost padding může nabývat jedné až čtyř hodnot, které oddělte pomocí prázdné

mezery. Hodnoty platí od horní po levou stranu ve směru hodinových ručiček:

Zápis Platí pro strany Příklad

padding: a b c d

čtyři různé hodnoty pro každou stranu zvlášť v pořadí:

horní, pravá, spodní, levá

padding: 2px 5px

3px 5px

padding: a bc d

tři hodnoty: a pro horní, bc pro pravou a levou a c pro

spodní stranu

padding: 5px 2px

3px

padding: ad bc

dvě hodnoty: ad pro horní a spodní stranu a bc pro

pravou a levou stranu

padding: 5px 10px

padding: abcd jediná hodnota: pro všechny strany stejná padding: 4px

„

„

„

„

začátečník


158 Rozměry, okraje a rámečky

199 Jak vytvořit rámeček kolem elementu

Jestliže budete chtít vytvořit rámeček kolem elementu, pak použijte vlastnost border.

Vlastnosti border je třeba přidělit tři hodnoty:

jednu pro šířku rámečku (border-width , viz tip 201),

druhou pro styl rámečku (border-style, viz tip 203),

třetí pro barvu rámečku (border-color, viz tip 205).

Aby se rámeček zobrazil, je nutné zvolit styl rámečku. Bez jeho deklarování se rámeček

nezobrazí. Pokud neuvedete šířku a barvu rámečku, použijí se výchozí hodnoty prohlížeče.

p {

border: 3px double #0033FF;

}

Obrázek 125. Rámečky kolem odstavců

200 Jak vytvořit rámeček pouze na jedné straně elementu

Jestliže budete chtít vytvořit rámeček pouze na jedné straně rámečku, pak použijte

některou z následujících vlastností:

border-top – horní rámeček.

border-right – pravý rámeček.

border-bottom – spodní rámeček.

border-left – levý rámeček.

Každé vlastnosti je pak třeba přidělit tři hodnoty pro šířku, styl a barvu rámečku (viz

předchozí tip), minimálně ovšem styl rámečku.

p {

border-top: 1px dotted red;

}

Obrázek 126. Rámeček pouze na jedné straně odstavce

„

„

„

„

„

„

„

začátečník

začátečník


159Rozměry, okraje a rámečky

201 Jak nastavit zvlášť šířku rámečku elementu

K určení šířky rámečku použijte vlastnost border-width, jejímiž hodnotami mohou

být jednotky délky. Aby se rámeček zobrazil, je třeba deklarovat navíc minimálně styl

rámečku (viz tip 203). Vlastnost border-width může obsahovat jednu až čtyři vlastnosti

pro každou stranu rámečku zvlášť, nebo jejich kombinace. Jednotlivé hodnoty zastupují

strany od horní po levou po směru hodinových ručiček a oddělte je pouze prázdnou

mezerou.

Zápis Platí pro strany Příklad

border-width: a b c d

čtyři různé hodnoty pro každou stranu zvlášť

v pořadí: horní, pravá, spodní, levá

border: 5px 1px 3px

1px

border-width: a bc d

tři hodnoty: a pro horní, bc pro pravou a

levou a c pro spodní stranu

border: 4px 2px 1px

border-width: ad bc

dvě hodnoty: ad pro horní a spodní stranu a

bc pro pravou a levou stranu

border: 4px 2px

border-width: abcd jediná hodnota: pro všechny strany stejná border: 1px

Šířku rámečku lze vyjádřit kromě jednotek délky také pomocí klíčových sov:

thin – slabý rámeček.

medium – středně silný rámeček (výchozí hodnota).

thick – siný rámeček.

V praxi – představte si, že chcete nastavit styl rámečku a jeho barvu, ale pro horní aspod

ní stranu chcete nastavit odlišnou šířku rámečku, než pro pravou a levou stranu:

p {

border: solid #0033FF;

border-width: 2px 5px;

}

Obrázek 127. Různá šířka stran rámečků elementu

202 Jak nastavit šířku jedné ze stran rámečku elementu

Pokud budete chtít nastavit šířku rámečku například jedné ze stran rámečku zvlášť, pak

můžete použít některou z následujících vlastností:

„

„

„

začátečník

začátečník


160 Rozměry, okraje a rámečky

border-top-width – šířka horního rámečku.

border-right-width – šířka pravého rámečku.

border-bottom-width – šířka spodního rámečku.

border-left-width – šířka levého rámečku.

Hodnotami mohou být jakékoli jednotky délky.

p {

border: 1px solid #0033FF;

border-top-width: 10px;

}

Obrázek 128. Zvlášť nastavená šířka horního rámečku

203 Jak změnit zvlášť styl rámečku

Jestliže budete chtít nastavit vlastní styl rámečku, pak k tomu použijte vlastnostborder

style. Vlastnost border-style může obsahovat jednu až čtyři vlastnosti pro každou

stranu rámečku zvlášť, nebo jejich kombinace. Jednotlivé hodnoty zastupují strany od

horní po levou po směru hodinových ručiček a oddělte je pouze prázdnou mezerou.

Zápis Platí pro strany Příklad

border-style: a b c d

čtyři různé hodnoty pro každou stranu

zvlášť v pořadí: horní, pravá, spodní, levá

border-style: dotted

solid dashed solid

border-style: a bc d

tři hodnoty: a pro horní, bc pro pravou

a levou a c pro spodní stranu

border-style: dotted

solid dashed

border-style: ad bc

dvě hodnoty: ad pro horní a spodní stranu

a bc pro pravou a levou stranu

border-style: solid

dotted

border-style: abcd jediná hodnota: pro všechny strany stejná border-style: solid

Vlastnost border-style může nabývat následujících hodnot:

solid – nepřerušovaná čára.

double – dvojitá čára.

groove – zařízlý rámeček.

ridge – vyvýšený rámeček.

inset – vmáčklý dovnitř.

„

„

„

„

„

„

„

„

„

začátečník


161Rozměry, okraje a rámečky

outset – vystouplý ven.

dotted – tečkovaný.

dashed – čárkovaný.

none – žádný rámeček.

V praxi to může vypadat například následovně – definujete šířku rámečku a jeho barvu,

ale horní a spodní rámeček chcete mít odlišný od rámečků po stranách:

p {

border: 2px #0033FF;

border-style: solid dotted;

}

Obrázek 129. Různý styl rámečku kolem elementu

204 Jak změnit styl jedné ze stran rámečku

Pokud budete chtít nastavit styl rámečku například jedné ze stran zvlášť, pak můžete

použít některou z následujících vlastností:

border-top-style – styl horního rámečku.

border-right-style – styl pravého rámečku.

border-bottom-style – styl spodního rámečku.

border-left-style – styl levého rámečku.

Hodnoty viz předchozí tip. V praxi to pak může vypadat tak, že pomocí vlastnostiborder nastavíte základní vzhled rámečku, ale styl rámečku jedné ze stran nastavíte jiný:

p {

border: 1px solid #0033FF;

border-bottom-style: dashed;

}

Obrázek 130. Zvlášť nastavený styl spodní strany rámečku

„

„

„

„

„

„

„

„

začátečník


162 Rozměry, okraje a rámečky

205 Jak nastavit zvlášť barvu rámečku

Jestliže budete chtít nastavit zvlášť barvu rámečku, pak k tomu použijte vlastnostbor

der-color. Vlastnost border-color může obsahovat některou z definic barvy (viz tip

137–140), a to jednu až čtyři pro každou stranu rámečku zvlášť, nebo jejich kombinace.

Jednotlivé hodnoty zastupují strany od horní po levou po směru hodinových ručiček

a oddělte je pouze prázdnou mezerou.

Zápis Platí pro strany Příklad

border-color: a b c d

čtyři různé hodnoty pro každou stranu

zvlášť v pořadí: horní, pravá, spodní, levá

border-color: red

blue green yellow

border-color: a bc d

tři hodnoty: a pro horní, bc pro pravou

a levou a c pro spodní stranu

border-style: blue

green black

border-color: ad bc

dvě hodnoty: ad pro horní a spodní stranu

a bc pro pravou a levou stranu

border-style: blue

red

border-color: abcd jediná hodnota: pro všechny strany stejná border-style: red

V praxi můžete například nastavit šířku a styl rámečku, ale poté chtít zvlášť nastavit pro

horní a spodní stranu rámečku jinou barvu, než pro pravou a levou stranu rámečku:

p {

border: 3px solid;

border-color: #060 #0F0;

}

206 Jak změnit barvu jedné ze stran rámečku

Pokud budete chtít změnit barvu pouze jediné strany rámečku, pak můžete použít

některou z následujících vlastností:

border-top-color – barva horního rámečku.

border-right-color – barva pravého rámečku.

border-bottom-color – barva spodního rámečku.

border-left-color – barva levého rámečku.

V praxi můžete například nastavit pomocí vlastnosti border základní vzhled rámečku,

ale barvu jedné strany rámečku poté změníte:

p {

border: 2px dotted #03F;

border-bottom-color: #060;

}

„

„

„

„

začátečník

začátečník


163Rozměry, okraje a rámečky

207 Jak CSS pracuje se základními typy elementů

V (X)HTML můžete používat několik základních typů elementů:

Řádkový – element se vykresluje na řádku a následující řádkový element pokračuje

na stejném řádku. S řádkovým elementem pracuje CSS v rámci nadřazenéhoblokového elementu (viz tip 187, Co to je blokový model CSS).

Blokový – element se vykresluje minimálně přes celý jeden řádek, častěji přes více

řádků v maximální možné šířce, kterou může dosáhnout. Následující element, ať už

řádkový nebo blokový, začíná na dalším řádku. Blokový element tvoří blok, s nímž

CSS pracuje při vykreslování objektů na stránce.

Položka seznamu – takový element se skládá z nadřazeného blokového bloku

a samotného řádkového bloku, který obsahuje text.

Obrázek 131. Řádkové a blokové elementy

Poznámka: Jak nastavit či změnit typ elementu popisuje trik 209.

208 Jak CSS pracuje s pokročilými typy elementů

CSS umí pracovat také s pokročilými typy elementů, kromě těch základních (blokový

a řádkový). Mimo nich zvlášť rozlišuje a pracuje s následujícími typy elementů:

Zabíhající – element, který z levé strany začíná jako blokový element, ale z pravé

strany se chová jako element řádkový. Dobrým příkladem může být nadpis(například h1), který sice začne na novém řádku, ale odstavec se zobrazí rovnou za ním, jako by šlo o řádkový element – viz obrázek. Obrázek 132. Nadpis jako zabíhající element

Kompaktní – pokud kompaktní element následuje obyčejný blokový element, formátuje se kompaktní element jako by byl element řádkový. Výsledná šířkakompaktního elementu se porovná s jedním z vnějších okrajů blokového elementu. Pokud je

šířka kompaktního bloku menší nebo rovna vnějšímu okraji blokového elementu,

kompaktní element se umístí do tohoto vnějšího okraje.

„

„

„

„

„

začátečník

znalec


164 Rozměry, okraje a rámečky

Obrázek 133. Definiční výčet – vlevo běžně, vpravo element dt (s termínem) jakokomaktní element

Upozornění: Zabíhající a kompaktní typ elementu zná Opera a Internet Explorer 8

a vyšší verze. Firefox 3 jej vyhodnocovat neumí.

Poznámka: Jak nastavit či změnit typ elementu popisuje následující trik.

209 Jak změnit typ elementu

Jestliže budete chtít změnit typ elementu z jeho výchozího nastavení, pak použijtejednoduše vlastnost display. Pokud chcete měnit typ dokumentu, měli byste velmi dobře

ovládat blokový model CSS a vědět, jak se různé typy elementů v praxi chovají.

Použít můžete některou z následujících hodnot:

block – element naformátuje jako blokový element.

inline – element naformátuje jako řádkový element.

list-item – element naformátuje jako položku seznamu.

run-in – element naformátuje jako zabíhající element.

compact – element naformátuje jako kompaktní element.

none – element na stránce vůbec nevykreslí. Pokud chcete změnit element řádkový na blokový, proveďte to následovně: a { display: block; }

210 Jak vynulovat okraje všech elementů

Znáte to, začnete tvořit WWW stránku, a stále se vám do cesty pletou výchozí okraje

různých elementů, které navíc často každý prohlížeč určuje trochu jinak. Pokud budete

chtít ale na stránce začít od nuly s tím, že žádný element nebude mít žádné okraje, pak

použijte vynulování pomocí univerzálního selektoru.

* {

margin: 0;

padding: 0;

}

„

„

„

„

„

„

Běžné formátování

Kompaktní element

pokročilý

začátečník




       
Knihkupectví Knihy.ABZ.cz - online prodej | ABZ Knihy, a.s.
ABZ knihy, a.s.
 
 
 

Knihy.ABZ.cz - knihkupectví online -  © 2004-2018 - ABZ ABZ knihy, a.s. TOPlist