One of the most important features of stylesheets is that they can be used on a variety of media, such as pages, screens, electronic synthesizers, etc. Certain properties can only work on specific media. For example, the "font-size" property is only valid on scrollable media types (screen).
Declaring a media attribute can be introduced using @import or @media:
Here is a quote:
@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}
Media can also be introduced in document markup:
Here is a quote:
<link rel="stylesheet" type="text/css" media="print" href="foo.css">
It can be seen that the difference between @import and @media is that the former introduces external stylesheets for media types, while the latter directly introduces media attributes. The method of using @import is to add the URL address of the style sheet file to @import and then add the media type. Multiple media can share a style sheet, and the media types are separated by "," separators. The usage of @media is to put the media type first, and other rules are basically the same as rule-set. The various media types are listed below:
SCREEN: Refers to the computer screen.
PRINT: Refers to opaque media used with printers.
PROJECTION: refers to the project used for display.
BRAILLE: Braille system, refers to printed matter with a tactile effect.
AURAL: refers to an electronic speech synthesizer.
TV: Refers to television type media.
HANDHELD: refers to a handheld display device (small screen, monochrome)
ALL: Suitable for all media.