Przejdź do treści

Media

Wybór medium

Istnieją dwie drogi do określenia niezależności arkuszy stylów, a przez to przypisania różnym mediom odmiennych cech:

  1. Podanie medium docelowego w arkuszu stylów, korzystając z polecenia @media lub @import:
    @import url(glos.css) aural;
    @media print {
    	/* Arkusz dla wydruku */
    }
  2. Podanie medium docelowego wewnątrz języka dokumentu (atrybut "media" elementu LINK precyzujący włączenie zewnętrznego arkusza stylów):
    <!DOCTYPE html 
    	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    	<head>
    		<title>Odnośnik do medium docelowego</title>
    		<link rel="Stylesheet" type="text/css" media="print, handheld" href="arkusz.css" />
    	</head>
    	<body>
    		<p>Ciało dokumentu...</p>
    	</body>
    </html>

Komenda @media podaje listę docelowych typów nazw mediów, rozdzielonych przecinkami. Pozwala to autorowi zdefiniować różne typy w jednym arkuszu stylów, np.:

@media print {
	body { font-size: 10pt }
}

@media screen {
	body { font-size: 12pt }
}

@media screen, print {
	body { line-height: 1.2 }
}

Powyższe polecenia, wpisane w arkuszu stylów, definiują rozmiar czcionki 10pt dla wydruku, 12pt dla ekranu komputerowego oraz wysokość linii 1.2 jednocześnie dla ekranu i wydruku.

Zobacz także

  • css
    Drukowanie / Media

    W jaki sposób dostosować stronę WWW do wydruku bez potrzeby tworzenia nowej wersji? W jaki sposób ukryć na wydruku niektóre elementy strony?

  • css
    Media / Wstęp

    W jaki sposób przygotować specjalne wersje strony przeznaczone do wydruku, dla urządzeń przenośnych, a nawet syntezatorów mowy, bez potrzeby tworzenia dodatkowych dokumentów (X)HTML?

  • css
    Media / Typy mediów

    Do czego służą typy mediów CSS: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv?

Komentarze

Zobacz więcej komentarzy