CSS Medientypen

Medientypen ermöglichen es Ihnen, festzulegen, wie ein Dokument in verschiedenen Medien präsentiert wird. Das Dokument kann auf unterschiedliche Weise auf dem Bildschirm, auf Papier oder in auralen Browsern usw. angezeigt werden.

Medientypen

Einige CSS-Eigenschaften sind nur für bestimmte Medien ausgelegt. Zum Beispielvoice-familyDie Eigenschaft ist speziell für aurale Benutzeragenten ausgelegt. Andere Eigenschaften können für verschiedene Medientypen verwendet werden. Zum Beispielfont-sizeDie Eigenschaft kann für Bildschirm- und Druckmedien verwendet werden, jedoch mit unterschiedlichen Werten. Dokumente auf dem Bildschirm und auf Papier unterscheiden sich, wobei üblicherweise eine größere Schriftart erforderlich ist,sans-serifSchriftarten sind besser zum Lesen auf dem Bildschirm geeignet, währendserifSchriftarten auf Papier leichter zu lesen sind.

@media-Regel

Die @media-Regel ermöglicht das Festlegen unterschiedlicher Stile für unterschiedliche Medien im selben Stylesheet.

Das folgende Beispiel weist den Browser an, einen 14-Pixel-Verdana-Schriftstil auf dem Bildschirm anzuzeigen. Wenn die Seite jedoch gedruckt wird, handelt es sich um eine 10-Pixel-Times-Schrift. Beachten Sie, dass font-weight sowohl auf dem Bildschirm als auch auf Papier auf fett gesetzt ist:

Sie können es selbst ausprobieren!Wenn SieMozilla / Firefoxverwenden oder diese Seite mit IE5+ drucken, werden Sie sehen, dass der Medientyp mit einer etwas kleineren Schrift als der andere Text angezeigt wird.

Andere Medientypen

Hinweis:Bei Medientypnamen wird nicht zwischen Groß- und Kleinschreibung unterschieden.