 |
CSS umo╛≥ujφ, aby se vzhled strßnky na obrazovce a v tiskßrn∞ odli╣oval.
Uvedu-li v tagu <style> atribut media s hodnotou print,
°φkßm tφm, ╛e se instrukce tohoto stylopisu budou vztahovat jenom na tisk.
<style media="print">
(Existujφ i jinΘ mo╛nΘ hodnoty atributu media, nap°φklad screen pro monitor, page pro ti╣t∞nou strßnku.)
<html><head><title>Pokus s media=print</title>
<style media="print">
p {font-style: italic}
</style>
</head>
<body>
<p>Tento text bude na monitoru zobrazen normßlnφm stojat²m pφsmem,
ale p°i tisku vyleze kurzφvou.</p>
</body></html>
Nev∞°φte? Inu, ne╛ jsem si tenhle p°φklad vytisknul, taky jsem nev∞°il.
Vztahuje-li se k tisku cel² externφ stylopis odkazovan² tagem <link rel=stylesheet>, prost∞ se takΘ p°idß media=print, stejn∞ jako do <style>:
<link rel=stylesheet href="n∞kam.css" media=print>
Hor╣φ situace nastßvß, pokud chci pro tisk urΦit Φßst stßvajφcφho stylopisu nebo kdy╛ styl zadßvßm p°φmo. Pak musφm vyu╛φt formule @media print.
<style>
p {color: blue}/* Normßlnφ stylopis */
@media print {
p {text-indent: 10%}
}
/* PokraΦovßnφ normßlnφho stylopisu*/
</style>
UrΦit∞ jste si v╣imli syntaxe, kterß spoΦφvß v pou╛itφ dal╣φch slo╛en²ch zßvorek, kterΘ ohraniΦujφ styl urΦen² pro tisk.
Podobn∞ se to dß pou╛φt v p°φmΘm stylu:
<p style="@media print{ p {text-indent: 10%} }">Text
odstavce.</p>
V²╣e popsanΘ postupy fungujφ ve v╣ech prohlφ╛eΦφch, kterΘ podporujφ
CSS s v²jimkou Netscape Navigatoru verze 4 (co╛ asi nikoho nep°ekvapφ), ten
na╣t∞stφ pak ty zßpisy ignoruje. MφrnΘ zklamßnφ jsem za╛il u MSIE verze
4, kter² nepodporuje zßpis @media print (media=print ano). IE 5,
Opera 5 a Mozilla 5 podporujφ bezvadn∞. M∙╛ete si to zkusit na p°φkladu, v n∞m╛ vyu╛φvßm
v╣echny postupy.
Nenφ to ╛ßdnß bomba, ale n∞kdy se to m∙╛e hodit. Napadß m∞ pßr p°φklad∙:
UrΦit∞ vymyslφte mnoho vesel²ch pou╛itφ. ZejmΘna si lze vyhrßt s t°φdami a identifikßtory.
CSS2 nabφzφ celou kolekci nov²ch vlastnostφ, kterΘ majφ ovliv≥ovat ti╣t∞n² v²stup. Dnes jsou do prohlφ╛eΦe Internet Explorer 5 zabudovßny pouze vlastnosti urΦujφcφ zalomenφ strßnek.
| Vlastost | V²znam | Hodnoty |
|---|---|---|
| page-break-before | zalomenφ strßnky p°ed elementem | always | auto | right | left | avoid |
| page-break-after | zalomenφ strßnky po elementu |
| Hodnota | V²znam | Poznßmka |
|---|---|---|
| always | zalomenφ v╛dy | Jedinß rozumn∞ pou╛itelnß hodnota |
| auto | normßln∞ | Jako by se nic nezadalo |
| right | novß pravß strßnka | u tisku, v n∞m╛ jsou rozli╣ovßny pravß a levß strßnka |
| left | novß levß strßnka | |
| avoid | nikdy nelßmat | V Internet Exploreru nefunguje |
V praxi by se nejΦast∞ji pou╛ilo zakßzßnφ zarovnßnφ po nadpisech (h2 {page-break-after: avoid}), ale to nefunguje. Proto je dnes rozumnΘ vyu╛itφ t∞chto vlastnostφ jen v p°ikazovßnφ zalomenφ (hodnotou always), co╛ ale Φasto vede k chybßm a zbyteΦnΘ spot°eb∞ papφru.
V Internet Exploreru 5 funguje pon∞kud zvlß╣tnφ CSS vlastnost, kterß umo╛≥uje nastavit tisk nale╛ato, to jest na ╣φ°ku. Zßpis je nßsledujφcφ:
@page {mso-page-orientation: landscape}
Pozor, mßm pocit, ╛e se tφm p°enastavφ prohlφ╛eΦ na del╣φ dobu a pak tak tiskne v╣echno.
Je to n∞kde v nastavenφ prohlφ╛eΦe. Nap° v IE5:
Nßstroje - Mo╛nosti - Up°esnit - Tisk - Tisknout barvy a pozadφ na obrßzky.
Dnes nejroz╣φ°en∞j╣φ prohlφ╛eΦ Internet Explorer 5.x mß velmi p∞kn² p°φkaz: Soubor - Nßhled. Je to klasickΘ zobrazenφ p°ed tiskem, ukazuje strßnku p°esn∞ tak, jak potom vyleze z tiskßrny. Podle m²ch zku╣enostφ je to naprosto p°esnΘ. Tak╛e na pokusy nemusφte pl²tvat papφrem.
Vizte tΘ╛: R∙zn² styl v r∙zn²ch
prohlφ╛eΦφch, P°ehled vlastnostφ a hodnot
CSS
P°φklad: Zkou╣ka tiskov²ch CSS
Obsah
Hledßnφ
Zßkladnφ kurs
Editory
HTML tipy
Provoz webu
CSS styly
Jak psßt web:
http://dusan.pc-slany.cz/internet/
Pφ╣e Yuh∙: autorova strßnka, mail: dusan@pc-slany.cz
Poslednφ aktualizace 01.08.2001