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, nenapadlo mě ale, k čemu to využít.)
<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.
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
Sláva kočkám! Poslední aktualizace 31.05.2001