Odlišné formátování tisku

CSS umožňují, aby se vzhled stránky na obrazovce a v tiskárně odlišoval.

Media=print

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

Příklad

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

Alternativní zápisy

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>

@Media

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>

Podpora prohlížečů

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.

Výhody

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

Píše Yuhů
dusan@pc-slany.cz
mail formulářem
Jak psát web O tvorbě, údržbě a zlepšování internetových stránek.

Základy HTML CSS FrontPage Hledání

Obsah

Hlavní stránka

Novinky

Download

Zdroje

Hledání


Rozšířené

Základní kurs

Jak udělat stránku

Základy HTML

Publikování

Zásady psaní

Editory

Různé prohlížeče

Editory

FrontPage 2000

FP Editor 98

Word 97

FrontPage Express

HTML tipy

Příprava obrázků

Obrázky

Odkazy

Vychytávky odkazů

Záložky

Aktivní mail

Tabulky

Úprava tabulek

Novinky tabulek

Design tabulkami

Rámy

Formátování rámů

Rámy nepoužívat

Iframe

Formuláře

Formuláře v HTML

Zápis barev

Seznam definic

Formátovací chyby

Provoz webu

Vzdálené služby

Vyhledávače

Katalogy

Správa souborů

Obsah / forma

Čeština

Meta tagy

Nastavení serveru

Používání prohlížeče

CSS styly

CSS styly

Úvod do CSS

Struktura textu

CSS prakticky

Přehled vlastností

Složitější deklarace

Délkové jednotky

Pozicování

Sloupce pozicováním

Okraje objektů

Odlišení prohlížečů

Omezení CSS

Odlišný tisk

Dynamické HTML

Filtry

Příklady filtrů

Různé barvy odkazů

Barva rolovací lišty

 


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