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?

Więcej tematów

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...