Eine der wichtigsten Eigenschaften von Stylesheets besteht darin, dass sie auf einer Vielzahl von Medien verwendet werden können, beispielsweise auf Seiten, Bildschirmen, elektronischen Synthesizern usw. Bestimmte Eigenschaften können nur auf bestimmten Medien funktionieren. Beispielsweise ist die Eigenschaft „font-size“ nur auf scrollbaren Medientypen (Bildschirm) gültig.
Die Deklaration eines Medienattributs kann mit @import oder @media eingeführt werden:
Hier ein Zitat:
@import url(loudvoice.css) Rede;
@media print {
/* Hier geht es zum Stylesheet für den Druck */
}
Medien können auch in das Dokument-Markup eingeführt werden:
Hier ein Zitat:
Es ist ersichtlich, dass der Unterschied zwischen @import und @media darin besteht, dass ersteres externe Stylesheets für Medientypen einführt, während letzteres Medienattribute direkt einführt. Die Methode zur Verwendung von @import besteht darin, die URL-Adresse der Stylesheet-Datei zu @import hinzuzufügen und dann den Medientyp hinzuzufügen. Mehrere Medien können ein Stylesheet gemeinsam nutzen, und die Medientypen werden durch Trennzeichen getrennt. Die Verwendung von @media besteht darin, den Medientyp an die erste Stelle zu setzen, und andere Regeln sind grundsätzlich dieselben wie der Regelsatz. Die verschiedenen Medientypen sind unten aufgeführt:
BILDSCHIRM: Bezieht sich auf den Computerbildschirm.
DRUCKEN: Bezieht sich auf undurchsichtige Medien, die mit Druckern verwendet werden.
PROJEKTION: bezieht sich auf das zur Anzeige verwendete Projekt.
BRAILLE: Braille-System, bezeichnet Drucksachen mit taktiler Wirkung.
AURAL: Bezieht sich auf einen elektronischen Sprachsynthesizer.
TV: Bezieht sich auf Fernsehmedien.
HANDHELD: bezieht sich auf ein tragbares Anzeigegerät (kleiner Bildschirm, monochrom)
ALLE: Für alle Medien geeignet.